致敬最美逆行者，英雄一路走好，好好学习，回报祖国 . . .
不出意外，这是《WPF核心知识》系列文章的倒数第三篇文章 . . .
通过对《深入浅出WPF》书籍的阅读，我学到了许多的知识，在此感谢刘老师 . . .
我为什么把每篇博客称为 “飞天入地" 呢？ 一来是我真的很喜欢这门技术，二来我真的很喜欢这六技术 . . .
此篇博文主要讲解图形的效果与变形，比如为：
- 图形进行添加 —— 模糊、阴影效果
- 对图形进行位移、旋转等效果
WPF的出现可谓是我们的福音，因为像模糊、阴影、位移、旋转这样的效果，我们只需要改变几个属性的值就行了，而不需要使用 Photoshop这样的专业设计工具 . . .
下面我们来讲一讲文章提到的四种效果怎么用吧 . . .
.
在UIElement类的成员中有两个属性： BitmapEffect 和 Effect这两个属性，这两个属性都可以为UI元素添加效果，那为什么有两个属性呢？因为早期的是 BitmapEffect，是用CPU的运算能力为 UI元素添加效果，这样会造成程序的性能降低，所以后来添加了 Effect这个属性，它使用GPU的运算能力为 UI元素添加效果 . . .
此文章只讲述 Effect的简单使用，BitmapEffect已经被淘汰了，但大家可以查阅文档进行测试 . . .
.
图形的效果
Effect 类有三个派生类，它们是：
- BlurEffect：模糊效果
- DropShadowEffect：投影效果
- ShaderEffect：着色器效果（抽象类）
我们可以对 ShaderEffect类进行开发，可以为图形添加各种滤镜效果，此文不会讲解 . . .
下面我们来使用前两个派生类，来为 UI元素添加效果吧 . . .
阴影效果：
<Button Width="160" Height="50" Content="Hello">
<Button.Effect>
<DropShadowEffect Direction="-45" Opacity="0.5" Color="Red"
ShadowDepth="10"/>
</Button.Effect>
</Button>我们设置了DropShadowEffect 效果的属性是：
- Direction：阴影方向
- Opacity：不透明度
- ShadowDepth：阴影深度
效果如下图所示：
.
模糊效果：
<Button Grid.Row="1" Width="160" Height="50" Content="Hello">
<Button.Effect>
<BlurEffect Radius="10" KernelType="Gaussian"/>
</Button.Effect>
</Button>我们设置了BlurEffect 效果的属性是：
- Radius：模糊效果曲线的半径
- KernelType：计算模糊的曲线的值
效果如下图所示：
.
图形的变形
控制变形的属性有两个，分别是：
- RenderTransform：呈现变形
- LayoutTransform：布局变形
它们分别派生自 UIElement、FrameworkElement类，所以在控件级别两个属性你都能看到 . . .
它们的数据类型都是 Transform抽象类，我们可以用 Transform 类的派生类用于为这两个属性。
ransform 抽象类的派生类有如下一些：
- MatrixTransform：矩阵变形
- RotateTransform：旋转变形
- ScaleTransform：座标系变形
- SkewTransform：拉伸变形
- TranslateTransform：偏移变形
- TransformGroup：变形组（多个独立变形放在一起）
.
呈现变形（RenderTransform）
质变本不变，不影响界面的布局效果 . . .
下面让我们实例来体验一下这种变形方式吧 . . .
我们使用 RenderTransform来使 Button旋转并移动到指定位置，注意观察界面的布局：
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Width="80" HorizontalAlignment="Left" VerticalAlignment="Top" Height="80"
Content="Hello">
<Button.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="40" CenterY="40" Angle="45"/>
<TranslateTransform X="300" Y="200"/>
</TransformGroup>
</Button.RenderTransform>
</Button>这个XAML代码，首先我们对界面进行了布局，第一行第一列的大小为默认大小，然后 Button按钮被默认放在其中，之后我们对 Button进行旋转 + 位移变形，效果如下：
我们在这个界面布局中发现，第一行第一列还是 这个 Button的大小，这就是 RenderTransform，质变本不变，这种做可以提高程序的效率，因为一但使界面布局发生了变化，各种算法都会重新计算 . . .
.
布局变形
因为对布局的变形会影响到程序的性能，所以我们一般只用在静态变形中，而不用于制作动画（下一篇博文会讲） . . .
我们来实现一个文字纵向排列的浅蓝色标题栏 . . .
方便我们更好的学习，我们使用 呈现变形，代码如下：
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="titleBar" Background="LightBlue">
<TextBlock Text="Hello Transformer!" FontSize="24"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90"/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>效果如下：
和上面的那个例子一样，本身并没有发生变化 . . .
.
因为我们需要的是静态改变 TextBlock的布局，所以我们应该使用 LayoutTransform，我们只需要改变其中的一处就行：
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="titleBar" Background="LightBlue">
<TextBlock Text="Hello Transformer!" FontSize="24"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</Grid>我们只是把 RenderTransform 改成了 LayoutTransform了而已，效果如下：
.