3. Introduction to WPF Graphics

5. WPF Graphics – Example <DockPanel> <StackPanel DockPanel.Dock=&quot;Top&quot; Orientation=&quot;Horizontal&quot;> <TextBlock Text=&quot;Mix text, &quot; /> <Ellipse Fill=&quot;red&quot; Width=&quot;40&quot; /> <TextBlock Text=&quot; and &quot; /> <Button>Controls</Button> </StackPanel> <Ellipse DockPanel.Dock=&quot;Left&quot; Fill=&quot;Yellow&quot; Width=&quot;100&quot; /> <Button DockPanel.Dock=&quot;Left&quot;>z</Button> <TextBlock FontSize=&quot;24&quot; TextWrapping=&quot;Wrap&quot;> And of course you can put graphics into your text: <Ellipse Fill=&quot;Cyan&quot; Width=&quot;50&quot; Height=&quot;20&quot; /> </TextBlock> </DockPanel>

6. Introduction to WPF Graphics Live Demo

7. WPF Drawing Model

9. WPF Drawing Model –Example <Canvas x:Name=&quot;MainCanvas&quot; MouseLeftButtonDown= &quot;mainCanvas_MouseLeftButtonDown&quot;> <Rectangle Canvas.Left=&quot;10&quot; Canvas.Top=&quot;30&quot; Fill=&quot;Indigo&quot; Width=&quot;40&quot; Height=&quot;20&quot; /> <Rectangle Canvas.Left=&quot;20&quot; Canvas.Top=&quot;40&quot; Fill=&quot;Yellow&quot; Width=&quot;40&quot; Height=&quot;20&quot; /> <Rectangle Canvas.Left=&quot;30&quot; Canvas.Top=&quot;50&quot; Fill=&quot;Orange&quot; Width=&quot;40&quot; Height=&quot;20&quot; /> </Canvas> private void MainCanvas_MouseLeftButtonDown (object sender, RoutedEventArgs e) { Rectangle r = e.Source as Rectangle; if (r != null) { r.Width += 10; } }

10. WPF Drawing Model Live Demo

11. Resolution Independence, Scaling and Rotation

16. Basic Graphical Objects

20. Basic WPF Shapes

26. Ellipses and Lines Live Demo

32. Path Live Demo

34. Arc Segment – Example <Path Fill=&quot;Cyan&quot; Stroke=&quot;Black&quot;> <Path.Data> <PathGeometry> <PathFigure StartPoint=&quot;0,11&quot; IsClosed=&quot;True&quot;> <ArcSegment Point=&quot;50,61&quot; Size=&quot;70,30&quot; SweepDirection=&quot;Counterclockwise&quot; /> </PathFigure> <PathFigure StartPoint=&quot;30,11&quot; IsClosed=&quot;True&quot;> <ArcSegment Point=&quot;80,61&quot; Size=&quot;70,30&quot; SweepDirection=&quot;Clockwise&quot; IsLargeArc=&quot;True&quot; /> </PathFigure> </PathGeometry> <!--The result is--> </Path.Data> </Path>

35. ArcSegment Live Demo

36. Bitmaps, Images and Effects

44. Bitmap Effects Live Demo

45. Brushes and P ens

51. ImageBrush Live Demo

53. Transformations

56. Transformations Live Demo

57. XAML-Based A nimation

59. Animation – Example <Canvas> <Ellipse Width=&quot;200&quot; Height=&quot;150&quot; Fill=&quot;Orange&quot; x:Name=&quot;AnimatedEllipse&quot;> <Ellipse.Triggers> <EventTrigger RoutedEvent=&quot;Ellipse.Loaded&quot;> <BeginStoryboard><Storyboard> <DoubleAnimation Storyboard.TargetName=&quot;AnimatedEllipse&quot; Storyboard.TargetProperty=&quot;(Canvas.Left)&quot; From=&quot;-50&quot; To=&quot;300&quot; Duration=&quot;00:00:0.88&quot; AutoReverse=&quot;True&quot; RepeatBehavior=&quot;Forever&quot; /> </Storyboard></BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> </Canvas>

60. A nimation Live Demo