是否可以控制Composition XAML ElementVisual Clipping?

时间:2018-12-07 20:21:39

标签: c# scale uwp-xaml clipping windows-composition-api

我正在使用UWP并与Composition API一起以编程方式缩放嵌套在典型XAML层次结构中的子文本视觉效果。我们应用程序中的文本块包含在边框之类的东西中,其中一些边框是GridView中包含的项目。

在许多情况下,我会遇到关联文本可视化的裁剪,因为它缩放到比承载元素的某些XAML容器更大,并且我希望可视化不会缩放到大于它的大小而被裁剪它的父母。

这是一个准系统示例,演示了我所看到的一些问题……

我的测试应用程序以空白的UWP应用程序启动,并且页面的根网格包含以下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>

代码隐藏文件包含以下附加的using语句,变量声明,页面构造函数中的变量初始化以及此事件处理程序:

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);
    }

运行该应用程序并单击每个字符串时,最初应该注意到第一个字符串的行为与其他两个字符串不同。

第一个字符串在“边框”的边界框被裁剪,而其他两个字符串则没有。 另外请注意,其他两个字符串似乎会超出最后一项的范围并扩展到页面中,但这可能是由于gridview自动调整大小以填充页面所致。

第一个字符串与其他两个字符串之间的区别在于,边框上设置了转角半径属性。我们在应用程序中使用了角半径设置,因此很高兴知道是否有一种方法可以覆盖或控制此行为,以便在缩放时不会裁剪视觉对象。

另一个导致我们出现问题的行为是,在GridView边界处,视界在缩放时是另一个边界。如果您在Gridview上设置了任何属性(例如Horizo​​ntalAlignment =“ Center”),使该属性仅将其大小调整为所需的大小,那么视觉效果就会在控件边界处被裁剪。

Compositional API中是否有任何东西可以阻止或影响这种剪切行为?

0 个答案:

没有答案