WPF中呈现变形与布局变形的区别

引例

文章一开始，先给出下图所示的画面布局。

 

图1 画面布局设计图

画面被分割成4行4列16个单元格，在1行2列的位置放置一个TextBlock控件并将其背景色设置为淡蓝色。 

对应的XAML代码为：

<Window x:Class="WpfTransformExp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="400" Width="400">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Text="Transform" Grid.Column="1" Grid.Row="0" Background="Aqua">       
        </TextBlock>
    </Grid>
</Window>

呈现变形（RenderTransform）

下面对画面中的TextBlock控件执行RenderTransform操作，需要为TextBlock控件的RenderTransform属性进行赋值：

<TextBlock Text="Transform" Grid.Column="1" Grid.Row="0" Background="Aqua">
   <TextBlock.RenderTransform>
      <RotateTransform Angle="90"/>
   </TextBlock.RenderTransform>
</TextBlock>

代码中为TextBlock控件的RenderTransform属性赋值RotateTransform，RotateTransform表示旋转变形，以给定的点为旋转中心，以给定的角度为单位进行旋转。这里为RotateTransform的Angle属性赋值为90，表示以TextBlock控件左上角为旋转中心顺时针方向旋转90度，得到下图所示效果图。

 

图2 呈现变形效果图

 

布局变形（LayoutTransform）

下面再对画面中的TextBlock控件执行LayoutTransform操作，需要为TextBlock控件的LayoutTransform属性进行赋值：

<TextBlock Text="Transform" Grid.Column="1" Grid.Row="0" Background="Aqua">
   <TextBlock.LayoutTransform>
       <RotateTransform Angle="90"/>
   </TextBlock.LayoutTransform>
</TextBlock>

代码中同样为TextBlock控件的RenderTransform属性赋值RotateTransform对象，RotateTransform对象的Angle属性同样被赋值为90，表示以TextBlock控件左上角为旋转中心顺时针方向旋转90度，得到下图所示效果图。

 

图3 布局变形效果图

 

呈现变形与布局变形的区别

对比呈现变形与布局变形的效果图，可以发现：

两种变形均能达到让TextBlock控件顺时针方向旋转90度的效果。只是变形后，TextBlock控件的呈现位置不一样，使用呈现变形后的TextBlock控件位于1行1列的位置，这与以TextBlock控件左上角为旋转中心将控件顺时针方向旋转90度后所处的位置一致，而使用布局变形后的TextBlock控件却仍然位于1行2列的位置。这是因为：呈现变形只改变元素的呈现效果，并不会改变画面的布局；而布局变形不仅可以改变画面的呈现效果，还会影响画面的布局。所以，本例中的TextBlock控件使用布局变形后，不仅能够顺时针方向旋转90度，还能够被重新定位至1行2列的位置。在这个过程中需要重新测算和绘制画面，所以，使用布局变形时会影响系统性能。

 

补充

本文中呈现变形和布局变形都被赋值为RotateTransform，除了可以被赋值为RotateTransform外，还可以使用下列选项进行赋值：

• MatrixTransform：矩阵变形，把容纳被变形UI元素的矩形顶点看做一个矩阵进行变形。
• ScaleTransform：坐标系变形，调整被变形元素的坐标系，可产生缩放效果。
• SkewTransform：拉伸变形，可在横向和纵向上对被变形元素进行拉伸。
• TranslateTransform：偏移变形，使被变形元素在横向和纵向上偏移一个给定的值。
• TransformGroup：变形组，可以把多个独立变形合成为一个变形组，产生复合变形的效果。

这些类均派生自Transform抽象类。