Silverlight位图效果Effect学习笔记

今天学习了Silverlight中Effect.下面是我总结的。直接贴代码了

（1）前台代码

 <UserControl.Resources>
<Style x:Name="buttonBlurEffectStyle" TargetType="Button">
<Style.Setters>
<Setter Property="Effect">
<Setter.Value>
<BlurEffect Radius="3"/>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Style x:Name="buttonDropShadowEffectStyle" TargetType="Button">
<Style.Setters>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="Yellow" Direction="100" ShadowDepth="25" BlurRadius="20" Opacity="0.3"/>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Storyboard x:Name="myBlurEffectStoryboard">
<!-- Blur the Button and then animate back to normal. -->
<DoubleAnimation
Storyboard.TargetName="myBlurBitmapEffect"
             Storyboard.TargetProperty="Radius"
             From="0" To="40" Duration="0:0:0.3"
             AutoReverse="True" />
</Storyboard>

<Storyboard x:Name="myDropShadowEffectStoryboard">
<!-- Animate shadow depth of the effect. -->
<DoubleAnimation
Storyboard.TargetName="myDropShadowEffect"
           Storyboard.TargetProperty="ShadowDepth"
           To="30" Duration="0:0:0.5"
           AutoReverse="True" />
<!-- Animate shadow BlurRadius of the effect. As 
               the Button appears to get farther from the shadow,  
               the shadow blurs. -->
<DoubleAnimation
Storyboard.TargetName="myDropShadowEffect"
           Storyboard.TargetProperty="BlurRadius"
           To="10" Duration="0:0:0.5"
           AutoReverse="True" />
<!-- Animate ScaleX of button. -->
<DoubleAnimation
Storyboard.TargetName="myScaleTransform"
           Storyboard.TargetProperty="ScaleX"
           To="1.5" Duration="0:0:0.5"
           AutoReverse="True" />
<!-- Animate ScaleY of button. -->
<DoubleAnimation
Storyboard.TargetName="myScaleTransform"
           Storyboard.TargetProperty="ScaleY"
           To="1.5" Duration="0:0:0.5"
           AutoReverse="True" />
<!-- Move button in the X direction. -->
<DoubleAnimation
Storyboard.TargetName="myTranslateTransform"
           Storyboard.TargetProperty="X"
           To="-30" Duration="0:0:0.5"
           AutoReverse="True" />
<!-- Move button in the Y direction. -->
<DoubleAnimation
Storyboard.TargetName="myTranslateTransform"
           Storyboard.TargetProperty="Y"
           To="-30" Duration="0:0:0.5"
           AutoReverse="True" />
</Storyboard>


</UserControl.Resources>
<!--
               (一) Effect为所有位图效果提供基类,下面几个类型都继承自Effect
               （1） BlurEffec类创建模糊效果
                     Radius属性：获取或设置 BlurEffect 应用的模糊量
               （2） DropShadowEffect类创建投影效果
                     Opacity属性：获取或设置阴影的不透明度
                     ShadowDepth:获取或设置对象与其投影间的距离
                     BlurRadius属性:阴影的模糊程度
                     Color:获取或设置阴影的颜色              
                (3)ShaderEffect类通过使用 PixelShader 提供自定义位图效果。
                      PixelShader提供围绕高级着色语言 (HLSL) 像素着色器的托管包装。
              （二）注意点
                （1）无法同时将 BlurEffect 和 DropShadowEffect 直接应用于同一元素
                （2）效果应用于大型可视对象或对效果的属性进行动画处理时，性能的降低程度最大（谨慎并进行充分的测试，以保证您的用户获得的体验和您预期的一样）
-->
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<!--BlurEffect 创建模糊效果-->
<Button Content="You Can't Read This" Width="200">              
<Button.Effect>
<BlurEffect Radius="10" />                     
</Button.Effect>
</Button>
<Button Style="{StaticResource buttonBlurEffectStyle}"  Content="应用Effect Style到按钮上"></Button>
<Button x:Name="btnBlurEffect"   Content="点击按钮产生模糊效果"></Button>
<Button x:Name="btnBlurEffectAnimation"   Content="点击按钮产生动画模糊效果">
<Button.Effect>
<BlurEffect x:Name="myBlurBitmapEffect"/>
</Button.Effect>
</Button>

<!--DropShadowEffect 创建投影效果-->
<Button Content="投影效果" Width="200">
<Button.Effect>
<DropShadowEffect Color="Red" Direction="320" ShadowDepth="25" BlurRadius="10" Opacity="0.5"></DropShadowEffect>
</Button.Effect>
</Button>
<Button Style="{StaticResource buttonDropShadowEffectStyle}"  Content="应用Effect Style到按钮上"></Button>
<Button x:Name="btnnDropShadowEffect"   Content="点击按钮产生投影效果"></Button>
<Button x:Name="btnnDropShadowEffectAnimation"   Content="点击按钮产生动画投影效果">
<Button.Effect>
<DropShadowEffect x:Name="myDropShadowEffect" />
</Button.Effect>
<Button.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="myTranslateTransform" />
<ScaleTransform x:Name="myScaleTransform" />
</TransformGroup>
</Button.RenderTransform>
</Button>
</StackPanel>
</Grid>

（2）后台代码

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
//添加命名空间
using System.Windows.Media.Effects;

namespace SLEffectDemo
{
public partial class MainPage : UserControl
    {
public MainPage()
        {
            InitializeComponent();
this.btnBlurEffect.Click += new RoutedEventHandler(btnBlurEffect_Click);
this.btnBlurEffectAnimation.Click += new RoutedEventHandler(btnBlurEffectAnimation_Click);
this.btnnDropShadowEffect.Click += new RoutedEventHandler(btnnDropShadowEffect_Click);
this.btnnDropShadowEffectAnimation.Click += new RoutedEventHandler(btnnDropShadowEffectAnimation_Click);


        }

void btnBlurEffect_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;
if (btn.Effect != null)
            {
                btn.Effect = null;
            }
else
            {
                BlurEffect blurEffect = new BlurEffect();
                blurEffect.Radius = 5;
                btn.Effect = blurEffect;

            }
        }
void btnBlurEffectAnimation_Click(object sender, RoutedEventArgs e)
        {
this.myBlurEffectStoryboard.Begin();
        }


void btnnDropShadowEffect_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;
if (btn.Effect != null)
            {
                btn.Effect = null;
            }
else
            {
                Color color=new Color();
                color.A=255;
                color.B=50;
                color.R=50;
                color.G=50;
                DropShadowEffect dropShadowEffect = new DropShadowEffect();
                dropShadowEffect.Color = color;
                dropShadowEffect.Direction = 800;
                dropShadowEffect.ShadowDepth = 25;
                dropShadowEffect.BlurRadius = 6;
                dropShadowEffect.Opacity = 0.5;
                btn.Effect = dropShadowEffect;

            }
        }

void btnnDropShadowEffectAnimation_Click(object sender, RoutedEventArgs e)
        {
            myDropShadowEffectStoryboard.Begin();
        }
    }
}

源代码下载