Question

我有一个包含多列的DataGrid。在其中一个内部列中，我正在显示图像。需要旋转此图像，因此我使用TransformGroup根据需要缩放和旋转图像。

如果我没有旋转，使用以下XAML，图像会正常显示。当我更改图像列的宽度时，图像会按预期进行缩放。它保持在其列的范围内：

<GridViewColumn Header="Image" Width="200" x:Name="image_column">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <Image Source="{Binding Path=ImagePath}" Margin="5">
            </Image>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

现在如果我尝试在图像列中根据需要旋转图像，事情会变得奇怪。该列仍然与非旋转图像宽度相关联，行高与非旋转图像高度相关联。图像也会侵入其左邻居的空间。这是我尝试过的XAML的一个变种：

<GridViewColumn Header="Image" Width="200" x:Name="image_column">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <Image Source="{Binding Path=ImagePath}" Margin="5">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="0.8" ScaleY="0.8" />
                        <RotateTransform Angle="90" CenterX="0" CenterY="0" />
                        <TranslateTransform X="{Binding ElementName=image_column, Path=Width}" />
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

上面的TranslateTransform是一个完整的黑客攻击，至少可以使图像的右边缘与其列的右边缘对齐。

我试图添加一个Viewbox，认为它会按照我想要的方式缩放，并在其中旋转图像，但这不起作用。

任何人都可以告诉我这里基本上缺少什么，并提供我如何处理解决方案的提示？我此时唯一的想法是在显示之前旋转图像并保存到磁盘。

Answer 1

您应该设置LayoutTransform属性而不是RenderTransform。

<Image.LayoutTransform>
    <TransformGroup>
        <ScaleTransform ScaleX="0.8" ScaleY="0.8"/>
        <RotateTransform Angle="90"/>
    </TransformGroup>
</Image.LayoutTransform>

由于列宽是固定的，因此ScaleTransform似乎是多余的。

<Image.LayoutTransform>
    <RotateTransform Angle="90"/>
</Image.LayoutTransform>

WPF ListView中的图像的奇怪转换行为

1 个答案: