WPF中 BitmapEffect 和 Effect 的区别

一、前言

​ WPF 使用 BitmapEffect 和 Effect 可以实现阴影、发光、通道、动态模糊等效果，还可以像为 Photoshop 开发滤镜一样开发效果类库。在UIElement 类的成员中拥有BitmapEffect 和 Effect 两个属性，这是因为WPF最早的版本中只有BitmapEffect 属性，这个属性使用CPU的运算能力为UI元素添加效果，这样做的问题是效果一多或者让带有效果的UI元素参与动画，程序的性能就会因CPU资源被大量占用而大幅降低（要么响应变慢，要么刷新或动画变得很卡）。在随后的版本中，微软决定转用显卡GPU的运算能力为UI元素添加效果，于是添加了Effect属性。

二、BitmapEffect

BitmapEffect抽象类的派生类包括如下：

1. BevelBitmapEffect：斜角效果
2. BlurBitmapEffect：模糊效果
3. DropShadowBitmapEffect：阴影效果
4. EmbossBitmapEffect：浮雕效果
5. OuterGlowBitmapEffect：外发光效果
6. 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>