異常行為-XAML / UWP Community Toolkit Scale動畫

Question

問題：我使用的是UWP Community Toolkit Scale動畫，它對於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 Community Toolkit軟件包的縮放動畫實際上使用CompositeTransform類進行縮放。 根據“ 變換和布局”部分的描述：

由於布局是第一位的，因此，如果您變換網格單元或類似的布局容器中的元素，這些元素會在布局期間分配空間，則有時會得到意外的結果。 轉換后的元素可能會被截斷或遮擋，因為在其父容器內划分空間時，它試圖繪制到一個不計算轉換后尺寸的區域。

從而使部件溢出被截斷的邊界是意外的。 換句話說，圖像熄滅是預期的變換。 當前用於滿足要求的方法並不可靠。 如果將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); 
}

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 Community Toolkit中的錯誤，最好在GitHub上將其報告為問題 。