UWP - Rotating an Image while keeping it aligned to the grid, using XAML only

Question

Using Windows Template Studio, I created a (mostly auto-generated) sample UWP application, which shows a bunch of Images within a GridView.

In order to rotate them, I\'v

Answer 1

So that worked fine - until I tried non-square photos. At this stage, the result was that the image itself would sometimes show outside of its container within the grid:

If u want the image will rotate with center and it will not display outside GridView. you could set RenderTransformOrigin property.

<Image Width="100" Height="100" RenderTransformOrigin="0.5,0.5"
Source="{Binding}">
    <Image.RenderTransform>
        <!-- That's the part which I've added, on top of the auto-generated xaml -->
        <RotateTransform Angle="90" />
        <!-- because the ThumbnailImageStyle defines width and height as 228 -->
    </Image.RenderTransform>
</Image>

Update When the GridView item clicked, the default Pressed visual statue will make the content of gridview re-layout. Currently, there is a workaround that use GridViewItemExpanded style.

<GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"