#770 –LayoutTransform和RenderTransform属性的区别(Difference Between LayoutTransform and RenderTransform)

最新推荐文章于 2024-08-09 11:46:42 发布

Milo米啊米啊米

最新推荐文章于 2024-08-09 11:46:42 发布

阅读量1.3k

点赞数 2

分类专栏： WPF 文章标签： LayoutTransform RenderTransform

WPF 专栏收录该内容

191 篇文章 11 订阅

订阅专栏

原文地址：https://wpf.2000things.com/2013/03/06/770-the-difference-between-a-layouttransform-and-a-rendertransform/

当要对界面元素进行2D变换的时候，你可以使用选择LayoutTransform 属性或者RenderTransform属性。

- LayoutTransform 属性是在元素布局的过程中进行变换（布局完成之前）

- RenderTransform 属性是在元素布局完成之后进行变换（渲染显示之前）

你可以选择其中一个进行变换，或者同时应用两个也可以。

<StackPanel Orientation="Horizontal">
    <StackPanel Orientation="Vertical">
        <Label Content="LayoutTransform"/>
        <Button Content="Push Me" Style="{StaticResource buttonStyle}"/>
        <Button Content="Push Me" Style="{StaticResource buttonStyle}">
            <Button.LayoutTransform>
                <RotateTransform Angle="20"/>
            </Button.LayoutTransform>
        </Button>
        <Button Content="Push Me" Style="{StaticResource buttonStyle}">
            <Button.LayoutTransform>
                <RotateTransform Angle="-20"/>
            </Button.LayoutTransform>
        </Button>
    </StackPanel>
    <StackPanel Orientation="Vertical">
        <Label Content="RenderTransform"/>
        <Button Content="Push Me" Style="{StaticResource buttonStyle}"/>
        <Button Content="Push Me" Style="{StaticResource buttonStyle}">
            <Button.RenderTransform>
                <RotateTransform Angle="20"/>
            </Button.RenderTransform>
        </Button>
        <Button Content="Push Me" Style="{StaticResource buttonStyle}">
            <Button.RenderTransform>
                <RotateTransform Angle="-20"/>
            </Button.RenderTransform>
        </Button>
    </StackPanel>
</StackPanel>

上面的代码中我们将6个按钮分成两列，第一列使用LayoutTransform 属性进行变换，第二列使用RenderTransform 属性进行变换。运行的结果如下图：

从图中可以发现，第一列是先进行变换，然后在将变换后的按钮进行布局计算，因此在StackPanel中，按钮会按照自己需要的控件排列。第二列是先布局，然再布局的结果是上对按钮进行变换，因此按钮所占的布局空间不会有变化，因此导致按钮有部分重叠。

*********************************

由于LayoutTransform 在布局计算之前进行变换计算，因此如果LayoutTransform 发生了更改，比如动画更改，就会重新引发容器进行布局计算，简单来说LayoutTransform 的每一次变化都需要进行一次重新布局，而RenderTransform却不会。RenderTransform计算是在布局计算完成之后进行，它不会因此重新布局。因此默认情况下，推荐使用RenderTransform进行变换，只有非常特殊的情况下才会使用LayoutTransform 。

还有就是，进行了变换之后控件的ActualWidth和ActualHeight属性值是不会改变的。可以理解为只是做了一个变化，并没有实际改变控件的大小。