Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Xaml Tutorial By Allan

1,957 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Xaml Tutorial By Allan

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

×