C#开发学习笔记:WPF Transform

转载自:https://www.cnblogs.com/songwq/p/3893328.html

WPF Transform

坐标变换的类有5个： （粗体字是它的属性）

1. RotateTransform：旋转变换，围绕一个中心（CenterX, CenterY）旋转一个角度Angle。

2. TranslateTransform：位移变换，在x，y方向分别移动一个位移。位移大小分别是设置的X,Y。

3. ScaleTransform：缩放变换，围绕一个中心（CenterX, CenterY）在x,y方向进行比例缩放，缩放比例为ScaleX, ScaleY。

4. SkewTransform：倾斜变换，围绕一个中心（CenterX, CenterY）在x,y方向倾斜一个角度AngleX,AngleY。

5. MatrixTransform：矩阵变换，以上4种变换组合都可以通过矩阵变换来实现。

 

下面是关于坐标变换的一个小demo。

 

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Transform.MainWindow"
        Title="MainWindow" Height="350" Width="625">
    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Height" Value="30" />
            <Setter Property="Width" Value="150" />
        </Style>
        
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Width" Value="80" />
        </Style>

        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Margin" Value="10,0" />
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <GroupBox Header="RanderTransform" VerticalAlignment="Top">
                <StackPanel>
                    <Button Content="RotateTransform" Panel.ZIndex="1" RenderTransformOrigin="{Binding Text, ElementName=RenderTransformOrigin}">
                        <Button.RenderTransform>
                            <RotateTransform Angle="{Binding Text, ElementName=RotateAngle}" CenterX="{Binding Text, ElementName=RotateCenterX}"
                                CenterY="{Binding Text, ElementName=RotateCenterY}"/>
                        </Button.RenderTransform>
                    </Button>
                    <Button Content="TranslateTransform" RenderTransformOrigin="{Binding Text, ElementName=RenderTransformOrigin}">
                        <Button.RenderTransform>
                            <TranslateTransform X="{Binding Text, ElementName=TranslateX}" Y="{Binding Text, ElementName=TranslateY}" />
                        </Button.RenderTransform>
                    </Button>
                    <Button Content="ScaleTransform" RenderTransformOrigin="{Binding Text, ElementName=RenderTransformOrigin}">
                        <Button.RenderTransform>
                            <ScaleTransform  ScaleX="{Binding Text, ElementName=ScaleX}" ScaleY="{Binding Text, ElementName=ScaleY}"
                                CenterX="{Binding Text, ElementName=ScaleCenterX}"
                                CenterY="{Binding Text, ElementName=ScaleCenterY}"/>
                        </Button.RenderTransform>
                    </Button>
                    <Button Content="SkewTransform" RenderTransformOrigin="{Binding Text, ElementName=RenderTransformOrigin}">
                        <Button.RenderTransform>
                            <SkewTransform  AngleX="{Binding Text, ElementName=SkewAngleX}" AngleY="{Binding Text, ElementName=SkewAngleY}"/>
                        </Button.RenderTransform>
                    </Button>

                    <Button Content="MatrixTransform" RenderTransformOrigin="{Binding Text, ElementName=RenderTransformOrigin}">
                        <Button.RenderTransform>
                            <MatrixTransform Matrix="{Binding Text, ElementName=Matrix}"/>
                        </Button.RenderTransform>
                    </Button>
                </StackPanel>
            </GroupBox>

            <GroupBox Header="LayoutTransform" VerticalAlignment="Top">
                <StackPanel>
                    <Button Content="RotateTransform">
                        <Button.LayoutTransform>
                            <RotateTransform Angle="{Binding Text, ElementName=RotateAngle}" CenterX="{Binding Text, ElementName=RotateCenterX}"
                                CenterY="{Binding Text, ElementName=RotateCenterY}"/>
                        </Button.LayoutTransform>
                    </Button>
                    <Button Content="TranslateTransform">
                        <Button.LayoutTransform>
                            <TranslateTransform X="{Binding Text, ElementName=TranslateX}" Y="{Binding Text, ElementName=TranslateY}" />
                        </Button.LayoutTransform>
                    </Button>
                    <Button Content="ScaleTransform">
                        <Button.LayoutTransform>
                            <ScaleTransform  ScaleX="{Binding Text, ElementName=ScaleX}" ScaleY="{Binding Text, ElementName=ScaleY}"
                                CenterX="{Binding Text, ElementName=ScaleCenterX}"
                                CenterY="{Binding Text, ElementName=ScaleCenterY}"/>
                        </Button.LayoutTransform>
                    </Button>
                    <Button Content="SkewTransform">
                        <Button.LayoutTransform>
                            <SkewTransform  AngleX="{Binding Text, ElementName=SkewAngleX}" AngleY="{Binding Text, ElementName=SkewAngleY}"/>
                        </Button.LayoutTransform>
                    </Button>

                    <Button Content="MatrixTransform">
                        <Button.LayoutTransform>
                            <MatrixTransform Matrix="{Binding Text, ElementName=Matrix}"/>
                        </Button.LayoutTransform>
                    </Button>
                </StackPanel>
            </GroupBox>
        </StackPanel>

        <GroupBox Grid.Row="1" Header="RanderTransform Origin">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" SharedSizeGroup="NameColumeSize"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Text="RenderTransformOrigin" />
                <TextBox Grid.Row="0" Grid.Column="1" x:Name="RenderTransformOrigin" Text="0,0"/>
            </Grid>
        </GroupBox>

        <GroupBox Grid.Row="2" Header="Matrix Properties">
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="NameColumeSize"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Text="Matrix" />
                <TextBox Grid.Row="0" Grid.Column="1" x:Name="Matrix" Text="1,0,0,1,0,0"/>
            </Grid>
        </GroupBox>

        <Grid Grid.Column="1" Grid.RowSpan="4" Margin="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" SharedSizeGroup="NameColumeSize"/>
                <ColumnDefinition SharedSizeGroup="ValueColumeSize"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />                
                <RowDefinition />

                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="RotateAngle" />
            <TextBox Grid.Row="0" Grid.Column="1" x:Name="RotateAngle" Text="0"/>
            <TextBlock Grid.Row="1" Grid.Column="0" Text="RotateCenterX" />
            <TextBox Grid.Row="1" Grid.Column="1" x:Name="RotateCenterX" Text="0"/>
            <TextBlock Grid.Row="2" Grid.Column="0" Text="RotateCenterY" />
            <TextBox Grid.Row="2" Grid.Column="1" x:Name="RotateCenterY" Text="0"/>
            <TextBlock Grid.Row="3" Grid.Column="0" Text="TranslateX" />
            <TextBox Grid.Row="3" Grid.Column="1" x:Name="TranslateX" Text="0"/>
            <TextBlock Grid.Row="4" Grid.Column="0" Text="TranslateY" />
            <TextBox Grid.Row="4" Grid.Column="1" x:Name="TranslateY" Text="0"/>
            <TextBlock Grid.Row="5" Grid.Column="0" Text="ScaleX" />
            <TextBox Grid.Row="5" Grid.Column="1" x:Name="ScaleX" Text="1"/>
            <TextBlock Grid.Row="6" Grid.Column="0" Text="ScaleY" />
            <TextBox Grid.Row="6" Grid.Column="1" x:Name="ScaleY" Text="1"/>
            <TextBlock Grid.Row="7" Grid.Column="0" Text="ScaleCenterX" />
            <TextBox Grid.Row="7" Grid.Column="1" x:Name="ScaleCenterX" Text="0"/>
            <TextBlock Grid.Row="8" Grid.Column="0" Text="ScaleCenterY" />
            <TextBox Grid.Row="8" Grid.Column="1" x:Name="ScaleCenterY" Text="0"/>
            <TextBlock Grid.Row="9" Grid.Column="0" Text="SkewAngleX" />
            <TextBox Grid.Row="9" Grid.Column="1" x:Name="SkewAngleX" Text="0"/>
            <TextBlock Grid.Row="10" Grid.Column="0" Text="SkewAngleY" />
            <TextBox Grid.Row="10" Grid.Column="1" x:Name="SkewAngleY" Text="0"/>
        </Grid>
        
    </Grid>
    
</Window>