一、前言
? WPF 使用 BitmapEffect 和 Effect 可以实现阴影、发光、通道、动态模糊等效果,还可以像为 Photoshop 开发滤镜一样开发效果类库。在UIElement 类的成员中拥有BitmapEffect 和 Effect 两个属性,这是因为WPF最早的版本中只有BitmapEffect 属性,这个属性使用CPU的运算能力为UI元素添加效果,这样做的问题是效果一多或者让带有效果的UI元素参与动画,程序的性能就会因CPU资源被大量占用而大幅降低(要么响应变慢,要么刷新或动画变得很卡)。在随后的版本中,微软决定转用显卡GPU的运算能力为UI元素添加效果,于是添加了Effect属性。
二、BitmapEffect
BitmapEffect抽象类的派生类包括如下:
- BevelBitmapEffect:斜角效果
- BlurBitmapEffect:模糊效果
- DropShadowBitmapEffect:阴影效果
- EmbossBitmapEffect:浮雕效果
- OuterGlowBitmapEffect:外发光效果
- BitmapEffectGroup:复合效果(可以把多个BitmapEffect组合在一起)
注意:BevelBitmapEffect、DropShadowBitmapEffect从3.5就过时了,而.Net4.0以后BevelBitmapEffect可以编译通过,但不会有效果。
<!--阴影效果-->
<Border Background="DimGray" Margin="50" CornerRadius="10">
<Border.BitmapEffect>
<BevelBitmapEffect BevelWidth="20"
EdgeProfile="CurvedIn"
LightAngle="330"
Relief="0.4"
Smoothness="0.5"></BevelBitmapEffect>
</Border.BitmapEffect>
</Border>
<!--模糊效果-->
<Border Background="DimGray" Margin="50" CornerRadius="10">
<Border.BitmapEffect>
<BlurBitmapEffect Radius="5" KernelType="Gaussian"></BlurBitmapEffect>
</Border.BitmapEffect>
</Border>
<!--投影效果-->
<Border Background="DimGray" Margin="50" CornerRadius="10">
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Red" ShadowDepth="25" Direction="-45" Noise="1" Opacity="0.75"></DropShadowBitmapEffect>
</Border.BitmapEffect>
</Border>
<!--浮雕效果-->
<Border Background="DimGray" Margin="50" CornerRadius="10">
<Border.BitmapEffect>
<EmbossBitmapEffect></EmbossBitmapEffect>
</Border.BitmapEffect>
</Border>
<!--外发光效果-->
<Border Background="DimGray" Margin="50" CornerRadius="10">
<Border.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="Brown" GlowSize="10" Noise="1" Opacity="0.75"></OuterGlowBitmapEffect>
</Border.BitmapEffect>
</Border>
<!--复合效果(可以把多个BitmapEffect组合在一起)-->
<Border Background="DimGray" Margin="50" CornerRadius="10">
<Border.BitmapEffect>
<BitmapEffectGroup>
<BlurBitmapEffect Radius="5" KernelType="Gaussian"></BlurBitmapEffect>
<BevelBitmapEffect BevelWidth="20" EdgeProfile="CurvedIn" LightAngle="330" Relief="0.4" Smoothness="0.5"></BevelBitmapEffect>
</BitmapEffectGroup>
</Border.BitmapEffect>
</Border>
三、Effect
Effect的抽象类的派生类如下:
BlurEffect:模糊效果
DropShadowEffect:阴影效果
ShaderEffect:着色器效果(抽象类)
官方的滤镜效果下载地址:https://archive.codeplex.com/?p=wpffx
<!--模糊效果-->
<Border Background="DimGray" Margin="50" CornerRadius="10">
<Border.Effect>
<BlurEffect KernelType="Gaussian" Radius="10"></BlurEffect>
</Border.Effect>
</Border>
<!--投影效果-->
<Border Background="DimGray" Margin="50" CornerRadius="10">
<Border.Effect>
<DropShadowEffect Color="PaleVioletRed" BlurRadius="15" Direction="-45" ShadowDepth="15" Opacity="0.75"></DropShadowEffect>
</Border.Effect>
</Border>