Downloaded 17 times
![Thanks [email_address]](https://image.slidesharecdn.com/xaml-tutorial-by-allan-1203495856517628-2/75/Xaml-Tutorial-By-Allan-38-2048.jpg)
Uploaded byCat Chen
Xaml Tutorial By Allan
本文件介绍了 XAML（可扩展应用程序标记语言）的基础知识，包括如何使用它绘制图形和界面、进行图形变换和创建动画。文中通过具体示例解释了 XAML 元素的使用，包括画布、图形、笔刷、文本和媒体元素。最后，探讨了通过事件触发器创建动画效果的机制，展示了如何利用 XAML 制作复杂的动画。
Xaml Tutorial By Allan
- 1.
- 2. 主要内容 XAML 简介 使用 XAML 绘制图形和界面 使用 XAML 进行图形变换 使用 XAML 创建动画
- 3.
- 4. XAML = e X tensible A pplication M arkup L anguage 可扩展应用程序标记语言
- 5. XAML 最主要的作用 Designer Developer
- 6.
- 7. XAML 示例 Forexample: <Canvas xmlns="..." xmlns:x="..."> <Rectangle Width="200" Height="150" Fill=“White" /> <Ellipse Width="200" Height="150" Stroke="Orange" /> </Canvas>
- 8. XAML : 由 Tags 构建而成 可以直接使用 Tags 进行图形的绘制 Tags 表现为单独元素 (Rectangle…) 或容器类元素 (Canvas…) XAML 的 tags 中 , 除了描述图形 , 也有其它功能性 tags (Storyboard/Trigger…)
- 9. XAML 基础标签Canvas 画布 Brushes 笔刷 基础图形 :Rectangle,Ellipse,Line,Polygon,etc. TextBlock 文本框 Image 图像 Layout Color Shape Content Media
- 10. Canvas (1)For example: <Canvas Width="250" Height="200" Background="#FF747474"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Black" /> </Canvas> Canvas 是容器的一种 , 其它图形可以在 Canvas 下绘制 Canvas 下的子元素拥有相对定位属性 The Canvas The Rectangle
- 11. Canvas (2)<Canvas xmlns="..." xmlns:x="..."> <Rectangle Width="200" Height="150" Fill="Black" /> <Ellipse Width="200" Height="150" Stroke="Orange" /> </Canvas> Canvas 是 XAML 文档的根元素 (Silverlight)
- 12. Canvas (3)相对定位相对于第一个父级 Canvas <Canvas xmlns="..." xmlns:x="..." Background="LightGray"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Black" /> <Canvas Canvas.Top="25" Canvas.Left="25" Width="150" Height="100" Background="Orange"> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="150" Height="75" Fill="Red" /> </Canvas> </Canvas>
- 13. 图形 (Shape) <Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path />
- 14. Brushes (1 ) 用于声明对象的 填充 / 描边方式 对于 形 来说 , 可以设定其填充方式 对于 线 来说 , 可以设定其描边方式 Brushes 支持 单色填充 (Solid) , 渐变填充 , 及 图像填充
- 15. Brushes (2 ) <SolidColorBrush /> 支持使用 141 种颜色名称 (e.g. Blue, Red, Green) 支持 #FFFFFF 或 #FFFFFFFF 的 16 进制表示方法 <Rectangle Width="200" Height="150" > <Rectangle.Fill> <SolidColorBrush Color="Black" /> </Rectangle.Fill> </Rectangle> <Rectangle Width="200" Height="150" Fill="Black" /> <Rectangle Width="200" Height="150" Fill="#FFFFFF" />
- 16. Brushes (3 ) <LinearGradientBrush /> 通过 Start 和 Stop 属性 , 以数值形式设定渐变的起始点位置与角度 每一个 Gradient Stops 点可以设置渐变点的不同颜色 <Rectangle Width="200" Height="150" > <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <LinearGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>
- 17. Brushes (4 ) <RadialGradientBrush /> 与线性渐变语法一致 <Rectangle Width="200" Height="150" > <Rectangle.Fill> <RadialGradientBrush> <RadialGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Rectangle.Fill> </Rectangle>
- 18. Brushes (5 ) <ImageBrush /> <Ellipse Width="200" Height="75" > <Ellipse.Fill> <ImageBrush ImageSource="Assets/members.jpg" /> </Ellipse.Fill> </Ellipse>
- 19. 使用文本 <TextBlock /><TextBlock>Hello</TextBlock> Hello <TextBlock FontSize="18">Hello</TextBlock> Hello <TextBlock FontFamily="Courier New">Hello</TextBlock> Hello <TextBlock TextWrapping="Wrap" Width="100"> Hello there, how are you? </TextBlock> Hello there, how are you? <TextBlock> Hello there,<LineBreak/>how are you? </TextBlock> Hello there, how are you?
- 20. 使用图像 <Image />与图像填充的显示方式类似 , 但显示完整矩形图像 <Image Width=“200” Source=“Assets/Grass.jpg" />
- 21. 使用 XAML 进行图形变换
- 22. 图形变换 对对象实施图形变换效果 ,包括变形 , 旋转等 <Rectangle Width="200" Height="100" Fill=“Red"> <Rectangle.RenderTransform> <RotateTransform CenterX="25" CenterY="100" Angle="45" /> </Rectangle.RenderTransform> </Rectangle>
- 23. 图形变换 (2) 可以成组进行图形变换<Canvas xmlns="..." xmlns:x="..."> <Canvas.RenderTransform> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> <Line X1="25" Y1="75" X2="75" Y2="75" Stroke="Black" /> </Canvas>
- 24. 图形变换 (3) 图形变换类型<RotateTransform /> 转旋 <ScaleTransform /> 缩放和拉伸 <SkewTransform /> 倾斜 <TranslateTransform /> 位移 <MatrixTransform /> 按矩形运算进行变换
- 25. 图形变换 (4) <TransformGroup/> 成组多个变换方式 <Canvas xmlns="..." xmlns:x="..."> <Canvas.RenderTransform> <TransformGroup> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> <ScaleTransform ScaleX="1.5" ScaleY="2" /> </TransformGroup> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> </Canvas>
- 26. 嵌入媒体 <MediaElement />用于显示视频或音频 , 不需要其它控件 <Canvas xmlns="..." xmlns:x="..."> <MediaElement Source=“Assets/silverlight.wmv" /> </Canvas>
- 27.
- 28. 使用 XAML 制作动画可以通过 XAML 语言创建复杂的动画方式 动画本身基于 XAML 动画播放的事件触发器基于 XAML
- 29. 使用 XAML 制作动画– 示例 <Canvas xmlns="..." xmlns:x="..."> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" AutoReverse="True"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> </Canvas>
- 30. Triggers( 触发器 )<EventTrigger /> EventTrigger 在被触发时将执行一个动作 属性 RoutedEvent 指定一个用于触发的事件 (Canvas.Loaded) SourceName 指定具有 RoutedEvent 的对象 Actions 可以设定为执行故事板 (BeginStoryboard)
- 31. Storyboard( 故事板 )<Storyboard /> 用于描述和控制一个或多个动画 可以把动画应用到对象的某个属性上来创建动画效果 相关属性 TargetName , TargetProperty From, By and To Duration AutoReverse RepeatBehavior
- 32. 动画类型 DoubleAnimation 操作数值类型属性<DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" AutoReverse="True"/>
- 33. 动画类型 (2) ColorAnimation进行颜色变化动画 ... <ColorAnimation Storyboard.TargetName="circleBrush" Storyboard.TargetProperty="Color" From=“Yellow" To="LightGray" Duration="0:0:2" /> ... <Ellipse x:Name="theCircle" Width="100" Height="100"> <Ellipse.Fill> <SolidColorBrush x:Name="circleBrush" Color="Yellow" /> </Ellipse.Fill> </Ellipse>
- 34. 动画类型 (3) PointAnimation用于变化 Point 类型数值 (e.g 100,100) ... <PointAnimation Storyboard.TargetName="myBrush" Storyboard.TargetProperty="StartPoint" From="0,0" To="1,1" Duration="0:0:2" AutoReverse="True" /> ... <LinearGradientBrush x:Name="myBrush" StartPoint="0,0" EndPoint="1,1"> <LinearGradientBrush.GradientStops> ... </LinearGradientBrush.GradientStops> </LinearGradientBrush> ...
- 35. 关键帧动画 Keyframe AnimationsDoubleAnimationUsingKeyFrames ColorAnimationUsingKeyFrames PointAnimationUsingKeyFrames 通过 Keyframe 对象 指定关键帧所处的时间与属性值 来设定关键帧动画
- 36. 关键帧类型 Discrete 非连续 Linear 线性 Spline 曲线
- 37. 关键帧类型 (Demo) ...<DoubleAnimationUsingKeyFrames Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width"> <DoubleAnimationUsingKeyFrames.KeyFrames> <SplineDoubleKeyFrame Value="10" KeyTime="0:0:1" KeySpline="0.5,0,0.5,0.5" /> <SplineDoubleKeyFrame Value="50" KeyTime="0:0:2" KeySpline="0.5,0,0.5,0.5" /> <SplineDoubleKeyFrame Value="150" KeyTime="0:0:4" KeySpline="0.5,0,0.5,0.5" /> </DoubleAnimationUsingKeyFrames.KeyFrames> </DoubleAnimationUsingKeyFrames>...
- 38.