Irregular behavior - XAML / UWP Community Toolkit Scale animation

Question

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

Answer 1

You can try to use clipping:

 <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 and 150 would be the width and height of the grid item.

Otherwise it looks like a bug in the UWP Community Toolkit, it would be best to report it as an issue on GitHub.

Answer 2

The scale animation of UWP Community Toolkit package actually use the CompositeTransform class for scaling. According to the description of Transforms and layout section:

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.

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.

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>

Code behind:

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