本文简介
1.定义简单的Style
2.应用Style到元素
3.动态加载Style资源文件
4.Style的继承
5.组织内编写Style(在元素内)
6.自动应用Style到指定类型元素
7.Style绑定表达式
8.Behaviors的准备工作
9.创建Actions
10.在元素(Element)上使用Action
11.创建TargetedTriggerAction.
12.创建Behaviors
13.一些微软提供的Actions，Triggers，Behaviors
1.定义简单的Style
<UserControl.Resources>
<Style x:Key="redButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="FontFamily" Value="宋体"></Setter>
<Setter Property="FontSize" Value="14"></Setter>
</Style>
</UserControl.Resources>
Silverlight和css是完全不同的，通过Style标签定义，一个Style必须指定TargetType(应用的元素的类型，当前是Button按钮)，x:Key不是必须，当然如果你想让样式应用到所有指定类型的元素上，可以忽略x:Key,此处我们指定了Key，则要显示的使用。
2.是用Style到元素
<Button Content="14号字体按钮" Style="{StaticResource redButtonStyle}"></Button>
代码同样很简单，只需指定Stlye属性即可，属性值为静态资源中德redButtonStyle，即上述定义的样式。
3.动态加载Style资源文件
右键Silverlight程序添加一个Dictionary文件即可，结构如下：
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> </ResourceDictionary>
只有一个ResourceDictionary节点作为根节点，我们可以在里边添加很多个Style，如下：
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="redButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Red"></Setter>
</Style>
<Style x:Key="greenButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Red"></Setter>
</Style>
</ResourceDictionary>
Style的语法和上例子中的一样，不再赘述。定义好了资源文件，我们要进行动态加载，加载的地方就是StartUp，如下：
ResourceDictionary testReourceDictionary = new ResourceDictionary();
testReourceDictionary.Source = new Uri("Dictionary1.xaml",UriKind.Relative);
Application.Current.Resources.MergedDictionaries.Add(testReourceDictionary);
定义一个ResourceDictionary对象，设置属性Source为一个Uri，最终添加到Application.Current.Resources.MergedDictionaries，这样就可以在程序中的任意页面访问Key为"redButtonStyle"和"greenButtonStyle"了，使用方法和上述一致。
注意：此处必须注意，如果要动态加载资源文件，那么资源文件的输出类型(Output Type)必须为内容(Content)，默认为页面(Page)，所以此处要进行修改。
4.Style的继承
有时候我们可能会重复写一些样式，此时可以将公共的部分提取出来作为一个BaseStyle，然后再添加一些继承其的Style。
<Style x:Key="baseButtonStyle" TargetType="Button">
<Setter Property="FontSize" Value="12"></Setter>
<Setter Property="Foreground" Value="Yellow"></Setter>
</Style>
<Style x:Key="redButtonStyle" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}">
<Setter Property="Background" Value="Red"></Setter>
</Style>
<Style x:Key="greenButtonStyle" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}">
<Setter Property="Background" Value="Red"></Setter>
</Style>
注意：如果基样式的属性子样式中不存在，则会出现错误。
5.组织内编写Style(在元素内)
<Button Content="A Customized Button">
<Button.Style>
<Style TargetType="Button">
<Setter Property="FontFamily" Value="Georgia" />
<Setter Property="FontSize" Value="40" />
<Setter Property="Foreground" Value="White" />
</Style>
</Button.Style>
</Button>
之前的例子都是将Style作为资源进行编写和访问，那样便于资源在多个地方进行使用，如果将Style写在元素的Style标签内，则Style只在本元素内有效，同时其优先级也最高。
6.自动应用Style到指定类型元素
我们之前的代码中Style都指定了Key，当我们希望所有的TargetType都应用样式的时候，忽略Key属性即可实现：
<Style TargetType="Button">
<Setter Property="FontSize" Value="14"></Setter>
<Setter Property="Foreground" Value="Gray"></Setter>
<Setter Property="Margin" Value="10"></Setter>
</Style>
上述Style并没有指定Key，同时指定了TargetType为Button，那么所有的Button都将使用样式。
7.Style绑定表达式
首先，可以在静态资源中使用使用表达式引用一个静态资源：
<UserControl.Resources>
<FontFamily x:Key="buttonFontFamily">Georgia</FontFamily>
<sys:Double x:Key="buttonFontSize">18</sys:Double>
<FontWeight x:Key="buttonFontWeight">Bold</FontWeight>
<Style x:Key="BigButtonStyle1" TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource buttonFontFamily}" />
<Setter Property="FontSize" Value="{StaticResource buttonFontSize}" />
<Setter Property="FontWeight" Value="{StaticResource buttonFontWeight}" />
</Style>
</UserControl.Resources>
其次，也可以定义为类方式访问，如下：
public class FontInfo
{
public FontFamily FontFamily { get; set; }
public double FontSize { get; set; }
public FontWeight FontWeight { get; set; }
}
<UserControl.Resources>
<local:FontInfo x:Key="buttonFont" FontFamily="Georgia" FontSize="18" FontWeight="Bold"></local:FontInfo>
<Style x:Key="BigButtonStyle2" TargetType="Button">
<Setter Property="Padding" Value="20" />
<Setter Property="Margin" Value="10" />
<Setter Property="FontFamily" Value="{Binding Source={StaticResource buttonFont}, Path=FontFamily}" />
<Setter Property="FontSize" Value="{Binding Source={StaticResource buttonFont}, Path=FontSize}" />
<Setter Property="FontWeight" Value="{Binding Source={StaticResource buttonFont}, Path=FontWeight}" />
</Style>
</UserControl.Resource
8.Behaviors的准备工作
我们使用Style可以改变UI元素的一些外观，但是往往我们不仅仅如此的进行基本的设置。比如，缩放，拖动等功能，这样的代码复杂度要比业务代码复杂的多，当然它们也是通用的，所以这时候我们可以使用Behavior，将代码进行封装多处使用。
准备前奏，很遗憾的告诉大家Behavior本身是不存在Silverlight SDK中的，所以我们是无法直接创建它的，它的初衷是在Blend中，供设计时候使用，当然不代表我们无法在Silverlight中进行Behavior的开发。
步骤如下：
（1）下载Blend for Silverlight(下载)
（2）安装Blend for Silverlight
（3）早目录"c:\Program Files\Microsoft SDKs\Expression\Blend\Silverlight\v5.0\Libraries"下找到System.Windows.Interactivity.dll(提供Behavior功能的类库)，Microsoft.Expression.Interactions.dll(包含了扩展的一些Behaviors)
到这里准备工作完毕。
9.创建Actions
Action继承自TriggerAction<T>，通常情况下T为FrameworkElement(支持VisualTreeHelper操作)。接下来我们实现一个点击按钮播放音频的功能，首先新建一个Action如下：
[DefaultTrigger(typeof(ButtonBase), typeof(i.EventTrigger), new object[] { "Click" })]
[DefaultTrigger(typeof(Shape), typeof(i.EventTrigger), new object[] { "MouseEnter" })]
[DefaultTrigger(typeof(UIElement), typeof(i.EventTrigger), new object[] { "MouseLeftButtonDown" })]
public class PlaySoundAction : TriggerAction<FrameworkElement>
{
public static readonly DependencyProperty SourceProperty =DependencyProperty.Register("Source", typeof(Uri),typeof(PlaySoundAction), new PropertyMetadata(null));
public Uri Source
{
get { return (Uri)GetValue(PlaySoundAction.SourceProperty); }
set { SetValue(PlaySoundAction.SourceProperty, value); }
}
protected override void Invoke(object parameter)
{
Panel container = FindContainer();
if (container != null)
{
MediaElement media = new MediaElement();
media.Source = this.Source;
media.MediaEnded += delegate
{
container.Children.Remove(media);
};
media.MediaFailed += delegate
{
container.Children.Remove(media);
};
media.AutoPlay = true;
container.Children.Add(media);
}
}
private Panel FindContainer()
{
FrameworkElement element = this.AssociatedObject;
while (element != null)
{
if (element is Panel) return (Panel)element;
element = VisualTreeHelper.GetParent(element) as FrameworkElement;
}
return null;
}
}
在类中添加了一个Uri类型的属性，用于设置MediaElement(该控件用于播放音频和视频，详情可查看MSDN)，同时重写了TriggerAction<T>的Invoke，因为只要触发了Action，则会执行Invoke。在Invoke中我们创建了一个MediaElement并且将其放到页面的元素中，并开始播放。FindContainer方法用于找到当前页面的Panel容器(当前页面的为Grid，因为Grid的基类为Panel)，在Invoke中将ModiaElement添加到查找到的Panel中。
注：使用TriggerAction.AssociatedObject来得到整个UIElement。可以看到我们给PlaySoundAction添加了几个DefaultTrigger这样的特性，解释下这几个参数，第一个就是指定的UIElement的类型，第二个当然也就是我们的事件触发器类型，第三个就是默认的事件了，可以看到第三个参数是一个数组的类型，当然也就是说可以给一个UIElement指定多个默认事件。
10.在元素(Element)上使用Action
新建一个UserControl，代码如下，添加Interactivity命名空间引用i，以及当前程序的命名空间引用local
<UserControl x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:local="clr-namespace:SilverlightApplication2"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="Click to play audio">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<local:PlaySoundAction Source="潘裕文-夏雨诗.mp3"></local:PlaySoundAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
</UserControl>
在按钮中添加了Triggers并且指定事件为Click，然后使用了我们的PlaySoundAction，同时指定了Source为一个媒体文件(必须注意，必须将文件的Output Type也就是输出类型选择为Resource资源，这样才可以访问的到)。现在运行程序是不是就可以听到优美的歌声了呢。
11.创建TargetedTriggerAction
在上边的例子中我们使用TriggerAction.AssociatedObject来得到整个UIElement，然后使用VisualTreeHelper得到其父容器。一些Action可以通过检索父容器来得到一些信息，但是有些Action需要获得不同的UIElement(可以通过一个UIElement调用一个Action来影响另一个Element)，这时候就没法再使用TriggerAction这个类型，好在Silverlight中提供了TargetedTriggerAction类，这个类提供了Target属性，当然这个属性是需要在XAML中指定的TargetName属性(可以为使用者Element或者其他的UIElement的Name)，下面看一个完整的例子,这个例子的功能就是将一个UIElement的Opacity使用动画的方式来修改(目标值为1)。
/// <summary>
/// 使Opacity渐变到0
/// </summary>
public class FadeOutAction : TargetedTriggerAction<UIElement>
{
public static readonly DependencyProperty DurationProperty =
DependencyProperty.Register("Duration", typeof(TimeSpan),
typeof(FadeOutAction), new PropertyMetadata(TimeSpan.FromSeconds()));
public TimeSpan Duration
{
get { return (TimeSpan)GetValue(FadeOutAction.DurationProperty); }
set { SetValue(FadeOutAction.DurationProperty, value); }
}
private Storyboard fadeStoryboard = new Storyboard();
private DoubleAnimation fadeAnimation = new DoubleAnimation();
public FadeOutAction()
{
}
protected override void Invoke(object args)
{
fadeStoryboard.Stop(); Storyboard.SetTarget(fadeAnimation, this.Target);
Storyboard.SetTargetProperty(fadeAnimation, new PropertyPath("Opacity")); fadeAnimation.To = ;
fadeAnimation.Duration = Duration;
fadeStoryboard.Begin();
}
}
/// <summary>
/// 使Opacity渐变到1
/// </summary>
public class FadeInAction : TargetedTriggerAction<UIElement>
{
// The default fade in is 0.5 seconds.
public static readonly DependencyProperty DurationProperty =
DependencyProperty.Register("Duration", typeof(TimeSpan),
typeof(FadeInAction), new PropertyMetadata(TimeSpan.FromSeconds(0.5)));
public TimeSpan Duration
{
get { return (TimeSpan)GetValue(FadeInAction.DurationProperty); }
set { SetValue(FadeInAction.DurationProperty, value); }
}
private Storyboard fadeStoryboard = new Storyboard();
private DoubleAnimation fadeAnimation = new DoubleAnimation();
public FadeInAction()
{
fadeStoryboard.Children.Add(fadeAnimation);
}
protected override void Invoke(object args)
{
fadeStoryboard.Stop();
Storyboard.SetTarget(fadeAnimation, this.Target);
Storyboard.SetTargetProperty(fadeAnimation, new PropertyPath("Opacity"));
fadeAnimation.To = ;
fadeAnimation.Duration = Duration;
fadeStoryboard.Begin();
}
}
首先需要定义一个附加属性DurationProperty表示动画的时间，同时定义一系列动画需要的StoryBoard和Animation;
其次，重写Invoke方法，在这个方法中最重要的一句代码就是 Storyboard.SetTarget(fadeAnimation,this.Target);
其中的this.Target就是TargetedTriggerAction和TriggerAction的最大区别(TargetedTriggerAction继承自TriggerAction类)，这个属性就是要进行操作的目标对象。
Xaml代码如下：
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="3,15">
<Button Content="Click to Fade the TextBlock" Padding="5">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<local:FadeOutAction TargetName="border" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="Click to Show the TextBlock" Padding="5">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<local:FadeInAction TargetName="border" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<Border x:Name="border" Background="Orange" BorderBrush="Black" BorderThickness="1" Margin="3,0" >
<TextBlock Margin="5" FontSize="17" TextWrapping="Wrap" Text="I'm the target of the FadeOutAction and FadeInAction."></TextBlock>
</Border>
</StackPanel>
和上个例子中没有太多变化，唯一区别就是TargetName的设置，通过设置TargetName为Border，这样在Action中的this.Target就可以得到要操作的对象。运行例子，点击
第一个按钮文本则会逐渐消失，点击第二个按钮则会逐渐显示。
注：两个类分别用于Opacity的相反效果。
12.创建Behaviors
大家经常会把Action形容为Behavior，Action单独是无法进行使用的，需要结合Trigger才能使元素进行操作。Behavior的目标是让XAML的代码更加的精简，或者说Behavior 其实是组合了Action和Trigger，XAML无需Code即可实现操作，同时Behavior可以实现代码的通用性。
选择Action还是选择Behavior？如果您试图创建共享数据的操作或交互，或者需要你的行为和具体行为之间的紧密耦合，你应该考虑实现自己的功能一个行为。
创建一个Behavior如下(用于实现拖拽元素到Canvas)：
自定义的Behavior的基类为Behaviror<T>，其中需要重写OnAttachmented和OnDetaching，触发前者的时候可以操作应用Behavior的元素并且可以给其添加事件；在后者事件触发的时候可以做清理工作以及对元素进行事件的移除。
public class DragInCanvasBehavior : Behavior<UIElement>
{
private Canvas canvas; protected override void OnAttached()
{
base.OnAttached();
this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown;
this.AssociatedObject.MouseMove += AssociatedObject_MouseMove;
this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;
} protected override void OnDetaching()
{
base.OnDetaching();
this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown;
this.AssociatedObject.MouseMove -= AssociatedObject_MouseMove;
this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_MouseLeftButtonUp;
} // 元素是否正在被拖拽
private bool isDragging = false;
// 记录下元素的鼠标原始位置
private Point mouseOffset; private void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
// 查找到Canvas
if (canvas == null) canvas = VisualTreeHelper.GetParent(this.AssociatedObject) as Canvas;
// 标识正在拖拽
isDragging = true;
// 得到鼠标位置
mouseOffset = e.GetPosition(AssociatedObject);
// 设置当前操作的鼠标位置为该元素
AssociatedObject.CaptureMouse();
} private void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
{
if (isDragging)
{
// 鼠标移动中，动态得到位置
Point point = e.GetPosition(canvas);
// 修改元素的坐标位置
AssociatedObject.SetValue(Canvas.TopProperty, point.Y - mouseOffset.Y);
AssociatedObject.SetValue(Canvas.LeftProperty, point.X - mouseOffset.X);
}
} private void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
if (isDragging)
{
//释放鼠标
AssociatedObject.ReleaseMouseCapture();
//标识为未拖拽
isDragging = false;
}
}
}
XAML使用如下：
<Canvas>
<Rectangle Canvas.Left="10" Canvas.Top="10" Fill="Yellow" Width="40" Height="60">
</Rectangle>
<Ellipse Canvas.Left="10" Canvas.Top="70" Fill="Blue" Width="80" Height="60">
<i:Interaction.Behaviors>
<local:DragInCanvasBehavior></local:DragInCanvasBehavior>
</i:Interaction.Behaviors>
</Ellipse>
<Ellipse Canvas.Left="80" Canvas.Top="70" Fill="OrangeRed" Width="40" Height="70">
<i:Interaction.Behaviors>
<local:DragInCanvasBehavior></local:DragInCanvasBehavior>
</i:Interaction.Behaviors>
</Ellipse>
</Canvas>
一共三个图形，其中Rectangle没有使用Behavior，所以它是不能够拖动的，而另外两个Ellipse指定了Behaviros则可以实现拖动的效果，好了赶紧运行的代码见证神奇的一刻。
13.一些微软提供的Actions，Triggers，Behaviors
上述我们都是自己在做一些Action和Behavior，当然微软已经提供了一些比较实用的类库(他们都藏在Microsoft.Expression.Interactions.dll中)，详细如下：
Action:
ChangePropertyAction, GoToStateAction, HyperlinkAction, RemoveElementAction
Triggers:
KeyTrigger,TimerTrigger ,StoryboardCompletedTrigger
Behaviors:
MouseDragElementBehavior,FluidMoveBehavior
具体的使用方法，大家可以参考MSDN解释。(可以访问http://expressionblend.codeplex.com ,http://gallery.expression.microsoft.com.获得更多的支持)
到这里本文的讲解就结束了，希望大家多提意见和建议，欢迎多多交流。