致敬最美逆行者,英雄一路走好,好好学习,回报祖国 . . .
不出意外,这是《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了而已,效果如下:
.