WPF 基础 - 图形的效果与滤镜

UIElement 有 BitmapEffect 和 Effect 属性，BitmapEffect 是由 CPU 的运算能力实现的，比较耗性能，推荐使用 Effect；
Effect 包括但不限于 DropShadowEffect 投影效果、BlurEffect 模糊效果。

1. 圆的投影效果及阴影动画

<Ellipse Width="100" Height="100" Stroke="#FFBBDDDD">
    <Ellipse.Fill>
        <RadialGradientBrush GradientOrigin="0.2, 0.5" RadiusX="0.5" RadiusY="0.5">
            <RadialGradientBrush.RelativeTransform>
                <TransformGroup>
                    <RotateTransform CenterX="0" CenterY="0" Angle="30"/>
                </TransformGroup>
            </RadialGradientBrush.RelativeTransform>
            <GradientStop Color="#FF225555" Offset="0"/>       
            <GradientStop Color="#FFCCEEEE" Offset="1"/>
        </RadialGradientBrush>
    </Ellipse.Fill>
    
    <Ellipse.Effect>
        <DropShadowEffect Direction="-45" Opacity="0.5" ShadowDepth="7"/>
    </Ellipse.Effect>
    
    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Effect.Direction"
                                     Duration="0:0:4" To="360" From="0" RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Ellipse.Triggers>
</Ellipse>

动画效果：

2. 模糊效果及动画

<Ellipse Width="100" Height="100" Stroke="#FFBBDDDD" Margin="10 0 0 0">
    <Ellipse.Fill>
        <RadialGradientBrush GradientOrigin="0.2, 0.5" RadiusX="0.5" RadiusY="0.5">
            <RadialGradientBrush.RelativeTransform>
                <TransformGroup>
                    <RotateTransform CenterX="0" CenterY="0" Angle="30"/>
                </TransformGroup>
            </RadialGradientBrush.RelativeTransform>
            <GradientStop Color="#FF225555" Offset="0"/>                 
            <GradientStop Color="#FFCCEEEE" Offset="1"/>
        </RadialGradientBrush>
    </Ellipse.Fill>
                
    <Ellipse.Effect>
        <BlurEffect Radius="0" KernelType="Gaussian" RenderingBias="Performance"/>
    </Ellipse.Effect>

    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Effect.Radius"
                                     Duration="0:0:3" To="10" From="0" RepeatBehavior="Forever" AutoReverse="True"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Ellipse.Triggers>
</Ellipse>

动画效果：