WPF Graphics and Animations

2,482 views
2,284 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,482
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
54
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * (c) 2008 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * (c) 2008 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * (c) 2008 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 02/25/12 07/16/96 (c) 2005 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • WPF Graphics and Animations

    1. 1. 2 D and 3 D Graphics and Animations <ul><li>Doncho Minkov </li></ul><ul><li>Telerik School Academy </li></ul><ul><li>schoolacademy.telerik.com </li></ul><ul><li>Technical Trainer </li></ul><ul><li>http://www.minkov.it </li></ul>WPF Graphics and Animations
    2. 2. Table of Contents (2) <ul><li>Introduction to WPF Graphics </li></ul><ul><li>WPF Drawing Model </li></ul><ul><li>Resolution Independence </li></ul><ul><li>Basic Graphics Objects </li></ul><ul><li>Basic Shapes </li></ul><ul><li>Bitmaps, Images and Effects </li></ul><ul><li>Brushes and Pens </li></ul><ul><li>Transformations </li></ul><ul><li>Animation </li></ul>
    3. 3. Introduction to WPF Graphics
    4. 4. Introduction to WPF Graphics <ul><li>Graphical elements can be integrated into any part of user interface </li></ul><ul><ul><li>Free to mix them with any other kind of element </li></ul></ul><ul><ul><li>Use graphical elements inside controls </li></ul></ul><ul><ul><li>E.g. put an ellipse inside a button </li></ul></ul>
    5. 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. 6. Introduction to WPF Graphics Live Demo
    7. 7. WPF Drawing Model
    8. 8. WPF Drawing Model <ul><li>In WPF we don't need to write a C# code to respond to redraw requests </li></ul><ul><ul><li>WPF can keep the screen repainted for us </li></ul></ul><ul><ul><li>This is because WPF lets us represent drawings as objects that can be represented as XAML </li></ul></ul><ul><li>Objects are representing graphical shapes in the tree of user interface elements </li></ul><ul><ul><li>When some property is changed, WPF will automatically update the display </li></ul></ul>
    9. 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. 10. WPF Drawing Model Live Demo
    11. 11. Resolution Independence, Scaling and Rotation
    12. 12. Resolution Independence <ul><li>What is resolution independence ? </li></ul><ul><ul><li>Elements on the screen can be drawn at sizes independent from the pixel grid </li></ul></ul><ul><ul><li>Resizing do not affect the image quality </li></ul></ul><ul><li>WPF resolution independence means that </li></ul><ul><ul><li>If two monitors are set to their native resolution and each of them is accurately reporting its DPI settings to WPF </li></ul></ul><ul><ul><li>They will display the same WPF window at the exactly the same size </li></ul></ul>
    13. 13. Resolution Independence (2) <ul><li>WPF is resolution independent, but it has logical units to give elements size </li></ul><ul><li>A WPF window and all the elements inside it are using device-independent units </li></ul><ul><li>WPF defines a device-independent pixel as 1/96th of an inch </li></ul><ul><li>WPF optimizes its rendering of graphical features for any scale </li></ul><ul><ul><li>It is ideally placed to take advantage of increasing screen resolutions </li></ul></ul>
    14. 14. Scaling and Rotation <ul><li>WPF supports transformations at a fundamental level </li></ul><ul><li>Everything in the UI can be transformed </li></ul><ul><ul><li>Not just the user-drawn graphics </li></ul></ul><ul><ul><li>E.g. text, images, graphical objects, lines, ellipses, rectangles, controls, etc. </li></ul></ul><ul><li>The LayoutTransform property </li></ul><ul><ul><li>Available on all user interface elements in WPF </li></ul></ul><ul><ul><li>Rotation, scaling, effects (e.g. blur), etc. </li></ul></ul>
    15. 15. Scaling and Rotation (2) <ul><li>The details have become crisper </li></ul><ul><li>G raphic is clearer </li></ul><ul><ul><li>Because WPF has rendered the button to look as good as it can at the specified size </li></ul></ul><Button> <Button.LayoutTransform> <ScaleTransform ScaleX=&quot;2&quot; ScaleY=&quot;2&quot; /> </Button.LayoutTransform> ... <!--The result is--> </Button> <!--without scaling--> <!--with scaling-->
    16. 16. Basic Graphical Objects
    17. 17. Shapes, Brushes, and Pens <ul><li>Most of the classes in WPF’s drawing toolkit fall into one of these three categories: </li></ul><ul><ul><li>Shapes – geometrical figures, e.g. rectangle </li></ul></ul><ul><ul><li>Brushes – mechanisms to fill a shape </li></ul></ul><ul><ul><li>Pens – draw the shape borders </li></ul></ul><ul><li>Shapes are objects that provide the basic building blocks for drawing </li></ul><ul><ul><li>Rectangle , Ellipse , Line , Polyline , Polygon , and Path </li></ul></ul>
    18. 18. Shapes, Brushes, and Pens (2) <ul><li>The simplest brush is the single-color SolidColorBrush </li></ul><ul><li>For more interesting visual effects use </li></ul><ul><ul><li>LinearGradientBrush </li></ul></ul><ul><ul><li>RadialGradientBrush </li></ul></ul><ul><li>Create brushes based on images </li></ul><ul><ul><li>ImageBrush </li></ul></ul><ul><ul><li>D rawingBrush </li></ul></ul><ul><li>VisualBrush – take any visual tree </li></ul>
    19. 19. Shapes, Brushes, and Pens (3) <ul><li>Pens are used to draw the outline of a shape </li></ul><ul><ul><li>Pen is just an augmented brush </li></ul></ul><ul><li>When you create a Pen object </li></ul><ul><ul><li>You give it a Brush to tell it how it should paint onto the screen </li></ul></ul><ul><li>The Pen class adds more settings </li></ul><ul><ul><li>L ine thickness (1px, 2px, …) </li></ul></ul><ul><ul><li>D ash patterns (solid, dotted, dashed, …) </li></ul></ul>
    20. 20. Basic WPF Shapes
    21. 21. Base Shape Class Properties <ul><li>The Fill property </li></ul><ul><ul><li>Specifies the Brush that will be used to paint the interior </li></ul></ul><ul><li>The Stroke property </li></ul><ul><ul><li>Specifies the Brush that will be used to paint the outline of the shape </li></ul></ul><ul><li>The Stretch property </li></ul><ul><ul><li>How the shape is stretched to fill the shape object's layout space </li></ul></ul>
    22. 22. Rectangle <ul><li>It can be drawn either filled in shape, as an outline, or both filled in and outlined </li></ul><ul><li>Rectangle doesn’t provide any properties for setting its location </li></ul><ul><ul><li>The location is determined by the container (e.g. Canvas , StackPanel , FlowPanel , …) </li></ul></ul><Canvas> <Rectangle Fill=&quot;Yellow&quot; Stroke=&quot;Black&quot; Canvas.Left=&quot;30&quot; Canvas.Top=&quot;10&quot; Width=&quot;100&quot; Height=&quot;20&quot; /> </Canvas>
    23. 23. Rectangle (2) <ul><li>A Rectangle will usually be aligned with the coordinate system of its parent panel </li></ul><ul><ul><li>If the parent panel has been rotated, Rectangle will of course be also rotated </li></ul></ul><ul><li>RadiusX and RadiusY properties </li></ul><ul><ul><li>Draw a rectangle with rounded corners </li></ul></ul><ul><li>RenderTransform property </li></ul><ul><ul><li>Transforms a Rectangle relative to its containing panel (rotate, scale, effects, …) </li></ul></ul>
    24. 24. Ellipse <ul><li>Ellipse is similar to Rectangle </li></ul><ul><li>Size, location, rotation, fill, and stroke of an Ellipse are controlled in exactly the same way as for a Rectangle </li></ul><Ellipse Width=&quot;100&quot; Height=&quot;50&quot; Fill=&quot;Yellow&quot; Stroke=&quot;Black&quot; /> <!--The result is-->
    25. 25. Line <ul><li>Draws a straight line between two points </li></ul><ul><li>C ontrolling the location </li></ul><ul><ul><li>X1 and Y1 define the start point, and X2 and Y2 deter mine the end point </li></ul></ul><StackPanel Orientation=&quot;Vertical&quot;> <TextBlock Background=&quot;LightGray&quot;>Foo</TextBlock> <Line Stroke=&quot;Green&quot; X1=&quot;20&quot; Y1=&quot;10&quot; X2=&quot;100&quot; Y2=&quot;40&quot; /> <TextBlock Background=&quot;LightGray&quot;>Bar</TextBlock> <Line Stroke=&quot;Green&quot; X1=&quot;0&quot; Y1=&quot;10&quot; X2=&quot;100&quot; Y2=&quot;0&quot; /> </StackPanel>
    26. 26. Ellipses and Lines Live Demo
    27. 27. Polyline <ul><li>Draw a connected series of line segments </li></ul><ul><li>Points property </li></ul><ul><ul><li>Containing a list of coordinate pairs </li></ul></ul><Polyline Stroke=&quot;Blue&quot; Points=&quot;0,30 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 160,30&quot; /> <!--The result is-->
    28. 28. Polygon <ul><li>Polygon is very similar to Polyline </li></ul><ul><ul><li>It has a Points property that works in exactly the same way as Polyline ’s </li></ul></ul><ul><li>Polygon always draws a closed shape </li></ul><Polyline Fill=&quot;Orange&quot; Stroke=&quot;Blue&quot; StrokeThickness=&quot;2&quot; Points=&quot;40,10 70,50 10,50&quot; /> <Polygon Fill=&quot;Orange&quot; Stroke=&quot;Blue&quot; StrokeThickness=&quot;2&quot; Points=&quot;40,10 70,50 10,50&quot; /> <!--The result is-->
    29. 29. Polygon (2) <ul><li>FillRule property </li></ul><ul><ul><li>If this number is odd, the point was inside the shape </li></ul></ul><ul><ul><li>If it is even, the point is outside the shape </li></ul></ul><ul><ul><li>The default rule is EvenOdd </li></ul></ul><Polygon Fill=&quot;Orange&quot; Stroke=&quot;Blue&quot; StrokeThickness=&quot;2&quot; FillRule=&quot;Nonzero&quot; Points=&quot;10,10 60,10 60,25 20,25 20,40 40,40 40,18 50,18 50,50 10,50&quot; /> <!--The result is-->
    30. 30. Path <ul><li>Path draws more complex shapes </li></ul><ul><li>Data property specifies the Geometry </li></ul><ul><li>Three geometry types </li></ul><ul><ul><li>RectangleGeometry </li></ul></ul><ul><ul><ul><li>Correspond to the Rectangle </li></ul></ul></ul><ul><ul><li>EllipseGeometry </li></ul></ul><ul><ul><ul><li>Correspond to the Ellipse </li></ul></ul></ul><ul><ul><li>LineGeometry </li></ul></ul><ul><ul><ul><li>Correspond to the Line </li></ul></ul></ul>
    31. 31. Path (2) <ul><li>GeometryGroup object </li></ul><ul><ul><li>Create a shape with multiple geometries </li></ul></ul><Canvas> <Path Fill=&quot;Cyan&quot; Stroke=&quot;Black&quot;> <Path.Data> <GeometryGroup> <EllipseGeometry Center=&quot;20, 40&quot; RadiusX=&quot;20&quot; RadiusY=&quot;40&quot; /> <EllipseGeometry Center=&quot;20, 40&quot; RadiusX=&quot;10&quot; RadiusY=&quot;30&quot; /> </GeometryGroup> </Path.Data> <!--The result is--> </Path> </Canvas>
    32. 32. Path Live Demo
    33. 33. Path (3) <ul><li>The ArcSegment </li></ul><ul><ul><li>Add elliptical curves to the edge of a shape </li></ul></ul><ul><ul><li>P rovides two flags </li></ul></ul><ul><ul><ul><li>IsLargeArc – determines whether you get the larger or smaller slice size </li></ul></ul></ul><ul><ul><ul><li>SweepDirection – chooses on which side of the line the slice is drawn </li></ul></ul></ul><ul><li>D raw Bézier curves and c ombining shapes </li></ul>
    34. 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. 35. ArcSegment Live Demo
    36. 36. Bitmaps, Images and Effects
    37. 37. Image <ul><li>Image simply displays a picture </li></ul><ul><li>Place image anywhere in the visual tree </li></ul><ul><li>Source property </li></ul><ul><ul><li>URL of the image file / resource </li></ul></ul><ul><li>Setting the Source property to an absolute URL </li></ul><ul><li>Using relative URL </li></ul><Image Source=&quot;http://www.interact-sw.co.uk/images/M3/BackOfM3.jpeg&quot; /> <Image Source=&quot;/MyFunnyImage.jpeg&quot; />
    38. 38. Image (2) <ul><li>The Image element is able to resize the image </li></ul><ul><li>The default scaling behavior </li></ul><ul><ul><li>Use the same scale factor horizontally and vertically </li></ul></ul><ul><li>Stretch property </li></ul><ul><ul><li>The image will fill the entire space of its container </li></ul></ul><Image Source=&quot;/MyFunnyImage.jpeg&quot; Stretch=&quot;Fill&quot; Opacity=&quot;0.5&quot; />
    39. 39. ImageSource <ul><li>ImageSource is an abstract base class </li></ul><ul><ul><li>R epresent an image </li></ul></ul><ul><li>Two classes derive from ImageSource </li></ul><ul><ul><li>DrawingImage </li></ul></ul><ul><ul><ul><li>It wraps a resolution-independent drawing object </li></ul></ul></ul><ul><ul><li>BitmapSource – it also is abstract </li></ul></ul><ul><ul><ul><li>B itmap source types : BitmapFram e , BitmapImag e , CachedBitmap , ColorConvertedBitma p , etc. </li></ul></ul></ul>
    40. 40. Creating Bitmaps <ul><li>RenderTargetBitmap </li></ul><ul><ul><li>Create a new bitmap from any visual </li></ul></ul>RenderTargetBitmap bmp = new RenderTargetBitmap(300,150,300,300, PixelFormats.Pbgra32); Ellipse e = new Ellipse(); e.Fill = Brushes.Green; e.Measure(new Size(96, 48)); e.Arrange(new Rect(0, 0, 96, 48)); bmp.Render(e); <!-- The result is -->
    41. 41. Creating Bitmaps (2) <ul><li>You can choose any resolution you like for the output </li></ul><ul><li>RenderTargetBitmap lets you build a bitmap out of any combination of WPF visuals </li></ul><ul><li>It is great if you want to build or modify a bitmap using WPF elements </li></ul>
    42. 42. Bitmap Effects <ul><li>BitmapEffects property </li></ul><ul><ul><li>Apply a visual effect to the element and all of its children </li></ul></ul><ul><ul><li>All of these effects use bitmap processing algorithms </li></ul></ul><StackPanel Orientation=&quot;Horizontal&quot;> <StackPanel Orientation=&quot;Vertical&quot;> <TextBlock Text=&quot;Normal Text&quot; TextAlignment=&quot;Center&quot; FontWeight=&quot;Bold&quot; /> <RadioButton Content=&quot;Better in position 1?&quot; GroupName=&quot;r&quot; /> </StackPanel> <!--The example continues-->
    43. 43. Bitmap Effects (2) <ul><li>T he built-in effects </li></ul><ul><ul><li>BevelBitmapEffect </li></ul></ul><ul><ul><li>BitmapEffectGroup </li></ul></ul><ul><ul><li>BlurBitmapEffect </li></ul></ul><ul><ul><li>… </li></ul></ul><StackPanel Orientation=&quot;Vertical&quot; Margin=&quot;10,0&quot;> <StackPanel.BitmapEffect> <BlurBitmapEffect Radius=&quot;3&quot; /> </StackPanel.BitmapEffect> <TextBlock Text=&quot;Blurred Text&quot; TextAlignment=&quot;Center&quot; FontWeight=&quot;Bold&quot; /> <RadioButton Content=&quot;Or position 2?&quot; GroupName=&quot;r&quot; /> </StackPanel> </StackPanel>
    44. 44. Bitmap Effects Live Demo
    45. 45. Brushes and P ens
    46. 46. SolidColorBrush <ul><li>SolidColorBrush uses one color across the whole area being painted </li></ul><ul><ul><li>It has just one property – Color </li></ul></ul><ul><li>The XAML compiler will recognize Yellow as one of the standard named colors from the Colors class </li></ul><ul><li>Uses a numeric color value </li></ul><ul><ul><li>Begin with a # symbol and contain hexadecimal digits – Fill=&quot;#8F8&quot; </li></ul></ul><Rectangle Fill=&quot;Yellow&quot; Width=&quot;100&quot; Height=&quot;20&quot; />
    47. 47. LinearGradientBrush <ul><li>The painted area transitions from one color to another </li></ul><ul><li>The StartPoint and EndPoint properties </li></ul><ul><ul><li>Indicate where the color transition begins and ends </li></ul></ul><ul><ul><li>These coordinates are relative to the area being filled </li></ul></ul>
    48. 48. LinearGradientBrush (2) <ul><li>Each GradientStop has an Offset property </li></ul><ul><ul><li>Enables the fill to pass through multiple colors </li></ul></ul><Rectangle Width=&quot;80&quot; Height=&quot;60&quot;> <Rectangle.Fill> <LinearGradientBrush StartPoint=&quot;0,0&quot; EndPoint=&quot;1,1&quot;> <GradientStop Color=&quot;Blue&quot; Offset=&quot;0&quot; /> <GradientStop Color=&quot;White&quot; Offset=&quot;1&quot; /> </LinearGradientBrush> <!--The result is--> </Rectangle.Fill> </Rectangle>
    49. 49. ImageBrush <ul><li>TileBrush </li></ul><ul><ul><li>Base class for ImageBrush , DrawingBrush , and VisualBrush </li></ul></ul><ul><ul><li>Decides how to stretch the source image to fill the available space </li></ul></ul><ul><li>Stretch property </li></ul><ul><ul><li>Specifies how the content of this TileBrush stretches to fit its tiles </li></ul></ul><ul><ul><li>Fill / Uniform / UniformToFill </li></ul></ul>
    50. 50. ImageBrush (2) <ul><li>AlignmentX and AlignmentY properties </li></ul><ul><ul><li>Horizontal and vertical alignment of content in the TileBrush base tile </li></ul></ul><ul><li>Viewbox , Viewport , ViewboxUnits , and ViewportUnits properties </li></ul><ul><ul><li>Allow you to focus on any part of the image or choose specific scale factors </li></ul></ul><ul><li>TileMode property </li></ul>
    51. 51. ImageBrush Live Demo
    52. 52. Pen <ul><li>A Pen is always based on a brush </li></ul><ul><ul><li>Accessed through Stroke property </li></ul></ul><ul><li>Describes how a shape is outlined </li></ul><ul><li>Important properties </li></ul><ul><ul><li>Thickness and DashArray propert ies </li></ul></ul><Rectangle Stroke=&quot;Black&quot; StrokeThickness=&quot;5&quot; StrokeDashArray=&quot;10 1 3 1&quot; /> <Rectangle Stroke=&quot;Black&quot; StrokeThickness=&quot;5&quot; StrokeDashArray=&quot;6 1 6&quot; />
    53. 53. Transformations
    54. 54. Transform Classes <ul><li>TranslateTransform – displaces the coordinate system by some amount </li></ul><ul><li>RotateTransform – rotates coordinate system </li></ul><ul><ul><li>Angle , CenterX , CenterY properties </li></ul></ul><Button Width=&quot;180&quot; Height=&quot;60&quot; Canvas.Left=&quot;100&quot; Canvas.Top=&quot;100&quot;>I'm rotated 35 degrees <Button.RenderTransform> <RotateTransform Angle=&quot;35&quot; CenterX=&quot;45&quot; CenterY=&quot;5&quot; /> </Button.RenderTransform> </Button>
    55. 55. Transform Classes <ul><li>ScaleTransform – scales the coordinate system up or down </li></ul><ul><ul><li>ScaleX , ScaleY , CenterX , CenterY properties </li></ul></ul><ul><li>SkewTransform – warps your coordinate system by slanting it a number of degrees </li></ul><ul><ul><li>AngleX , AngleY , CenterX , CenterX </li></ul></ul><ul><li>MatrixTransform – modifies the coordinate system using matrix multiplication </li></ul><ul><ul><li>Matrix property </li></ul></ul>
    56. 56. Transformations Live Demo
    57. 57. XAML-Based A nimation
    58. 58. A nimation <ul><li>WPF and Silverlight perform time-based animation with Storyboard </li></ul><ul><ul><li>Uses a property-based animation model </li></ul></ul><ul><ul><li>E.g. modify the value of a property over an interval of time </li></ul></ul><ul><li>To animate a property you need to have an animation class </li></ul><ul><ul><li>To modify the color from some value to another, use the ColorAnimation class </li></ul></ul><ul><ul><li>To modify a property, use DoubleAnimation </li></ul></ul>
    59. 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. 60. A nimation Live Demo
    61. 61. WPF Graphics and Animations <ul><li>Questions? </li></ul>
    62. 62. Exercises <ul><li>Write a program that visualize this figure. Use only rectangles and RenderTransform . </li></ul><ul><li>Draw the rectangles from the previous exercise with rounded corners. </li></ul><ul><li>Write a WPF program that visualize the figure below. Use Polyline and Polygon and FillRule property. </li></ul><ul><li>In the demo &quot; Arc Segment &quot; add rotation of 45 degrees (rotating the ellipses before slicing them). </li></ul><ul><li>Draw few national flags (e.g. Bulgarian, German, …). Make an animation that transits from one flag to another by changing the opacity of the flags. </li></ul>
    63. 63. Exercises (2) <ul><li>Write a WPF program that visualize a LinearGradientBrush with multiple colors (use Offset property). </li></ul><ul><li>Use TransformGroup to apply a ScaleTransform and a RotateTransform to the RenderTransform property of a TextBlock . </li></ul><ul><li>Implement Storyboard animation that moves a large blue rectangle from left to right and back. Add a counterclockwise rotation to the animation. Finally add a color-changing animation from blue to yellow. </li></ul>
    64. 64. Exercises (3) <ul><li>Implement a star field simulation in WPF. The sky should be a Canvas panel with black background. The stars should be light blue circles with different size and transparency. All stars should move from top to bottom with different speed. Larger stars move faster and are less transparent. </li></ul><ul><li>Add a space ship at the bottom of the screen. </li></ul><ul><li>Make the ship move left or right by keyboard keys. </li></ul>
    65. 65. Exercises <ul><li>Create a WPF application that shows a circle, filled in orange color with black borders. </li></ul><ul><li>Create a WPF application that shows the text “Hello world” with font family Consolas , size 100 , and color blue . </li></ul><ul><li>Create a WPF application that shows three nested rectangles with in different colors. </li></ul><ul><li>Create a WPF application that shows a few rectangles with rounded corners. </li></ul><ul><li>Create a WPF application that shows all fonts in &quot; C:WindowsFonts &quot;. </li></ul>
    66. 66. Exercises (2) <ul><li>Create a WPF application that shows a FlowDocument . The document should consist of header (show in the center of the window, with different font from the other text), a picture (floating at the top left corner) and some other text. </li></ul><ul><li>Create a WPF application that shows the lists below: </li></ul><ul><li>Use List and MarkerStyle , StartIndex properties. </li></ul>
    67. 67. Exercises (3) <ul><li>Create a WPF application that shows the table below: </li></ul><ul><li>Create a WPF application that shows the table below: </li></ul>

    ×