C# 不规则行为-XAML/UWP社区工具包规模动画

问题：我正在使用UWP社区工具包缩放动画，它对

GridView

中的大多数图像都能正常工作，但有些图像超出了范围。（请参见下图）

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

---

代码

我使用用户控件作为数据模板 Xaml：

---

结果（左上角图像未按预期缩放，即超出范围）

---

我如何解决这个问题

您可以尝试使用剪辑：

 <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社区工具包中的一个bug，最好将其报告为。

UWP社区工具包包的实际使用类进行扩展。根据第节的描述：

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

因此，被截断的部分溢出边界是意外的。换句话说，图像熄灭是预期的变换。您目前用于满足需求的方式不可靠。如果将

GridViewMenu

的宽高比更改为1.0，您可能会发现更多宽高比大于1.0的图像将消失

<> >在代码> GRIDVIEW内的一个解决方案中，可以考虑使用“放大”来代替图像，这样可以确保图像在固定区域内受到限制。例如：

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

---

谢谢你的回答。我试着剪裁图像，但似乎缩放忽略了所有边界。（我之前添加StackPanel只是为了限制它越界）。好像这是个bug谢谢你的解释。。这很有帮助。。！虽然，这解决了我的问题，我不得不调整它一点，使其完美地为我工作。。！（尤其是必须禁用

scrollviewer的
滚动模式
，否则会使
GridView
“不可滚动”）。。再次感谢。。！
        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();
        }

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

<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); 
}