Is it possible to control Composition XAML ElementVisual Clipping?

247 views Asked by At

I am using UWP and working with the Composition API to programmatically scale child text visuals that are nested in a typical XAML hierarchy. The textblocks in our app are contained in things like borders and a number of those borders are items contained in a GridView.

In many of the scenarios I am experiencing clipping of the associated text visual as it scales to be larger than some of the XAML containers that host the elements and I would like the visual to not get clipped as it scales to be larger than its parent.

Here is a barebone example that demonstrates some of the problems I am seeing…

My test app starts as a blank UWP app and the root grid of my page contains the following Gridview:

        <GridView  >
        <GridViewItem>
            <Border PointerPressed="Border_PointerPressed" CornerRadius="5" Width="125" Height="125">
                <Grid>
                    <TextBlock Text="Content String 1" />
                </Grid>
            </Border>
        </GridViewItem>
        <GridViewItem>
            <Border PointerPressed="Border_PointerPressed" Width="125" Height="125">
                <Grid>
                    <TextBlock Text="Content String 2" />
                </Grid>
            </Border>
        </GridViewItem>
        <GridViewItem>
            <Border PointerPressed="Border_PointerPressed" Width="125" Height="125">
                <Grid>
                    <TextBlock Text="Content String 3"/>
                </Grid>
            </Border>
        </GridViewItem>
    </GridView>

The codebehind file contains the following additional using statements, a variable declaration, variable initialization in page constructor and this event handler:

using System.Numerics;
using Windows.UI.Composition;
using Windows.UI.Xaml.Hosting;

    Compositor compositor;

    public MainPage()
    {
        this.InitializeComponent();
        compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
    }

    private void Border_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        var content = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(sender as FrameworkElement, 0), 0);
        var visual = ElementCompositionPreview.GetElementVisual(content as FrameworkElement);

        var animation = compositor.CreateVector3KeyFrameAnimation();
        animation.InsertKeyFrame(0f, new Vector3(1.0f, 1.0f, 0.0f));
        animation.InsertKeyFrame(0.5f, new Vector3(3.0f, 3.0f, 0.0f));
        animation.InsertKeyFrame(1f, new Vector3(1.0f, 1.0f, 0.0f));
        animation.Duration = TimeSpan.FromMilliseconds(5000);

        visual.StartAnimation(nameof(visual.Scale), animation);
    }

When you run the app and click on each of the strings you should initially notice that the first string behaves differently than the other two string.

The first string gets cropped at the Border's bounding box whereas the other two strings do not. Also note that the other two strings appear to scale past the bounds of last item and out into the page, but that turns out to probably be due to the gridview autosizing to fill the page.

The difference between the first string and the other two is that the border has a corner radius property set on it. We use cornerradius setting in our application, so it would be nice to know if there is a way to override or control this behavior so that it doesn't clip the visual as it scales.

The other behavior that is causing us problems is that at the GridView bounds is another boundary that the visual is clipping at as it scales. If you set any property (like HorizontalAlignment="Center") on the Gridview that causes it to size itself to only be as big as it needs to be, then the visual gets cropped at the controls boundaries.

Is there anything within the Compositional API that allows me to prevent or influence this clipping behavior?

0

There are 0 answers