C# UWP-旋转图像，同时使其与网格对齐，仅使用XAML

使用，我创建了一个（大部分是自动生成的）示例UWP应用程序，它显示GridView中的一组图像

为了旋转它们，我使用了我添加的以下xaml-note

RenderTransform

块，以及该范围内的注释：

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

所以这很好——直到我尝试了非方形照片。 在此阶段，结果是图像本身有时会显示在网格中其容器的外部：

我试过：

• 为CenterX和CenterY字段使用不同的值（根据网格的项目大小，根据原始图像大小，或只是），但这并不能解决问题
• 使用

  Image.layoututtransform

  （），但它似乎在通用应用程序中不可用（或者我缺少一些参考？）
• 请注意，当我单击有问题的图像时，它们会突然移回网格中的预期位置（有时旋转也会消失，因此会移回原始图像）

最终，我在将图像添加到GridView的绑定源代码之前，通过在代码隐藏（）中旋转图像解决了这个问题——但是，仅仅使用xaml本身，难道不应该有一种适当的方法来实现这一点吗

所以这很好——直到我尝试了非方形照片。在此阶段，结果是图像本身有时会显示在网格中其容器的外部：

如果需要，图像将以中心旋转，并且不会显示在

GridView

外部。您可以设置属性

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

---

谢谢我本应该仔细阅读网上文档，但这并不能完全解决我的问题。。因为当我按下图像时，它们会回到原始方向，没有任何旋转。我在这里遗漏了什么？我看到了，当点击GridView项目时，默认的

按下

视觉状态将被调用，GridView的内容将被重新布局。目前，有一种使用

GridViewItemExpanded

样式的解决方法。您能解释一下它是什么以及如何使用它吗？（可以编辑原始答案）让我们来看看。Windows社区工具包有一个备用的LayoutTransform控件

<GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"