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've used the following xaml - note RenderTransform block which I've added, and the comments within that scope:

<Grid x:Name="ContentArea">
    <GridView
        x:Name="ImagesGridView"
        ItemsSource="{x:Bind Source}"
        IsItemClickEnabled="True"
        Padding="{StaticResource MediumLeftRightMargin}"
        SelectionMode="None">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="models:SampleImage">
                <Image
                    x:Name="galleryImage"
                    Style="{StaticResource ThumbnailImageStyle}"
                    Source="{x:Bind Source}"
                    AutomationProperties.Name="{x:Bind Name}"
                    ToolTipService.ToolTip="{x:Bind Name}">
                    <Image.RenderTransform> <!-- That's the part which I've added, on top of the auto-generated xaml -->
                        <RotateTransform Angle="90" CenterX="114" CenterY="114" /> <!-- because the ThumbnailImageStyle defines width and height as 228 -->
                    </Image.RenderTransform>
                </Image>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

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:

I've tried:

• To use different values for the CenterX and CenterY fields (according to the grid's item size, according to the original image size, or just "0.5, 0.5" ), but that didn't solve the case.
• To use Image.LayoutTransform ( as suggested here ), but it doesn't seem to be available in a Universal Application (or perhaps I'm missing some reference?).
• Noticed that when I click on the problematic images, they will suddenly move back to their expected location within the grid (and also sometimes the rotation will be gone, so its back to the original image).

Eventually, I solved it by rotating the image in the code-behind ( like here ), before adding it to the binded source of the GridView - but shouldn't there be a proper way to achieve that just by using the xaml itself?

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}"