异常行为-XAML/UWP Community Toolkit Scale动画 [英] Irregular behavior - XAML / UWP Community Toolkit Scale animation

问题描述

问题::我正在使用UWP Community Toolkit Scale动画，它对于GridView中的大多数图像都可以正常工作，但对于某些图像却超出范围. (请参见下图)

Problem : I am using UWP Community Toolkit Scale animation and it works as expected for most of the images in the GridView, but for some the image goes out of bounds . (Please see the image below)

我检测到当图像宽度大于图像高度的2倍(2倍)时，就会发生此问题.那是图像很宽的时候.

代码

我正在使用用户控件作为数据模板 Xaml:

I am using a user control as data template 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();
        }

---

结果(左上图像未按预期缩放，即超出范围)

如何解决此问题?

推荐答案

:

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

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的图像消失.

So that the parts overflow the bound that being truncated are unexpected. In another words, the image goes out is the transform expected. The current way you are using to meet your requirements is not reliable. If you change width-height ratio of GridViewMenu to 1.0 , you may find more images that width-height ratio larger than 1.0 will go out.

对于GridView内部的解决方案，您可以考虑使用 ScrollViewer 来放大图像，这可以确保将图像限制在固定区域内.例如:

For a solution inside GridView, you could consider to use the ScrollViewer to zoom in the image instead, which can ensure the image is limited in a fixed area. For example:

<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 Community Toolkit Scale动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！