SkewTransform表示倾斜某个对象，它有两个方向的倾斜角度可以设置，AngleX表示设置x 轴倾斜角度，该角度是从 y 轴逆时针旋转后测量得到，单位为度。AngleY表示设置y 轴倾斜角度，该角度通过测量从 x 轴逆时针旋转得到的角度度数。另外，它也有CenterX和CenterY，表示倾斜转换中心的xy坐标。

public sealed class SkewTransform : Transform
{
   public static readonly DependencyProperty AngleXProperty;
   public static readonly DependencyProperty AngleYProperty;
   public static readonly DependencyProperty CenterXProperty;
   public static readonly DependencyProperty CenterYProperty;

   public SkewTransform();
   public SkewTransform(double angleX, double angleY);
   public SkewTransform(double angleX, double angleY, double centerX, double centerY);

   public double AngleX { get; set; }
   public double AngleY { get; set; }
   public double CenterX { get; set; }
   public double CenterY { get; set; }
   public override Matrix Value { get; }

   public SkewTransform Clone();
   public SkewTransform CloneCurrentValue();

}

一、SkewTransform示例

注意：SkewTransform 可以在XY平面中为一个对象创建 3 维深度的错觉。下面我们通过一个示例，合理的调节X和Y方面的倾斜度，就可以模拟出3维变换的错觉。

前端代码

<Window x:Class="HelloWorld.MainWindow"
        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"
        xmlns:local="clr-namespace:HelloWorld" 
        xmlns:controls="clr-namespace:HelloWorld.Controls"
        xmlns:helper="clr-namespace:HelloWorld.MVVM"
        mc:Ignorable="d" Background="Lavender"   
        MouseMove="Window_MouseMove"
        Title="WPF中文网 - www.wpfsoft.com" Height="350" Width="500">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" 
                Width="120" 
                Height="120" 
                Background="LightBlue"
                HorizontalAlignment="Center" 
                VerticalAlignment="Center">
            <Border.RenderTransform>
                <SkewTransform CenterX="0" CenterY="0"
                               AngleX="{Binding ElementName=sliderX,Path=Value}"
                               AngleY="{Binding ElementName=sliderY,Path=Value}"/>
            </Border.RenderTransform>
        </Border>       
        
        <Button x:Name="button" 
                Grid.Column="1" 
                Background="LightBlue"
                Width="120" 
                Height="120" 
                Content="SkewTransform倾斜" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center">
            <Button.RenderTransform>
                <SkewTransform CenterX="60" CenterY="60"
                               AngleX="{Binding ElementName=sliderX,Path=Value}"
                               AngleY="{Binding ElementName=sliderY,Path=Value}"/>
            </Button.RenderTransform>
        </Button>
        <Slider x:Name="sliderX" 
                Grid.ColumnSpan="3" 
                Margin="40 25 20 15" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Bottom" 
                Value="0" 
                Maximum="180" 
                Width="400" />
        <Slider x:Name="sliderY" 
                Orientation="Vertical"
                Grid.ColumnSpan="3" 
                Margin="20" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Bottom" 
                Value="0" 
                Maximum="180" 
                Height="300" />
    </Grid>
</Window>

接下来F5运行，拖动slider，使用XY两个方向进行倾斜。

注意右边的对象，我们将转换的坐标设置到对象的中心点，这样在拖动X轴slider时，就会呈现出3维变换的效果。

当前课程源码下载：（注明：本站所有源代码请按标题搜索）

文件名：091-《SkewTransform倾斜》-源代码
链接：https://pan.baidu.com/s/1yu-q4tUtl0poLVgmcMfgBA
提取码：wpff

——重庆教主 2023年11月02日