1 / 91

WPF Graphics and Multimedia

17. WPF Graphics and Multimedia. Nowadays people's visual imagination is so much more sophisticated, so much more developed, particularly in young people, that now you can make an image which just slightly suggests something, they can make of it what they will. Robert Doisneau

samt
Download Presentation

WPF Graphics and Multimedia

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 17 • WPF Graphicsand Multimedia

  2. Nowadays people's visual imagination is so much more sophisticated, so much more developed, particularly in young people, that now you can make an image which just slightly suggests something, they can make of it what they will. Robert Doisneau In shape, it is perfectly elliptical. In texture, it is smooth and lustrous. In color, it ranges from pale alabaster to warm terra cotta. Sydney J Harris, “Tribute to an Egg”

  3. There are painters who transform the sun into a yellow spot, but there are others who, thanks to their art and intelligence, transform a yellow spot into the sun. Pablo Picasso

  4. OBJECTIVES In this chapter you will learn: • To manipulate fonts. • To draw basic shapes like Lines, Rectangles, Ellipses and Polygons. • To use brushes to customize the Fill or Background of a GUI object. • To use transforms to reposition or reorient GUI elements. • To completely customize the look of a controlwhile maintaining its functionality. • To animate the properties of a GUI element. • To transform and animate 3-D objects.

  5. 17.1   Introduction • 17.2   Controlling Fonts • 17.3   Basic Shapes • 17.4   Polygons and Polylines • 17.5   Brushes • 17.6   Transforms • 17.7   WPF Customization: A Television GUI • 17.8   Animations • 17.9   (Optional) 3-D Objects and Transforms

  6. 17.1 Introduction • The graphics system in WPF is designed to use your computer’s graphics hardware to reduce the load on the CPU and speed up graphics rendering. • WPF graphics are measured in resolution-independent pixels, where one pixel typically represents 1/96 of an inch. • WPF graphics are rendered on screen using a vector-based system, allowing graphic elements to be preserved across any rendering size. • Raster-based systems have the precise pixels specified for each graphical element. Raster-based graphics tend to degrade in appearance as they are scaled larger. • WPF also includes 3-D modeling and rendering capabilities.

  7. Outline • Figure 17.1 shows how to use TextBlocks and control the appearance of the displayed text. UsingFonts.xaml ( 1 of 3 ) Defining the appearance of the font. Fig. 17.1|Formatting fonts in XAML code. (Part 1 of 3.)

  8. Outline UsingFonts.xaml ( 2 of 3 ) Applying an italic style. TextDecorations draw a horizontal line through the text. Fig. 17.1|Formatting fonts in XAML code. (Part 2 of 3.)

  9. Outline UsingFonts.xaml ( 3 of 3 ) TextDecorations draw a horizontal line through the text. Fig. 17.1|Formatting fonts in XAML code. (Part 3 of 3.)

  10. 17.2 Controlling Fonts (Cont.) • The FontFamily property defines the font. • The FontSize property defines the text size in points (default 12). • The FontWeight and FontStyle properties change text appearance.

  11. 17.2 Controlling Fonts (Cont.) • TextDecorations draw a horizontal line through the text. • Overline and Baseline create lines above the text and at the base of the text. • Strikethrough and Underline create lines through the middle of the text and under the text.

  12. Outline • The BasicShapes example (Fig. 17.2) shows you how to display Lines, Rectangles and Ellipses. BasicShapes.xaml ( 1 of 2 ) A Canvas uses coordinates to position the shapes. A Line is defined by its two endpoints—X1, Y1 and X2, Y2. Fig. 17.2|Drawing basic shapes in XAML. (Part 1 of 2.)

  13. Outline BasicShapes.xaml ( 1 of 2 ) Defining an Ellipse. Fig. 17.2|Drawing basic shapes in XAML. (Part 2 of 2.)

  14. 17.3 Basic Shapes (Cont.) • A Canvas uses coordinates to position the shapes. • A Rectangle’s color is set in its Fill property, which can be any Color or Brush. • A Rectangle’s Stroke property defines the color of the outline of the shape. • A Line is defined by its two endpoints—X1, Y1 and X2, Y2.

  15. Outline DrawPolygons.xaml ( 1 of 4 ) • A Polyline draws a series of connected lines defined by a set of points. • A Polygon does the same but connects the start and end points to make a closed figure. • The application DrawPolygons (Fig. 17.3) allows you to click anywhere on the Canvas to define points for one of three shapes. • A Filled Polygon has a Fill property specified while a Polygon does not.

  16. Outline DrawPolygons.xaml ( 2 of 4 ) Defining a two-column GUI. Nested in theCanvas are thePolyline and two Polygons. Fig. 17.3|Defining Polylines and Polygons in XAML. (Part 1 of 3.)

  17. Outline DrawPolygons.xaml ( 3 of 4 ) RadioButtons allow you to select which shape appears in the Canvas. Fig. 17.3|Defining Polylines and Polygons in XAML. (Part 2 of 3.)

  18. Outline DrawPolygons.xaml ( 4 of 4 ) AButtonclears the shape’s points to allow you start over. a) Application with the Polyline option selected. b) Application with the Filled Polygon option selected. Fig. 17.3|Defining Polylines and Polygons in XAML. (Part 3 of 3.)

  19. 17.4 Polygons and Polylines (Cont.) • The Visibility of a GUI element can be set to Visible, Collapsed or Hidden. • A Hidden object occupies space in the GUI but is not visible. • A Collapsed object has a Width and Height of 0.

  20. Outline • The code-behind file for the application is shown in Fig. 17.4. DrawPolygons.xaml.cs ( 1 of 4 ) A Point­Collection stores Point objects. We set each shape’s Points property to reference the PointCollection. Fig. 17.4|Drawing Polylines and Polygons. (Part 1 of 4.)

  21. Outline DrawPolygons.xaml.cs ( 2 of 4 ) The collection’s Add method adds new points to the end of the collection. The Clear method of points erases its elements. Fig. 17.4|Drawing Polylines and Polygons. (Part 2 of 4.)

  22. Outline DrawPolygons.xaml.cs ( 3 of 4 ) Each RadioButton makes the corresponding shape Visible and sets the other two to Collapsed. Each RadioButton makes the corresponding shape Visible and sets the other two to Collapsed. Fig. 17.4|Drawing Polylines and Polygons. (Part 3 of 4.)

  23. Outline DrawPolygons.xaml.cs ( 4 of 4 ) Each RadioButton makes the corresponding shape Visible and sets the other two to Collapsed. Fig. 17.4|Drawing Polylines and Polygons. (Part 4 of 4.)

  24. Outline • Brushes change an element’s graphic properties, such as theFill, Stroke or Background. • Run theUsingBrushesapplication (Fig. 17.5) to seeBrushes applied to TextBlocks andEllipses. UsingBrushes.xaml ( 1 of 5 ) Fig. 17.5|Applying brushes to various XAML elements. (Part 1 of 5.)

  25. Outline UsingBrushes.xaml ( 2 of 5 ) Using an image to color text. An ImageBrush paints an image into the property it is assigned to. Fig. 17.5|Applying brushes to various XAML elements. (Part 2 of 5.)

  26. Outline UsingBrushes.xaml ( 3 of 5 ) Displaying an image inside of an Ellipse. Defining a Brush with a video to display as the text appearance. Fig. 17.5|Applying brushes to various XAML elements. (Part 3 of 5.)

  27. Outline UsingBrushes.xaml ( 4 of 5 ) Displaying a video inside of an Ellipse. Fig. 17.5|Applying brushes to various XAML elements. (Part 4 of 5.)

  28. Outline a) UsingBrushes.xaml ( 5 of 5 ) c) b) Fig. 17.5|Applying brushes to various XAML elements. (Part 5 of 5.)

  29. 17.5 Brushes (Cont.) • An ImageBrush paints an image into the property it is assigned to. • To fill text, we assign the ImageBrush to the Foreground property of a TextBlock. • The Background property specifies the fill for the area surrounding the text. • The ImageSource is set to the file we want to display (the image file must be added to the project).

  30. 17.5 Brushes (Cont.) • A VisualBrush can paint a video into the property it is assigned to. • To use audio or video in a WPF application, use a MediaElement object. • Add the video file to your project by selecting the AddExistingItem... option in the Project menu. • Select the video in the SolutionExplorer. In the Properties window, change the CopytoOutputDirectory property to Copyifnewer. • You can now set the Source property of your MediaElement to the video.

  31. Outline • The UsingGradientsexample applies aLinearGradientBrush to a Rectangle’s Fill. • The XAMLcode for this application is shown in Fig. 17.6. UsingGradients.xaml ( 1 of 4 ) Fig. 17.6|Defining gradients in XAML. (Part 1 of 4.)

  32. Outline UsingGradients.xaml ( 2 of 4 ) A LinearGradientBrush transitions along a straight path. A GradientStop defines a single color along the gradient. Fig. 17.6|Defining gradients in XAML. (Part 2 of 4.)

  33. Outline UsingGradients.xaml ( 3 of 4 ) Fig. 17.6|Defining gradients in XAML. (Part 3 of 4.)

  34. Outline a) The application immediately after it is loaded. UsingGradients.xaml ( 4 of 4 ) b) The application after changing the start and end colors. Fig. 17.6|Defining gradients in XAML. (Part 4 of 4.)

  35. 17.5 Brushes (Cont.) • A gradient is a gradual transition through two or more colors. • A LinearGradientBrush transitions along a straight path. • A RadialGradientBrush transitions radially outward. • Set RGBA values of the StartPoint and EndPoint colors of the gradient.

  36. 17.5 Brushes (Cont.) • A GradientStop defines a single color along the gradient. • The Color property defines the color you want the gradient to transition to. • The Offset property defines where along the linear transition you want the color to appear.

  37. Outline • The code in Fig. 17.7 allows the user to change theColors of the two stops. UsingGradients.xaml.cs ( 1 of 2 ) Fig. 17.7|Customizing gradients. (Part 1 of 2.)

  38. Outline UsingGradients.xaml.cs ( 2 of 2 ) Obtaining the input values and creating a new color. Obtaining the input values and creating a new color. Fig. 17.7|Customizing gradients. (Part 2 of 2.)

  39. 17.6 Transforms • A transform can be applied to reposition or reorient any UI element. • A TranslateTransform moves an object to a new location. • A RotateTransform rotates the object around a point. • A SkewTransform skews (or shears) the object. • A ScaleTransform scales the object.

  40. Outline • Figure 17.8 shows the XAML for an application which creates a circle of stars. DrawStars.xaml ( 1 of 2 ) Defining a single star-shaped Polygon. Fig. 17.8|Defining a Polygon representing a star in XAML. (Part 1 of 2.)

  41. Outline DrawStars.xaml ( 2 of 2 ) Original Polygon Polygon rotated 20degrees clockwise. Fig. 17.8|Defining a Polygon representing a star in XAML. (Part 2 of 2.)

  42. Outline • We replicate star 18 times and apply RotateTransforms to create the circle of stars (Fig. 17.9). DrawStars.xaml.cs ( 1 of 2 ) Fig. 17.9|ApplyingtransformstoaPolygon. (Part 1 of 2.)

  43. Outline DrawStars.xaml.cs ( 2 of 2 ) Duplicating star. Using the Random class’s NextBytes method to create random ARGB colors. Creating and applying a RotateTransform to a star filled with the new color. Fig. 17.9|ApplyingtransformstoaPolygon. (Part 2 of 2.)

  44. 17.7 WPF Customization: A Television GUI • The next application has a GUI that looks like a television set. • When the TV is on, the user can play, pause, and stop the video (Fig. 17.10).

  45. 17.7 WPF Customization: A Television GUI (Cont.) Fig. 17.10|GUI representing a television.

  46. Outline • The TV is actually just a basic WPF GUI (Fig. 17.11). • This example demonstrates the use of WPF bitmap effects and opacity masks. TV.xaml ( 1 of 11 ) Creating a colorful circular template for a button. Fig. 17.11|TV GUI showing the versatility of WPFcustomization (XAML). (Part 1 of 11.)

  47. Outline TV.xaml ( 2 of 11 ) Creating a colorful circular template for a button. Creating a dark circular template for a button (representing off). Fig. 17.11|TV GUI showing the versatility of WPFcustomization (XAML). (Part 2 of 11.)

  48. Outline TV.xaml ( 3 of 11 ) Creating a dark circular template for a button (representing off). Creating a colorful circular template for a button. Fig. 17.11|TV GUI showing the versatility of WPFcustomization (XAML). (Part 3 of 11.)

  49. Outline TV.xaml ( 4 of 11 ) Allowing programmatic control of playback. Fig. 17.11|TV GUI showing the versatility of WPFcustomization (XAML). (Part 4 of 11.)

  50. Outline TV.xaml ( 5 of 11 ) Fig. 17.11|TV GUI showing the versatility of WPFcustomization (XAML). (Part 5 of 11.)

More Related