3/21/2017 5:09 PM XAML高级教程 演讲者信息 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may.

Presentation on theme: "3/21/2017 5:09 PM XAML高级教程 演讲者信息 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may."— Presentation transcript:

1 3/21/2017 5:09 PM XAML高级教程 演讲者信息 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2 通过这一节课，可以使听众对XAML的资源和样式，绘图，图像处理和动画的基本概念有了更深的理解，掌握如何从代码层面实现。

3 1 资源&样式 2 高级绘图 3 图像处理 4 动画

4 资源&样式

5 资源 与传统WEB应用中CSS样式表类似 目的为了实现对象的重复调用 有助于XAML代码重用，有助于应用维护的一致性 定义资源的语法格式：
<根元素对象.Resources>       <资源定义 /> </根元素对象.Resources> 资源(Resources)，其概念和传统Web应用中的Cascading Style Sheets（CSS）样式表类似，其目 的为了实现对象的重复调用。 资源的概念不仅仅局限于对控件样式的定义，而且还包括对控件模板的定义，对字体的控制等。 在实际项目中，开发人员可以在资源中设置多种不同控件属性，在多个页面调用通用资源代码， 这样 不仅有助于代码重利用，同时有助于应用维护的一致性。

6 资源 <Grid>    <Grid.Resources>         <LinearGradientBrush x:Key="bgBrush" StartPoint="0.5,0" EndPoint="0.5,1">             <GradientStop Color="Yellow" Offset="0.0" />             <GradientStop Color="Blue" Offset="0.75" />             <GradientStop Color="Green" Offset="1.0" />         </LinearGradientBrush>     </Grid.Resources>       <Button>        <Button.Resources>                  ....        </Button.Resources>     </Button> …… </Grid> 每个Framework对象都支持Resources属性,也就是说，可以在不同控件或者页面定义特定的Resources, 例如，在Grid, Button定义Resources.

7 资源字典(ResourceDictionary)
<Grid x:Name="LayoutRoot">    <Grid.Resources>       <ResourceDictionary>          <LinearGradientBrush x:Key="bgBrush" StartPoint="0.5,0" EndPoint="0.5,1">            <GradientStop Color="Yellow" Offset="0.0" />            <GradientStop Color="Blue" Offset="0.75" />            <GradientStop Color="Green" Offset="1.0" />          </LinearGradientBrush>        </ResourceDictionary>        </Grid.Resources>     <Button x:Name="btnSubmit" Background="{StaticResource bgBrush}" Height="60" Width="120" Margin="112,23,168,217"/> </Grid>  在资源字典(ResourceDictionary)中，每一个资源项必须定义x:Key，也就是所谓的唯一标识的资源名称， 这样可以方便读取访问。 代码中，在Grid.Resources中定义资源x:Key = "bgBrush", 我们可以在Button中调用资源x:Key，应用资 源到控件。

8 资源字典分类 WPF应用中，XAML资源分为StaticResource和DynamicResource
Windows 8应用中，XAML资源仅支持StaticResource 资源应用域不同，XAML资源可分为FrameworkElement.Resources和 Application.Resources FrameworkElement.Resources是将资源对象应用于同一个对象树的不同对象上， 称为页面资源，通常被定义在XAML页面根元素上 Application.Resources是贯穿整个应用级别的资源，通常被定义在App.xaml页 面 在WPF开发中，XAML资源可被分为静态资源(StaticResource)和动态资源(DynamicResource)两类， 但是在Windows 8 Metro应用开发中，XAML仅支持静态资源(StaticResource)。 FrameworkElement.Resources是将资源对象应用于同一个对象树的不同对象上，也可被称为即时 资源(Immediate Resources), 或者称为页面资源(Page Resources)。通常来说， FrameworkElement.Resources会被定义在XAML页面根元素上。 Application.Resources可以被认为是贯串整个应用级别的资源，资源被定义在 Application.Resources中，相比 FrameworkElement.Resources而言，Application.Resources应 用范围较广，其生命周期也比 FrameworkElement.Resources要长。通常来说， Application.Resources会被定已在App.Xaml页面。

9 合并资源字典属性 <Application.Resources>    <ResourceDictionary>       <SolidColorBrush Color="#d " x:Key="muddyBrush"/>       <ResourceDictionary.MergedDictionaries>         <ResourceDictionary Source="rd1.xaml" />         <ResourceDictionary Source="rd2.xaml" />       </ResourceDictionary.MergedDictionaries>    </ResourceDictionary> </Application.Resources>  为了方便调用外部资源文件，资源字典(ResourceDictionary)提供了MergedDictionaries属性。 通 常来说，合并资源字典属性会被定义在Application.Resources, 也就是在App.xaml文件中。 在ResourceDictionary.MergedDictionaries中定义多个外部资源文件，其查找资源顺序时由下往上 逆行查找的。 在ResourceDictionary.MergedDictionaries中定义两个资源字典源，rd1.xaml和rd2.xaml。 如果在 两个资源文件中存在相同x:key的资源，rd2.xaml中的资源将被优先采用。 作为外部资源合并，应用本身定义的资源永远具有较高的优先级，也就是说，如果在本地资源定义中， 出现与rd1.xaml,rd2.xaml同名的资源， 本地资源都被会优先采用。

10 主题资源字典属性 <ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">         <x:String x:Key="BackButtonGlyph"></x:String>         <x:String x:Key="BackButtonSnappedGlyph"></x:String>      </ResourceDictionary>      <ResourceDictionary x:Key="HighContrast">         <x:String x:Key="BackButtonGlyph"></x:String>         <x:String x:Key="BackButtonSnappedGlyph"></x:String>      </ResourceDictionary>       <ResourceDictionary x:Key="GreenTheme">         <SolidColorBrush x:Key="MyBackgroundBrush" Color="Green"></SolidColorBrush>      </ResourceDictionary>      <ResourceDictionary x:Key="BlackTheme">         <SolidColorBrush x:Key="MyBackgroundBrush" Color="Black"></SolidColorBrush>      </ResourceDictionary> </ResourceDictionary.ThemeDictionaries> 主题资源字典(ThemeDictionaries)是一个特殊的合并资源字典。 目的是为应用提供多主题支持，提高用户体验性。 创建默认Windows 8 Metro应用时，Visual Studio 2012将自动生成主题资源代码。 与MergedDictionaries属性相比较，在使用ThemeDictionaries时，需要为每个资源定义一个x:Key.

11 资源 演示 演示内容大纲： 资源 两种资源字典 合并资源字典属性 主题资源字典属性

12 样式 属性样式 内联样式 引用样式 直接通过UI元素的属性设置的样式 通过在UI元素中嵌 入Style节点来设置 样式
定义在资源字典中 的样式 属性样式指直接通过UI元素的属性设置的样式 内联样式指通过在UI元素中嵌入Style节点来设置样式 引用样式就是定义在资源字典中的样式

13 属性样式 类似于在HTML中直接通过HTML元素属性设置的样式 适用于复用度不高的一些属性
<TextBox Text="textbox" Width="200" Height="100" Margin="40,40,40,40" HorizontalAlignment="Center" VerticalAlignment="Top" Background="AliceBlue"/> 通过属性样式为TextBox控件设置宽，高，背景色，对齐方式等样式

14 内联样式 实际上是设置元素的Style属性 若内联样式与属性样式对同一属性进行设置，以属性设置的样式为准
<TextBox Text="textbox" Width="200" Height="100“ Margin="40,40,40,40" HorizontalAlignment="Center" VerticalAlignment="Top" Background="AliceBlue"> <TextBox.Style> <Style TargetType="TextBox"> <Setter Property="BorderThickness" Value="3"/> <Setter Property="BorderBrush" Value="Brown"/> </Style> </TextBox.Style> </TextBox> 代码中，通过内联样式为Textbox设置了边框的粗细和颜色 Style节点实际对应一个style类的对象，Target属性指定该Style对象的目标类型 Style对象中可以包含多个属性设置器Setter，Property指明要设置的属性名，Value设置该属性的值

15 引用样式 资源字典可在多处定义，因此引用样式也可以在多出定义 引用样式可以分为： 页面级样式 应用程序级样式

16 页面级样式 页面级样式定义在页面的资源字典中，作用范围为整个页面
<phone:PhoneApplicationPage.Resources> <Style x:Key="pageStyle" TargetType="TextBox"> <Setter Property="FontSize" Value="40"/> </Style> <Style TargetType="TextBox"> <Setter Property="Background" Value="LightBlue"/> </phone:PhoneApplicationPage.Resources> <TextBox Name="textBox3" Text="TextBox" Style="{StaticResource pageStyle}" Width="400" Height="100" Margin="39,257,41,0" HorizontalAlignment="Center" VerticalAlignment="Top" /> <TextBox Name="textBox4" Text="TextBox" Width="400" Height="100" Margin="39,363,41,0" HorizontalAlignment="Center" VerticalAlignment="Top" /> 第一个样式指定了x:Key属性，因此该样式应用与页面中所有的Style属性设置为{StaticResource pageStyle}的TextBox，该类样式称为显示样式。 第二个样式没有指定x:Key属性，仅指定TargetType为TextBox，该样式应用与页面中所有的 TextBox，称为隐式样式。

17 应用程序级样式 与页面级样式的定义方式和应用方式相同，差别有两方面： 定义位置不同 作用范围不同
<Application.Resources> <Style TargetType="TextBox" x:Key="appStyleBase"> <Setter Property="Background" Value="LightGreen"/> </Style> <Style TargetType="TextBox" x:Key="appStyle" BasedOn="{StaticResource appStyleBase}"> <Setter Property="BorderThickness" Value="3"/> <Setter Property="BorderBrush" Value="Green"/> <Style TargetType="TextBox"> <Setter Property="FontSize" Value="40"/> </Application.Resources> 定义位置不同：应用程序级样式定义在应用程序资源字典中而非页资源字典中。 作用范围不同：应用程序级样式作用于整个应用程序而不是单个页面。

18 样式优先级 引用样式 属性样式 内联样式 高 低 页面级 应用程序级
属性样式的优先级最高，如果通过属性样式指定了元素的某一外观，则内联样式和引用样式都不能改 变它 引用样式和内联样式是互斥的。如果一个元素定义了内联样式，则就不会应用任何引用样式 对于引用样式，页面级引用样式优先级高于应用程序级别引用样式 高 低

19 样式 演示 属性样式 内联样式 引用样式

20 高级绘图

21 形状绘图 形状(Shape)是一个2D绘图类 位于System.Windows.Shape空间内 包括最常用的绘图对象 Line 直线
Rectangle 矩形 Ellipse 椭圆 Polygon 多边形 Path 路径 图形对象共有属性 Stroke：说明如何绘制图形的轮廓，即所使用的画刷 StrokeThickness：说明图形轮廓的粗细度 Fill：说明如何绘制图形的内部 指定图形的坐标位置和顶点的数据属性，以与设备无关的像素来度量

22 直线 <Line X1="200" Y1="200" X2="300" Y2="200" Stroke="Red" StrokeThickness="5"> </Line> 使用Line类可以绘制直线的起点与终点，我们知道，两点确定一条直线，只要指定直线的起点坐标和 终点坐标就可以确定一条直线。 其中X1：说明直线起点的X坐标；X2：说明直线终点的X坐标；Y1：说明直线起点的Y坐标；Y2：说 明直线终点的Y坐标。 添加了Stroke属性，把该属性设置为红色，在模拟器上看到直线的颜色变成红色。 添加了属性StrokeThickness，把该属性设置为5，在模拟器上看到直线变粗。该值的数字必须大于0。

23 修改直线形状 <Line X1="200" Y1="200" X2="300" Y2="200" Stroke="Red"
StrokeThickness="30" StrokeStartLineCap="Flat" StrokeEndLineCap="Triangle"> </Line> 代码中定义了直线的两端的形状。 Line对象提供四种形状：平坦（Flat）、圆角（Round）、正方形（Square）和三角形（Triangle）.

24 矩形 <Rectangle Width="100" Height="100" Fill="Blue" Stroke="Red" StrokeThickness="3" Margin="0,0,380,552"> </Rectangle> 代码中绘制了一个边框，该边框的边线颜色为红色，以蓝色填充，该边框的高度与宽度都为100，所 以显示出来的是正方形。 绘制矩形并不需要提供每个角的坐标值，只需要使用Width和Height 长方形和正方形都属于矩形，宽和高设置一样为正方形，不一样为长方形。

25 绘制圆角矩形 <Rectangle Width="100" Height="100" Fill="Blue" Stroke="Red" StrokeThickness="3" RadiusX="30" RadiusY="100"> </Rectangle> 设置Rectangle对象的RadiusX和RadiusY属性可以绘制圆角矩形。 可以为RadiusX和RadiusY设置相同的值，也可以设置不同的值，具体需要根据你需要的效果而配置， 但是如果RadiusX和RadiusY中有一个值为0的时候，将不能显示圆角的效果。

26 椭圆 <Ellipse Fill="Yellow" Height="100" Width="200" StrokeThickness="2" Stroke="Red"> </Ellipse> 代码绘制了一个高度为100，宽度为200，填充颜色为黄色，边线为红色的椭圆。 如果想绘制一个圆形，只需把Height与Width属性设置相同就可以了。 也可以加入Margin属性，用法与矩形的相同。

27 多边形 <Polygon Points="300, , , ,200" Stroke="Purple" Fill="Red" StrokeThickness="2"> </Polygon> 使用Polygon 类绘制一个多边形，它是由一系列直线相互连接的，形成闭合形状的图形。 代码绘制了一个区域为红色，边界为粉色的三角形，Points属性中分别设置了该三个点的坐标位置， 最后一个点的坐标对就起始点坐标。

28 多线型 <Polyline Points="120,20 300,20 300,120 200,120" Stroke="Red"
StrokeThickness="5" Fill="Orange"> </Polyline> 使用Polyline 类绘制一个多线形，它与Polygon类功能很相似，但是Polyline绘制的是一个不封闭区域， 它是由一系列直线组成的。

29 路径绘图 Path类可以绘制曲线和复杂形状 Data属性使用了mini-language,即路径标记语法
<Path Stroke="Red" StrokeThickness="3" Data="M 100,200 C 100,25 400, ,175 " />

30 路径标记语法 指定startPoint(绘图的起始点)，用M或m表示，使用M时，表示绝对值，使用m时，表示相对于前一点的便宜量 移动命令
绘制命令 一个指令集合，用来描述外形轮廓的内容，包含大部分的直线和曲线的绘图指令 关闭命令 作用是结束当前的画图，用来闭合整个Path，并在当前点和图形的起点之间画一条线段，使用字母z来表示

31 形状绘图 演示

32 几何绘图 图形绘图与几何绘图区别 图形对象可以独立存在的，可以独立绘制出具体需 要的图形，
几何图形对象没有具体的形体，它需要依赖于某一 对象元素而存在，不能直接呈现在画板上 几何绘图包括5种对象 LineGeometry：确定两点绘制一条直线 RectangleGeometry：绘制矩形的几何图形 EllipseGeometry：绘制椭圆形的几何图形 GeometryGroup：组合几何对象，将多个单一的 几何对象组合成一个几何对象 PathGeometry：路径几何对象

33 LineGeometry <Path Fill="Orange" Stroke="Red" StrokeThickness="5" Canvas.Top="20" Canvas.Left="100"> <Path.Data> <LineGeometry StartPoint="20,20" EndPoint="100,100"/> </Path.Data> </Path> 可以通过设置LineGeometry对象的StartPoint和EndPoint属性确定直线的起点与终点.

34 RectangleGeometry <Path Fill="Orange" Stroke="Red" StrokeThickness="5"> <Path.Data> <RectangleGeometry Rect="100,50,100,50"/> </Path.Data> </Path> 可以通过设置RectangleGeometry的Rect属性来定义矩形的大小，Rect属性由4个值组成，前2个表示矩 形顶点坐标，后2个表示矩形的宽度与高度.

35 EllipseGeometry <Path Fill="Orange" Stroke="Red" StrokeThickness="5"> <Path.Data> <EllipseGeometry Center="100,100" RadiusX="50"RadiusY="50"/> </Path.Data> </Path> 通过设置EllipseGeometry的Center属性来确定椭圆的中心点，同时，可以设置RadiusX和RadiusY来定 义X轴和Y轴的半径.

36 GeometryGroup <Path Fill="Orange" Stroke="Red" StrokeThickness="5"> <Path.Data> <GeometryGroup FillRule="EvenOdd"> <LineGeometry StartPoint="20,10" EndPoint="100,80" /> <EllipseGeometry Center="50,70" RadiusX="40" RadiusY="50" /> <RectangleGeometry Rect="30, " /> </GeometryGroup> </Path.Data> </Path> 可以设置 GeometryGroup 的FillRule属性来定义图形填充规则，可选值有EvenOdd和Nonzero，默 认值是EvenOdd。 GeometryGroup 对象创建它所包含的 Geometry 对象的组合体，但不合并其面积。 可以向 GeometryGroup 中添加任意数量的 Geometry 对象。

37 PathGeometry <Path Fill="Orange" Stroke="Red" StrokeThickness="5"> <Path.Data> <PathGeometry> <PathFigure StartPoint="30,50"> <LineSegment Point="300,70" /> </PathFigure> </PathGeometry> </Path.Data> </Path> 复杂的几何图形可以通过PathGeometry 对象来绘制。 它是由一系列的路径形状PathFigure组成，而每个 PathFigure 对象都可由一个或多个 PathSegment 对象组成，例如 ArcSegment 和 LineSegment，它们实际上定义了自己的形状。

38 几何绘图 演示

39 画刷 所有的UI元素都可以通过画刷的设 置而改变它们的风格 使用不同的画刷对目标区域进行 “绘制”，会有不同的效果 画刷种类：
SolidColorBrush：单色实心画刷 LinearGradientBrush：线性渐变画 刷 RadialGradientBrush：径向渐变画 刷(Windows 8应用中不支持) ImageBrush：图片画刷 屏幕上所有的UI元素都可以通过画刷的设置而改变它们的风格，例如，可以使用画刷来改变按钮的背 景、文本的前景或者图形的填充内容等。 使用不同的画刷对目标区域进行“绘制”，会有不同的效果. SolidColorBrush：单色实心画刷，使用一种颜色在目标区域或者对象中进行实心填充。 LinearGradientBrush：线性渐变画刷，指定多种颜色在目标区域或者对象中以线性渐变的方式填充。 RadialGradientBrush：径向渐变画刷，指定多种颜色在目标区域或者对象中以径向渐变的方式填充。 ImageBrush：图片画刷，使用图片对目标区域或者对象进行填充。

40 SolidColorBrush <Rectangle Width="100" Height="100">
<Rectangle.Fill> <SolidColorBrush Color="Red"> </SolidColorBrush> </Rectangle.Fill> </Rectangle> 在很多程序中，最常见，最常用的一种屏幕绘制操作就是使用纯色绘制目标区域。 SolidColorBrush类可以实现该功能。

41 LinearGradientBrush <Rectangle Width="300" Height="200">
<Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> LinearGradientBrush 类按直线方向渐变绘制区域，即使用沿一条直线（即"渐变轴"）定义的渐变来 绘制区域。 可以修改渐变轴，这样能够创建水平和垂直渐变并反转渐变方向。 LinearGradientBrush类的StartPoint和EndPoint与绘制区域有关，(0,0)代表目标区域的左上角， (1,0)代表目标区域的右上角，(0,1)代表目标区域的左下角，(1,1)代表目标区域的右下角。 在代码中我们设置的是一个在目标区域中从左上角开始延伸到右下角的对角线渐变。 GradientStop是渐变画笔的基本构造元素。 渐变停止点指定渐变轴上 Offset 处的 Color 渐变停止点的 Color 属性为渐变停止点的颜色。可以使用预定义的颜色来设置颜色，也可以通过指定 scRGB 或十六进制 ARGB 值来设置颜色。 渐变停止点的 Offset 属性为渐变停止点的颜色在渐变轴上的偏移位置。偏移量范围从 0 至 1 的 Double 值。如果渐变停止点的偏移量值越接近 0，则颜色越接近渐变起点。如果渐变停止点的偏移 量值越接近 1，颜色越接近渐变终点。 渐变停止点之间每个点的颜色按两个边界渐变停止点指定的颜色组合执行线性内插。下图突出显示了 上一示例中的渐变停止点。圆圈标记渐变停止点的位置，虚线显示渐变轴。

42 ImageBrush <Rectangle Width="200" Height="100">
<Rectangle.Fill> <ImageBrush ImageSource="Rose.jpg" Stretch="None"> </ImageBrush> </Rectangle.Fill> </Rectangle> ImageBrush 类使用图像用作图形的填充、背景和轮廓。 使用方法比较简单， ImageBrush 使用由 ImageSource 属性指定的 JPEG 或 PNG 图像来绘制区域。 使用要加载的图像的路径来设置 ImageSource 属性。 默认情况下，ImageBrush 会将填充图像拉伸以完全充满要填充的目标区域，如果填充的区域和该图 像的长宽比不同，则可能会扭曲该图像。 可以通过将 Stretch 属性从默认值 Fill 更改为 None、Uniform 或 UniformToFill 来更改此行为。

43 画刷 演示

44 图像处理

45 创建图像 可以使用Image或者ImageBrush对象来创建一幅图像 Image元素默认情况下会完整显示图片大小
<Grid x:Name="ContentGrid"> <Image Source="Rose.jpg" /> </Grid> 添加一个Image类，把Image的Source属性值设置为“Image/a.jpg”，指向刚才添加的图像文件路 径 Image元素默认情况下会完整显示图的大小，可以指定Width或Height属性修改图片的大小，Image 元素根据Width或Height之一的尺寸来等比缩放图像

46 图像简单处理 通过设置Clip 属 性裁切图像 ImageBrush元 素实现使用图像 输入文字
拉伸图像 裁切图像 使用图像输入文字 通过设置Stretch 属性实现图像的 拉伸 通过设置Clip 属 性裁切图像 ImageBrush元 素实现使用图像 输入文字

47 拉伸图像 Image元素的Stretch属性值类型为枚举型 属性值分别为: 原始尺寸(None) 填充拉伸(Fill)
等比拉伸(Uniform) 等比拉伸填充(UniformToFill) Fill None <Grid x:Name="ContentGrid" Grid.Row="1"> <Image Source= "Rose.jpg" Width="500" Height="500" Stretch="None"/> </Grid> Uniform UniformToFill

48 裁切图像 <Grid x:Name="ContentGrid" Grid.Row="1">
<Image Source= "Rose.jpg" Width="500" Height="500"> <Image.Clip> <RectangleGeometry Rect="50,50 240,240"/> </Image.Clip> </Image> </Grid> 通过使用 Clip 属性裁切掉图像输出的某个区域来裁切图像

49 使用图像输入文字 <Grid x:Name="ContentGrid" Grid.Row="1">
<TextBlock FontSize="150" FontStyle="Italic" FontWeight="Bold"> Lenna <TextBlock.Foreground> <ImageBrush ImageSource="Rose.jpg" /> </TextBlock.Foreground> </TextBlock> </Grid> 使用ImageBrush对图像进行处理，作为文本的背景图片

50 透明特效 <Grid x:Name="ContentGrid" Grid.Row="1">
<Image Source="Rose.jpg" Width="500" Height="500" Opacity="0.5" /> </Grid> 透明特效（Opacity）属性的作用是改变可见元素的透明度 透明度的值为0，显示内容是完全透明 透明度的值为1，显示内容是完全不透明 透明度的值为0.5，显示内容是半透明

51 图像处理 演示

52 动画

53 故事板 Storyboard(故事板)是动画的基本单元 Storyboard控制动画的播放，暂停，停止等操作
需要指定TargetName和TargetProperty属性 动画类型声明过之后，需要使用EventTrigger(事件触发器)触发 <Storyboard x:Name="storyboard1"> <DoubleAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Opacity“ From="1.0" To="0.0" Duration="0:0:5"/> </Storyboard> Storyboard(故事板)是动画的基本单元，它用来分配动画时间，可以使用同一个故事板对象产生一种 或多种动画效果，并允许控制动画的播放，暂停，停止以及任何时间播放 使用故事板时，需要指定TargetName和TargetProperty属性，这两个属性把故事板和所要产生的动 画效果连接起来。

54 事件触发器 通过事件触发器播放BeginStoryboard故事板的动画效果
<Canvas Background="White"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard x:Name="storyboard1"> <DoubleAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:5"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="ellipse1" Fill="GreenYellow" Width="150" Height="200"/> </Canvas> 代码中声明了一个Canvas.Triggers（触发器），然后声明RoutedEvent（事件通道）为 Canvas.Loaded（当Canvas加载完成后触发的事件），EventTrigger.Actions（事件行为）包含了 BeginStoryboard，用来开始播放故事板的动画对象。 简而言之，就是当xaml的画布加载完成后就立刻播放故事板包含的动画

55 托管代码触发动画播放 public MainPage() { this.InitializeComponent();
XAML: <Page.Resources> <Storyboard x:Name="storyboard1"> <DoubleAnimation Storyboard.TargetName="ellipse1“ Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:5"/> </Storyboard> </Page.Resources> <Canvas Background="White"> <Ellipse x:Name="ellipse1" Fill="GreenYellow" Width="150" Height="200"/> </Canvas> C#: public MainPage() { this.InitializeComponent(); //使用Begin方法播放动画 storyboard1.Begin(); } 除了在XAML代码中使用EventTrigger播放动画外，还可以将故事板包括在Resources（资源元素）内， 在托管代码中引用故事版x:Name，然后使用Begin方法来播放动画

56 线性插值动画 DoubleAnimation ColorAnimation 属于Double类型的属性都可以使用它产生线性插值动画效果
DoubleAnimation：属于Double类型的属性都可以使用它产生线性插值动画效果，是最常用的线性 插值动画，例如：作用于Ellipse元素的Opacity属性 ColorAnimation：可作用于属性为Color类型对象的线性插值动画，用于改变对象的填充颜色,例如： 作用于支持Fill属性的元素

57 线性插值动画对象属性 名称 描述 From 动画从 From 属性指定的值继续到正在进行动画处理的属性的基值或前一动画的输出值，具体取决于前一动画的配置方式。 To 动画从进行动画处理的属性的基值或前一动画的输出值继续到 To 属性指定的值。 By 动画从正在进行动画处理的属性的基值或前一动画的输出值继续到该值与 By 属性指定的值之和。 Duration 动画执行一次持续的时间长度，Duration的格式为时：分：秒 线性插值动画也称为From/To/By动画，是最基本的动画对象，From/To/By动画可以理解为”开始值/结 束值/偏移量”的动画

58 动画播放控制属性 名称 描述 BeginTime RepeatBehavior AutoReverse SpeedRatio
动画开始时间。默认的单位是天，也可以指定为时：分：秒 RepeatBehavior 用来声明动画重复次数，支持3种类型值：重复次数（格式--次数+X）;一个时间段（格式—时：分：秒）；特殊值Forever（代表无限循环） AutoReverse 指定动画结束后是否向后继续播放，默认只为false，若设置为true，动画结束时会回到起始位置 SpeedRatio 用来增加或减少动画的速度，默认值为1，若增加它，动画产生加速播放的效果 FillBehavior 决定什么时候发生动画，什么时候结束。默认值为HoldEnd，表示动画结束后保持当前值不变，也可以设置为Stop，表示动画结束时属性再次回到起始值

59 DoubleAnimation动画I <Canvas Background="White">
<Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard x:Name="storyboard1"> <!--动画作用于RotateTransform.Angle属性值--> <DoubleAnimation Storyboard.TargetName="rec" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" From="0" To="360" Duration="0:0:2" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Canvas.Triggers> 使用DoubleAnimation制作一个图形旋转效果 代码中作用的属性是UIElement.RenderTransform（也就是<Rectangle.RenderTransform>）的 TransformGroup.Children属性，组合变形中包括四个变形元素分别是<ScaleTransform/>(0)、 <SkewTransform/>（1）、<RotateTransform/>（2）、<TranslateTransform/>（3），因此 TransformGroup.Children)[2]4的是RotateTransform属性，RotateTransform.Angle表示作用目标 是Angle属性 From，To属性声明了矩形的角度动画由0开始，到360度结束，RepeatBehavior设置为Forever，使 得矩形中图形一直旋转下去。 这样就通过不断改变RotateTransform对象的角度实现了旋转动画效果。

60 DoubleAnimation动画II <!--创建用来选择的矩形-->
<Rectangle x:Name="rec" Height="300" Width="300" Canvas.Left="100" Canvas.Top="100" RenderTransformOrigin="0.5,0.5"> <Rectangle.Fill> <ImageBrush ImageSource="Rose.jpg"/> </Rectangle.Fill> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> </Canvas>

61 ColorAnimation动画 <Page.Resources>
<Storyboard x:Name="storyboard1"> <ColorAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" From="Red" To="Green" Duration="0:0:2"> </ColorAnimation> </Storyboard> </Page.Resources> <Canvas Background="Black"> <Ellipse x:Name="ellipse1" Width="200" Height="200" Fill="Red" Canvas.Left="100" Canvas.Top="80" Stroke="Blue" StrokeThickness="5" /> </Canvas> 需要使对象产生Color变化动画效果，就可以使用ColorAnimation动画。 代码实现了椭圆的填充颜色从红色变换到绿色。 “(Ellipse.Fill).(SolidColorBrush.Color)”属性值表示Ellipse对象的Fill属性填充的Brush集合中 SolidColorBrush。

62 ColorAnimation动画

63 线性插值动画 演示

64 关键帧动画 关键帧动画根据目标属性值之间的差异产生各种动画效果 一个关键帧动画可以在任意多个的目标属性值之间进行渐变
关键帧动画可以产生更多，更复杂的动画效果

65 关键帧动画元素 DoubleAnimationUsingKeyFrames ColorAnimationUsingKeyFrames

66 DoubleAnimationUsingKeyFrames动画
Storyboard.TargetName="Scenario2KeyFrameRectangle" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:3"> <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="50" /> <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="100" /> <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="200" /> <EasingDoubleKeyFrame KeyTime="0:0:3" Value="300" /> </DoubleAnimationUsingKeyFrames> <Canvas Width="400" Height="100" Margin="0,20,0,0"> <Rectangle Name="Scenario2KeyFrameRectangle" Width="100" Height="100" Fill="Indigo" /> </Canvas> 该动画是使用关键帧动画将Scenario2KeyFrameRectangle的Canvas.Left的值从50变换到300，实现移 动效果。

67 ColorAnimationUsingKeyFrames动画
EnableDependentAnimation="true" Storyboard.TargetName="Scenario2KeyFrameRectangle" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)“ Duration="0:0:3"> <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="Red" /> <DiscreteColorKeyFrame KeyTime="0:0:1" Value="Orange" /> <DiscreteColorKeyFrame KeyTime="0:0:2" Value="Blue" /> <EasingColorKeyFrame KeyTime="0:0:3" Value="Green" /> </ColorAnimationUsingKeyFrames> <Canvas Width="400" Height="100" Margin="0,20,0,0"> <Rectangle Name="Scenario2KeyFrameRectangle" Width="100" Height="100" Fill="Indigo" /> </Canvas> ColorAnimationUsingKeyFrames关键帧类型是用来操作Color类型属性的变化，通过对Color值得 改变使作用目标产生色调上的变化。 代码中使用关键帧插值法，将Scenario2KeyFrameRectangle填充颜色进行变化，实现动画效果 为了能够执行这个动画，需要将EnableDependentAnimation属性设置为true TargetProperty指定了“(Rectangle.Fill).(SolidColorBrush.Color)属性，代表动画作用目标是 Rectangle元素的Fill属性，并且使用SolidColorBrush画刷来填充它。

68 关键帧动画 演示 参考Animation项目（SDK示例）

69 总结 资源的使用 三种样式：属性、内联、引用 绘图：图形绘图、几何绘图 图像：拉伸、裁剪、特效 动画：线性插值动画、关键帧动画

70 资源 ResourceDictionary and StaticResource references
Styling and Templating Drawing shapes Image and ImageBrush Animation Overview Windows 8 Sample Code 《Programming Windows Sixth Edition》 《Programming Windows Phone 7》 windows-phone-ct

71 Q&A © 2011 Microsoft Corporation。保留所有权利。Microsoft、Windows、Windows Vista 及其他产品名称是或者可能是在美国和/或其他国家/地区的注册商标和/或商标。 此处包含的信息仅供参考，并代表 Microsoft Corporation 截至本演示文稿发布之日的最新观点。由于 Microsoft 必须响应不断变化的市场条件，所以不应将本文视为 Microsoft 一方的承诺，Microsoft Corporation 也无法保证所提供信息在本文发布之后的准确性。MICROSOFT 对本演示文稿中包含的信息不做任何明示、暗示或法定的担保。

72 © 2011 Microsoft Corporation。保留所有权利。Microsoft、Windows、Windows Vista 及其他产品名称是或者可能是在美国和/或其他国家/地区的注册商标和/或商标。 此处包含的信息仅供参考，并代表 Microsoft Corporation 截至本演示文稿发布之日的最新观点。由于 Microsoft 必须响应不断变化的市场条件，所以不应将本文视为 Microsoft 一方的承诺，Microsoft Corporation 也无法保证所提供信息在本文发布之后的准确性。MICROSOFT 对本演示文稿中包含的信息不做任何明示、暗示或法定的担保。