1

问题：我正在使用 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();
        }

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

在此处输入图像描述

我该如何解决这个问题？

4

2 回答 2

2

UWP Community Toolkit 包的缩放动画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); 
}
于 2018-01-08T08:33:30.700 回答
0

您可以尝试使用剪辑：

 <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 社区工具包中的错误，最好将其报告为GitHub 上的问题。

于 2018-01-06T23:11:05.730 回答