Silverlight开发历程—模糊特效与投影特效

BlurEffect模糊特效

BlurEffect模糊特效，它可以产生类似相机的调整焦距的效果，根据属性值的不同可以产生不同的Blur效果常用属性为Radius，下面的例子，是对一个UI的模糊：

XAML：

 <UserControl.Resources>
        <Storyboard x:Name="animBlur">
            <DoubleAnimation Storyboard.TargetName="blur" Storyboard.TargetProperty="Radius" From="0" To="15" Duration="00:00:01" />
        </Storyboard>
        <Storyboard x:Name="animOld">
            <DoubleAnimation Storyboard.TargetName="blur" Storyboard.TargetProperty="Radius" From="15" To="0" Duration="00:00:01" />
        </Storyboard>
    </UserControl.Resources>
    <StackPanel x:Name="LayoutRoot" Background="White">
        <StackPanel.Effect>
            <BlurEffect x:Name="blur" Radius="0" />
        </StackPanel.Effect>
        <TextBlock Text="BlurEffect 动画特效" FontSize="22"  Margin="5"/>
        <Image Stretch="None"  Source="../images/flower.jpg" Margin="10"></Image>
        <Button Width="120" Height="30" FontSize="15" Content="播放Blur动画" Click="Button_Click" />
    </StackPanel>

C#：

 private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (blur.Radius == 0)
            {
                animBlur.Begin();
            }
            else
            {
                animOld.Begin();
            }
        }

运行结果：

 

DropShadowEffect 投影特效

投影特效，可以根据不同属性设置偏移量来产生一种灯光投影的效果，可以设置阴影的距离、透明度、投射角度。

常用属性如下：

Color：设置投影的颜色，默认为（黑色）

BlurRadius：控制元素边缘的模糊程度，默认为5

Direction：控制投影的投射方向，范围在0~360之间。

Opacity：控件边缘的透明度。

ShadowDepth：控制投影平面与元素平面的距离，属性值的范围在0~300.

下面来看一个制做投影 的例子：

<Grid x:Name="LayoutRoot" Background="White">
        <TextBlock Text="DropShadowEffect 阴影文字" FontFamily="Arial Black" FontSize="50" Margin="10" FontWeight="Bold">
            <TextBlock.Effect>
                <DropShadowEffect Color="Black" Opacity="0.8" BlurRadius="10" ShadowDepth="15" />
            </TextBlock.Effect>
        </TextBlock>
    </Grid>

运行结果：

利用投影效果 制作发光字：

<Grid x:Name="LayoutRoot" Background="Black">
        <TextBlock Text="DropShadowEffect 阴影文字"  Foreground="White" FontFamily="Arial Black" FontSize="50" Margin="10" FontWeight="Bold">
            <TextBlock.Effect>
                <DropShadowEffect Color="Yellow" Opacity="0.8" BlurRadius="10" ShadowDepth="15" />
            </TextBlock.Effect>
        </TextBlock>
    </Grid>

运行结果：