Question

问题：我正在使用UWP社区工具包比例动画，它可以正常工作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社区工具包的scale animation实际上使用CompositeTransform类进行扩展。根据{{3}}部分的说明：

因为布局是第一位的，所以如果转换网格单元格中的元素或在布局期间分配空间的类似布局容器，有时会得到意外的结果。变换后的元素可能看起来被截断或模糊，因为它试图在其父容器中划分空间时绘制到不计算变换后维度的区域。

因此，部分溢出被截断的边界是意外的。换句话说，图像熄灭是预期的变换。您目前使用的满足您要求的方式并不可靠。如果将GridViewMenu的宽高比更改为1.0，您可能会发现更多大于1.0的宽高比的图像将会消失。

对于GridView内的解决方案，您可以考虑使用Transforms and layout来放大图像，这可以确保图像在固定区域内受到限制。例如：

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

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

2 个答案: