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

Question

问题： 我正在使用 UWP Community Toolkit Scale 动画，它对 GridView 中的大多数图像都按预期工作，但对于某些图像，图像会消失的界限。 (请看下图)

我检测到当图像宽度超过图像高度的 2 倍（2 倍）时会发生此问题。那就是图片很宽的时候。

Code

我正在使用用户控件作为数据模板 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();
        }

Result (Top left image is not scaling as expected, that is, it is going out of bounds)

我该如何解决这个问题？

Answer 1

你可以试试剪裁：

 <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。

Answer 2

scale animation of UWP Community Toolkit package actually use the CompositeTransform class for scaling. According to the description of Transforms and layout 部分：

Because layout comes first, you'll sometimes get unexpected results if you transform elements that are in a Grid cell or similar layout container that allocates space during layout. The transformed element may appear truncated or obscured because it's trying to draw into an area that didn't calculate the post-transform dimensions when dividing space within its parent container.

因此被截断的部分溢出边界是意外的。换句话说，图像出来就是预期的变换。您当前用于满足要求的方式并不可靠。如果将 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); 
}

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

Irregular behavior - XAML / UWP Community Toolkit Scale animation

c#

xaml

uwp

windows-community-toolkit