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>

运行结果：