Silverlight之Styles和Behaviors

本文简介

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.获得更多的支持)

到这里本文的讲解就结束了，希望大家多提意见和建议，欢迎多多交流。