Xaml Tutorial By Allan

1,763 views
1,658 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,763
On SlideShare
0
From Embeds
0
Number of Embeds
72
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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>

×