Нерегулярное поведение - анимация шкалы инструментов сообщества XAML / UWP

Question

Проблема: я использую анимацию UWP Community Toolkit Scale, и она работает, как и ожидалось, для большинства изображений в GridView, но для некоторых изображение выходит за пределы. (Пожалуйста, смотрите изображение ниже)

Я обнаружил, что проблема возникает, когда ширина изображения более чем в 2 раза (в 2 раза) превышает высоту изображения. Это когда изображение очень широкое.

---

Код

Я использую пользовательский элемент управления в качестве шаблона данных Xaml:

<!-- Grid View  -->
<GridView x:Name="gridView" SelectionChanged="gridView_SelectionChanged">
   <GridView.ItemTemplate>
      <DataTemplate>
           <local:GridViewMenu/>
      </DataTemplate>
   </GridView.ItemTemplate>
</GridView>

---

<!-- GridViewMenu User Control markup -->
<Grid>
  <StackPanel>
    <Image Source="{Binding webformatURL}" Stretch="UniformToFill" PointerEntered="image_PointerEntered" PointerExited="image_PointerExited"/>
  </StackPanel>
</Grid>

Код C#:

        private void image_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            Image img = sender as Image;            

            img.Scale(centerX: (float)(grid.ActualWidth / 2),
                        centerY: 100,
                        scaleX: 1.2f,
                        scaleY: 1.2f,
                        duration: 500, delay: 0).StartAsync();
        }

        private void image_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            Image img = sender as Image;

            img.Scale(centerX: (float)(grid.ActualWidth / 2),
                        centerY: 100,
                        scaleX: 1f,
                        scaleY: 1f,
                        duration: 500, delay: 0).StartAsync();
        }

---

Результат (верхнее левое изображение не соответствует ожидаемому, то есть выходит за границы)

Как я могу решить эту проблему?

Answer 1

Масштабная анимация пакета UWP Community Toolkit фактически использует CompositeTransform класс для масштабирования. Согласно описанию трансформации и макета раздела:

Поскольку компоновка на первом месте, вы иногда получите неожиданные результаты, если преобразуете элементы, находящиеся в ячейке таблицы или аналогичном контейнере макета, который выделяет пространство во время макета. Преобразованный элемент может выглядеть усеченным или скрытым, потому что он пытается нарисовать область, которая не вычисляла размеры после преобразования при разделении пространства в его родительском контейнере.

Таким образом, части переполняют границы, которые обрезаются, являются неожиданными. Другими словами, изображение гаснет - ожидаемое преобразование. Текущий способ, которым вы пользуетесь для удовлетворения ваших требований, не является надежным. Если вы измените соотношение ширины и высоты GridViewMenu до 1,0, вы можете найти больше изображений с соотношением ширины и высоты больше 1,0.

Для решения внутри GridView Вы могли бы рассмотреть возможность использования ScrollViewer вместо этого увеличить изображение, что может гарантировать, что изображение ограничено в фиксированной области. Например:

<Grid x:Name="grid">
   <ScrollViewer
       x:Name="currentscroll"
       HorizontalScrollBarVisibility="Hidden"
       VerticalScrollBarVisibility="Hidden">
       <Image
           x:Name="myImage"
           Width="300"
           Height="180"
           PointerEntered="image_PointerEntered"
           PointerExited="image_PointerExited"
           Source="{Binding webformatURL}"
           Stretch="UniformToFill"> 
       </Image>
   </ScrollViewer>
</Grid>

Код позади:

private  void image_PointerEntered(object sender, PointerRoutedEventArgs e)
{ 
    currentscroll.ChangeView(0, 0, 1.2f ); 
}

private  void image_PointerExited(object sender, PointerRoutedEventArgs e)
{ 
    currentscroll.ChangeView(0, 0, 1.0f); 
}

Answer 2

Вы можете попробовать использовать отсечение:

 <Grid>
   <StackPanel>
      <Image Source="{Binding webformatURL}" Stretch="UniformToFill" 
                PointerEntered="image_PointerEntered" 
                PointerExited="image_PointerExited">
          <Image.Clip>
              <RectangleGeometry Rect="0,0,300,150" />
          </Image.Clip>
      </Image>
   </StackPanel>
 </Grid> 

300 и 150 будут ширина и высота элемента сетки.

В противном случае это похоже на ошибку в UWP Community Toolkit, было бы лучше сообщить о ней как о проблеме на GitHub.