不规则行为 - XAML / UWP 社区工具包缩放动画

Question

问题：我正在使用 UWP 社区工具包缩放动画，它对GridView 中的大多数图像都按预期工作，但对于某些图像超出范围。 （请看下图）

我检测到当图像宽度超过图像高度的 2 倍（2 倍）时会出现此问题。那是图像非常宽的时候。

---

代码

我正在使用用户控件作为数据模板 Xml：

<!-- 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 包的scale animation 实际上使用CompositeTransform 类进行缩放。根据Transforms and layout部分的描述：

因为布局是第一位的，如果您转换 Grid 单元格或在布局期间分配空间的类似布局容器中的元素，您有时会得到意想不到的结果。转换后的元素可能会出现截断或模糊，因为它试图绘制到在其父容器内划分空间时未计算转换后尺寸的区域。

所以部分溢出被截断的边界是意外的。换句话说，输出的图像是预期的变换。您当前用来满足您的要求的方式并不可靠。如果你把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 社区工具包中的错误，最好将其报告为 issue on GitHub。