Можно ли управлять композицией XAML ElementVisual Clipping?
Я использую 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>
Файл codebehind содержит следующие дополнительные операторы 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);
}
Когда вы запускаете приложение и нажимаете на каждую из строк, вы должны сначала заметить, что первая строка ведет себя не так, как две другие строки.
Первая строка обрезается в ограничительной рамке Border, а две другие - нет. Также обратите внимание, что две другие строки, кажется, масштабируются за пределы границ последнего элемента и выходят на страницу, но, вероятно, это происходит из-за автоматического изменения размера сетки при заполнении страницы.
Разница между первой строкой и двумя другими заключается в том, что для границы установлено свойство углового радиуса. Мы используем настройку углового радиуса в нашем приложении, поэтому было бы неплохо узнать, есть ли способ переопределить или контролировать это поведение, чтобы оно не обрезало визуальное изображение при масштабировании.
Другое поведение, которое вызывает у нас проблемы, заключается в том, что на границах GridView есть еще одна граница, на которую визуализируется ограничение при масштабировании. Если вы установите какое-либо свойство (например, HorizontalAlignment="Center") в Gridview, которое заставляет его масштабироваться так, чтобы оно становилось настолько большим, насколько это необходимо, тогда визуальное изображение обрезается на границах элементов управления.
Есть ли что-нибудь в Compositional API, которое позволяет мне предотвращать или влиять на это поведение отсечения?