Presentation is loading. Please wait.

Presentation is loading. Please wait.

2 D and 3 D Graphics and Animations Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer

Similar presentations


Presentation on theme: "2 D and 3 D Graphics and Animations Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer"— Presentation transcript:

1 2 D and 3 D Graphics and Animations Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer

2 1. Introduction to WPF Graphics 2. WPF Drawing Model 3. Resolution Independence 4. Basic Graphics Objects 5. Basic Shapes 6. Bitmaps, Images and Effects 7. Brushes and Pens 8. Transformations 9. Animation 2

3

4  Graphical elements can be integrated into any part of user interface  Free to mix them with any other kind of element  Use graphical elements inside controls  E.g. put an ellipse inside a button 4

5 5 Orientation="Horizontal"> Controls Controls Width="100" /> z z And of course you can put graphics into And of course you can put graphics into your text: your text:

6 Live Demo

7

8  In WPF we don't need to write a C# code to respond to redraw requests\  WPF can keep the screen repainted for us  This is because WPF lets us represent drawings as objects that can be represented as XAML  Objects are representing graphical shapes in the tree of user interface elements  When some property is changed, WPF will automatically update the display 8

9 9 "mainCanvas_MouseLeftButtonDown"> Fill="Indigo" Width="40" Height="20" /> Fill="Yellow" Width="40" Height="20" /> Fill="Orange" Width="40" Height="20" /> private void MainCanvas_MouseLeftButtonDown (object sender, RoutedEventArgs e) (object sender, RoutedEventArgs e){ Rectangle r = e.Source as Rectangle; Rectangle r = e.Source as Rectangle; if (r != null) if (r != null) { r.Width += 10; } { r.Width += 10; }}

10 Live Demo

11

12  What is resolution independence?  Elements on the screen can be drawn at sizes independent from the pixel grid  Resizing do not affect the image quality  WPF resolution independence means that  If two monitors are set to their native resolution and each of them is accurately reporting its DPI settings to WPF  They will display the same WPF window at the exactly the same size 12

13  WPF is resolution independent, but it has logical units to give elements size  A WPF window and all the elements inside it are using device-independent units  WPF defines a device-independent pixel as 1/96th of an inch  WPF optimizes its rendering of graphical features for any scale  It is ideally placed to take advantage of increasing screen resolutions 13

14  WPF supports transformations at a fundamental level  Everything in the UI can be transformed  Not just the user-drawn graphics  E.g. text, images, graphical objects, lines, ellipses, rectangles, controls, etc.  The LayoutTransform property  Available on all user interface elements in WPF  Rotation, scaling, effects (e.g. blur), etc. 14

15  The details have become crisper  Graphic is clearer  Because WPF has rendered the button to look as good as it can at the specified size 15

55  ScaleTransform – scales the coordinate system up or down  ScaleX, ScaleY, CenterX, CenterY properties  SkewTransform – warps your coordinate system by slanting it a number of degrees  AngleX, AngleY, CenterX, CenterX  MatrixTransform – modifies the coordinate system using matrix multiplication  Matrix property 55

56 Live Demo

57

58  WPF and Silverlight perform time-based animation with Storyboard  Uses a property-based animation model  E.g. modify the value of a property over an interval of time  To animate a property you need to have an animation class  To modify the color from some value to another, use the ColorAnimation class  To modify a property, use DoubleAnimation 58

59 59 x:Name="AnimatedEllipse"> RepeatBehavior="Forever" />

60 Live Demo

61 Questions?

62 1. Write a program that visualize this figure. Use only rectangles and RenderTransform. 2. Draw the rectangles from the previous exercise with rounded corners. 3. Write a WPF program that visualize the figure below. Use Polyline and Polygon and FillRule property. 4. In the demo "Arc Segment" add rotation of 45 degrees (rotating the ellipses before slicing them). 5. 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.

63 6. Write a WPF program that visualize a LinearGradientBrush with multiple colors (use Offset property). 7. Use TransformGroup to apply a ScaleTransform and a RotateTransform to the RenderTransform property of a TextBlock. 8. 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.

64 9. 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. 10. Add a space ship at the bottom of the screen. 11. Make the ship move left orright by keyboard keys. 64

65 12. Create a WPF application that shows a circle, filled in orange color with black borders. 13. Create a WPF application that shows the text “Hello world” with font family Consolas, size 100, and color blue. 14. Create a WPF application that shows three nested rectangles with in different colors. 15. Create a WPF application that shows a few rectangles with rounded corners. 16. Create a WPF application that shows all fonts in " C:\Windows\Fonts ". 65

66 17. 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. 18. Create a WPF application that shows the lists below: Use List and MarkerStyle, StartIndex properties. Use List and MarkerStyle, StartIndex properties.

67 19. Create a WPF application that shows the table below: 20. Create a WPF application that shows the table below:


Download ppt "2 D and 3 D Graphics and Animations Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer"

Similar presentations


Ads by Google