1.  2009 Pearson Education, Inc. All rights reserved. 1 17 WPF Graphics and Multimedia

2.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 4 OBJECTIVES In this chapter you will learn:  To manipulate fonts.  To draw basic shapes like Line s, Rectangle s, Ellipse s and Polygon s.  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 control while maintaining its functionality.  To animate the properties of a GUI element.  To transform and animate 3-D objects.

5.  2009 Pearson Education, Inc. All rights reserved. 5 17.1 Introduction 17.2 Controlling Fonts 17.3 Basic Shapes 17.4 Polygon s and Polyline s 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.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 7 Outline UsingFonts.xaml ( 1 of 3 ) Figure 17.1 shows how to use TextBlock s and control the appearance of the displayed text. Defining the appearance of the font. Fig. 17.1 | Formatting fonts in XAML code. (Part 1 of 3.)

8.  2009 Pearson Education, Inc. All rights reserved. 8 Outline Applying an italic style. UsingFonts.xaml ( 2 of 3 ) TextDecorations draw a horizontal line through the text. Fig. 17.1 | Formatting fonts in XAML code. (Part 2 of 3.)

9.  2009 Pearson Education, Inc. All rights reserved. 9 Outline Fig. 17.1 | Formatting fonts in XAML code. (Part 3 of 3.) TextDecoration s draw a horizontal line through the text. UsingFonts.xaml ( 3 of 3 )

10.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 12 Outline The BasicShapes example (Fig. 17.2) shows you how to display Line s, Rectangle s and Ellipse s. 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.  2009 Pearson Education, Inc. All rights reserved. 13 Outline Defining an Ellipse. Fig. 17.2 | Drawing basic shapes in XAML. (Part 2 of 2.) BasicShapes.xaml ( 1 of 2 )

14.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 16 Outline DrawPolygons.xaml ( 2 of 4 ) Defining a two-column GUI. Nested in the Canvas are the Polyline and two Polygon s. Fig. 17.3 | Defining Polylines and Polygons in XAML. (Part 1 of 3.)

17.  2009 Pearson Education, Inc. All rights reserved. 17 Outline DrawPolygons.xaml ( 3 of 4 ) RadioButton s allow you to select which shape appears in the Canvas. Fig. 17.3 | Defining Polylines and Polygons in XAML. (Part 2 of 3.)

18.  2009 Pearson Education, Inc. All rights reserved. 18 Outline DrawPolygons.xaml ( 4 of 4 ) 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.) A Button clears the shape’s points to allow you start over.

19.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 20 Outline DrawPolygons. xaml.cs ( 1 of 4 ) The code-behind file for the application is shown in Fig. 17.4. A Point­Collection stores Point objects. We set each shape’s Points property to reference the PointCollection. Fig. 17.4 | Drawing Polyline s and Polygon s. (Part 1 of 4.)

21.  2009 Pearson Education, Inc. All rights reserved. 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 Polyline s and Polygon s. (Part 2 of 4.)

22.  2009 Pearson Education, Inc. All rights reserved. 22 Outline DrawPolygons. xaml.cs ( 3 of 4 ) Each RadioButton makes the corresponding shape Visible and sets the other two to Collapsed. Fig. 17.4 | Drawing Polyline s and Polygon s. (Part 3 of 4.)

23.  2009 Pearson Education, Inc. All rights reserved. 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 Polyline s and Polygon s. (Part 4 of 4.)

24.  2009 Pearson Education, Inc. All rights reserved. 24 Outline UsingBrushes.xaml ( 1 of 5 ) Brushes change an element’s graphic properties, such as the Fill, Stroke or Background. Run the UsingBrushes application (Fig. 17.5) to see Brush es applied to TextBlock s and Ellipse s. Fig. 17.5 | Applying brushes to various XAML elements. (Part 1 of 5.)

25.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 28 Outline UsingBrushes.xaml ( 5 of 5 ) a) b) c) Fig. 17.5 | Applying brushes to various XAML elements. (Part 5 of 5.)

29.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 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 Add Existing Item... option in the Project menu. Select the video in the Solution Explorer. In the Properties window, change the Copy to Output Directory property to Copy if newer. You can now set the Source property of your MediaElement to the video.

31.  2009 Pearson Education, Inc. All rights reserved. 31 Outline UsingGradients.xaml ( 1 of 4 ) The UsingGradients example applies a LinearGradientBrush to a Rectangle ’s Fill. The XAML code for this application is shown in Fig. 17.6. Fig. 17.6 | Defining gradients in XAML. (Part 1 of 4.)

32.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 33 Outline UsingGradients.xaml ( 3 of 4 ) Fig. 17.6 | Defining gradients in XAML. (Part 3 of 4.)

34.  2009 Pearson Education, Inc. All rights reserved. 34 Outline a) The application immediately after it is loaded. b) The application after changing the start and end colors. Fig. 17.6 | Defining gradients in XAML. (Part 4 of 4.) UsingGradients.xaml ( 4 of 4 )

35.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 37 Outline UsingGradients. xaml.cs ( 1 of 2 ) The code in Fig. 17.7 allows the user to change the Color s of the two stops. Fig. 17.7 | Customizing gradients. (Part 1 of 2.)

38.  2009 Pearson Education, Inc. All rights reserved. 38 Outline UsingGradients. xaml.cs ( 2 of 2 ) Obtaining the input values and creating a new color. Fig. 17.7 | Customizing gradients. (Part 2 of 2.)

39.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 40 Outline DrawStars.xaml ( 1 of 2 ) Figure 17.8 shows the XAML for an application which creates a circle of stars. Fig. 17.8 | Defining a Polygon representing a star in XAML. (Part 1 of 2.) Defining a single star- shaped Polygon.

41.  2009 Pearson Education, Inc. All rights reserved. 41 Outline DrawStars.xaml ( 2 of 2 ) Fig. 17.8 | Defining a Polygon representing a star in XAML. (Part 2 of 2.) Original Polygon Polygon rotated 20 degrees clockwise.

42.  2009 Pearson Education, Inc. All rights reserved. 42 Outline DrawStars.xaml.cs ( 1 of 2 ) We replicate star 18 times and apply RotateTransform s to create the circle of stars (Fig. 17.9). Fig. 17.9 | Applying transforms to a Polygon. (Part 1 of 2.)

43.  2009 Pearson Education, Inc. All rights reserved. 43 Outline 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 | Applying transforms to a Polygon. (Part 2 of 2.) DrawStars.xaml.cs ( 2 of 2 )

44.  2009 Pearson Education, Inc. All rights reserved. 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.  2009 Pearson Education, Inc. All rights reserved. 45 17.7 WPF Customization: A Television GUI (Cont.) Fig. 17.10 | GUI representing a television.

46.  2009 Pearson Education, Inc. All rights reserved. 46 Outline TV.xaml ( 1 of 11 ) The TV is actually just a basic WPF GUI (Fig. 17.11). This example demonstrates the use of WPF bitmap effects and opacity masks. Fig. 17.11 | TV GUI showing the versatility of WPF customization (XAML). (Part 1 of 11.) Creating a colorful circular template for a button.

47.  2009 Pearson Education, Inc. All rights reserved. 47 Outline 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 WPF customization (XAML). (Part 2 of 11.) TV.xaml ( 2 of 11 )

48.  2009 Pearson Education, Inc. All rights reserved. 48 Outline 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 WPF customization (XAML). (Part 3 of 11.) TV.xaml ( 3 of 11 )

49.  2009 Pearson Education, Inc. All rights reserved. 49 Outline Allowing programmatic control of playback. Fig. 17.11 | TV GUI showing the versatility of WPF customization (XAML). (Part 4 of 11.) TV.xaml ( 4 of 11 )

50.  2009 Pearson Education, Inc. All rights reserved. 50 Outline Fig. 17.11 | TV GUI showing the versatility of WPF customization (XAML). (Part 5 of 11.) TV.xaml ( 5 of 11 )

51.  2009 Pearson Education, Inc. All rights reserved. 51 Outline Creating a dark circular template for a button (representing off). Fig. 17.11 | TV GUI showing the versatility of WPF customization (XAML). (Part 6 of 11.) TV.xaml ( 6 of 11 )

52.  2009 Pearson Education, Inc. All rights reserved. 52 Outline Creating a dark circular template for a button (representing off). Fig. 17.11 | TV GUI showing the versatility of WPF customization (XAML). (Part 7 of 11.) TV.xaml ( 7 of 11 )

53.  2009 Pearson Education, Inc. All rights reserved. 53 Outline Creating a colorful circular template for a button. Fig. 17.11 | TV GUI showing the versatility of WPF customization (XAML). (Part 8 of 11.) TV.xaml ( 8 of 11 )

54.  2009 Pearson Education, Inc. All rights reserved. 54 Outline Applying bitmap effects for a 3-D appearance. Fig. 17.11 | TV GUI showing the versatility of WPF customization (XAML). (Part 9 of 11.) TV.xaml ( 9 of 11 )

55.  2009 Pearson Education, Inc. All rights reserved. 55 Outline Creating a reflection with a ScaleTransform effect. To achieve a semitransparent look, we apply an opacity mask to the reflection. Fig. 17.11 | TV GUI showing the versatility of WPF customization (XAML). (Part 10 of 11.) TV.xaml ( 10 of 11 )

56.  2009 Pearson Education, Inc. All rights reserved. 56 Outline Tilting the display for a 3-D appearance. Bevel Drop shadow Fig. 17.11 | TV GUI showing the versatility of WPF customization (XAML). (Part 11 of 11.) TV.xaml ( 11 of 11 )

57.  2009 Pearson Education, Inc. All rights reserved. 57 Fig. 17.12 | Summary of WPF bitmap effects. 17.7 WPF Customization: A Television GUI (Cont.)

58.  2009 Pearson Education, Inc. All rights reserved. 58 17.7 WPF Customization: A Television GUI (Cont.) You can apply a single bitmap effect to any element by setting its BitmapEffect property. To apply more than one effect, you must define the effects in a BitmapEffectGroup. Each bitmap effect has its own set of unique properties defining its appearance. Performance Tip 17.1 Bitmap effects should be used sparingly in your applications as they can degrade your machine’s performance. As of.NET Framework 3.5 Service Pack 1 Beta, the Blur and DropShadow bitmap effects are hardware accelerated but performance may still be compromised.

59.  2009 Pearson Education, Inc. All rights reserved. 59 The TV panel is represented by a beveled Border with a gray background. Nested within the TV panel is another Border containing the MediaElement. The power button is placed in the bottom-left corner, and the playback buttons are bound in a StackPanel. 17.7 WPF Customization: A Television GUI (Cont.)

60.  2009 Pearson Education, Inc. All rights reserved. 60 The GUI’s video reflection is a Rectangle element nested in a Border. You can invert an element by setting the ScaleX or ScaleY to a negative number. CenterX and CenterY specify the point that the image expands or contracts from. To achieve a semitransparent look, we apply an opacity mask to the reflection. 17.7 WPF Customization: A Television GUI (Cont.)

61.  2009 Pearson Education, Inc. All rights reserved. 61 When you draw a three-dimensional object, you are creating a 2-D projection of that 3-D environment. The TV GUI is a 2-D orthographic projection with the axes 105, 120, and 135 degrees from each other, as shown in Fig. 17.13. 17.7 WPF Customization: A Television GUI (Cont.)

62.  2009 Pearson Education, Inc. All rights reserved. 62 17.7 WPF Customization: A Television GUI (Cont.) Fig. 17.13 | The effect of skewing the TV application’s GUI components.

63.  2009 Pearson Education, Inc. All rights reserved. 63 Outline TV.xaml.cs ( 1 of 4 ) Figure 17.14 presents the code-behind class that provides the functionality for the TV application. Fig. 17.14 | TV GUI showing the versatility of WPF customization (code-behind). (Part 1 of 4.)

64.  2009 Pearson Education, Inc. All rights reserved. 64 Outline When the TV is turned on, the reflection is visible and playback options are enabled. Fig. 17.14 | TV GUI showing the versatility of WPF customization (code-behind). (Part 2 of 4.) TV.xaml.cs ( 2 of 4 )

65.  2009 Pearson Education, Inc. All rights reserved. 65 Outline When the TV is turned off, the Close method is called, the reflection is made invisible and the playback options are disabled. When a RadioButton is checked, the MediaElement executes the corresponding task. Fig. 17.14 | TV GUI showing the versatility of WPF customization (code-behind). (Part 3 of 4.) TV.xaml.cs ( 3 of 4 )

66.  2009 Pearson Education, Inc. All rights reserved. 66 Outline When a RadioButton is checked, the MediaElement executes the corresponding task. Fig. 17.14 | TV GUI showing the versatility of WPF customization (code-behind). (Part 4 of 4.) TV.xaml.cs ( 4 of 4 )

67.  2009 Pearson Education, Inc. All rights reserved. 67 Outline UsingAnimations.xaml ( 1 of 5 ) An animation in WPF is a transition of a property from one value to another in a specified amount of time. The UsingAnimations example (Fig. 17.15) shows a video’s size being animated. Fig. 17.15 | Animating the width and height of a video. (Part 1 of 5.) Fill resizes the media to that of its enclosure.

68.  2009 Pearson Education, Inc. All rights reserved. 68 Outline A DoubleAnimation animates a property of type Double. The TargetName property specifies which control to animate. Fig. 17.15 | Animating the width and height of a video. (Part 2 of 5.) UsingAnimations.xaml ( 2 of 5 )

69.  2009 Pearson Education, Inc. All rights reserved. 69 Outline A DoubleAnimation animates a property of type Double. Fig. 17.15 | Animating the width and height of a video. (Part 3 of 5.) UsingAnimations.xaml ( 3 of 5 )

70.  2009 Pearson Education, Inc. All rights reserved. 70 Outline Fig. 17.15 | Animating the width and height of a video. (Part 4 of 5.) UsingAnimations.xaml ( 4 of 5 )

71.  2009 Pearson Education, Inc. All rights reserved. 71 Outline Fig. 17.15 | Animating the width and height of a video. (Part 5 of 5.) UsingAnimations.xaml ( 5 of 5 )

72.  2009 Pearson Education, Inc. All rights reserved. 72 A Storyboard element contains embedded animation elements. A Storyboard has two important properties: – The TargetName property specifies which control to animate. – The TargetProperty specifies which property of the animated control to change. Several WPF animation classes handle different property types. 17.8 Animations (Cont.)

73.  2009 Pearson Education, Inc. All rights reserved. 73 The Stretch property of MediaElement determines how the media fits the size of its enclosure. – None allows the media to stay at its native size. – Fill resizes the media to that of its enclosure. – Uniform resizes the media to its largest possible size at its native aspect ratio. – UniformToFill resizes the media to completely fill the container while still keeping its aspect ratio—as a result, it could be cropped. 17.8 Animations (Cont.)

74.  2009 Pearson Education, Inc. All rights reserved. 74 Outline Application3D.xaml ( 1 of 5 ) The next example creates a rotating pyramid (Fig. 17.16). Fig. 17.16 | Animating a 3-D object. (Part 1 of 5.) In order to cause rotation, the Storyboard modifies the Angle property of the AxisAngleRotation3D. Setting the RepeatBehavior of the Storyboard to Forever indicates that the animation repeats continuously.

75.  2009 Pearson Education, Inc. All rights reserved. 75 Outline Fig. 17.16 | Animating a 3-D object. (Part 2 of 5.) Application3D.xaml ( 2 of 5 ) A Viewport3D object represents the 2-D view the user sees when the application executes. Create a ModelVisual3D object (lines 37–75) to define a 3- D object. The Camera property of Viewport3D defines a virtual camera. In order to cause rotation, the Storyboard modifies the Angle property of the AxisAngleRotation3D.

76.  2009 Pearson Education, Inc. All rights reserved. 76 Outline Fig. 17.16 | Animating a 3-D object. (Part 3 of 5.) Application3D.xaml ( 3 of 5 ) We use the AxisAngleRotation3D to define the transform’s rotation. A Viewport3D object represents the 2-D view the user sees when the application executes. Create a ModelVisual3D object (lines 37–75) to define a 3-D object. A MeshGeometry3D object specifies the exact shape of the object. We define two DirectionalLight objects to illuminate the pyramid.

77.  2009 Pearson Education, Inc. All rights reserved. 77 Outline Fig. 17.16 | Animating a 3-D object. (Part 4 of 5.) Application3D.xaml ( 4 of 5 ) A Viewport3D object represents the 2-D view the user sees when the application executes. Create a ModelVisual3D object (lines 37–75) to define a 3- D object.

78.  2009 Pearson Education, Inc. All rights reserved. 78 Outline Fig. 17.16 | Animating a 3-D object. (Part 5 of 5.) Application3D.xaml ( 5 of 5 )

79.  2009 Pearson Education, Inc. All rights reserved. 79 A Viewport3D object represents the 2-D view the user sees when the application executes. Create a ModelVisual3D object (lines 37–75) to define a 3-D object. – The Content property contains the shapes you wish to define in your space. – To add multiple objects to the Content, nest them in a Model3DGroup element. 17.9 (Optional) 3-D Objects and Transforms (Cont.)

80.  2009 Pearson Education, Inc. All rights reserved. 80 3-D objects in WPF are modeled as sets of triangles. Shapes with flat surfaces are relatively simple to create, while curved surfaces are extremely complex. A MeshGeometry3D object specifies the exact shape of the object. Two collections are needed—one is a set of points to represent the vertices, and the other uses those vertices to specify the triangles that define the shape. 17.9 (Optional) 3-D Objects and Transforms (Cont.)

81.  2009 Pearson Education, Inc. All rights reserved. 81 17.9 (Optional) 3-D Objects and Transforms (Cont.) The points are labeled in Fig. 17.17 in the order they are defined in the Positions collection. The text 0. (1,1,0) in the diagram refers to the first defined point. The TriangleIndices property specifies the three corners of each individual triangle in the collection. Note that we need two triangles to create the pyramid’s square base.

82.  2009 Pearson Education, Inc. All rights reserved. 82 17.9 (Optional) 3-D Objects and Transforms (Cont.) Fig. 17.17 | 3-D points making up a pyramid with a square base.

83.  2009 Pearson Education, Inc. All rights reserved. 83 17.9 (Optional) 3-D Objects and Transforms (Cont.) The order of the corners of the triangle dictates which side is considered the “front” versus the “back.” – If you want the surface facing toward you to be the “front,” you must define the corners in counterclockwise order. – By default, the “front” of the triangle is drawn with your defined Material while the “back” is made transparent. A square can be defined using two triangles, as shown in Fig. 17.18.

84.  2009 Pearson Education, Inc. All rights reserved. 84 17.9 (Optional) 3-D Objects and Transforms (Cont.) Fig. 17.18 | Defining two triangles to create a square in 3-D space.

85.  2009 Pearson Education, Inc. All rights reserved. 85 Fig. 17.19 | 3-D materials. By defining the Material property of GeometryModel3D, we can specify what type of brush to use when painting each surface. Figure 17.19 describes controls you can use to set the Material property. 17.9 (Optional) 3-D Objects and Transforms (Cont.)

86.  2009 Pearson Education, Inc. All rights reserved. 86 17.9 (Optional) 3-D Objects and Transforms (Cont.) The TextureCoordinates property defines which point is mapped onto which vertex of the object. The String "0,0 1,0 0,1 1,1 0,0" in the TextureCoordinates property is translated into logical points on the image. – Logical points are expressed as coordinates from the top-left (0, 0) to the bottom-right ( 0, 1).

87.  2009 Pearson Education, Inc. All rights reserved. 87 17.9 (Optional) 3-D Objects and Transforms (Cont.) The Camera property of Viewport3D defines a virtual camera. – The Position defines the camera’s location in 3-D space. – The LookDirection and UpDirection define the orientation of the camera.

88.  2009 Pearson Education, Inc. All rights reserved. 88 17.9 (Optional) 3-D Objects and Transforms (Cont.) A 3-D object needs a virtual light source so the camera can “see” the scene. We define two DirectionalLight objects to illuminate the pyramid. This element creates uniform rays of light pointing in the direction specified by the Direction property.

89.  2009 Pearson Education, Inc. All rights reserved. 89 17.9 (Optional) 3-D Objects and Transforms (Cont.) We use the RotateTransform3d class to implement a rotation of the pyramid. In order to cause rotation, the Storyboard modifies the Angle property of the AxisAngleRotation3D. Setting the RepeatBehavior of the Storyboard to Forever indicates that the animation repeats continuously.

90.  2009 Pearson Education, Inc. All rights reserved. 90 Outline Application3D.xaml.cs ( 1 of 2 ) RadioButton s at the bottom of the window change the axis of rotation (Fig. 17.20). Fig. 17.20 | Changing the axis of rotation for a 3-D animation. (Part 1 of 2.)

91.  2009 Pearson Education, Inc. All rights reserved. 91 Outline Application3D.xaml.cs ( 2 of 2 ) Fig. 17.20 | Changing the axis of rotation for a 3-D animation. (Part 2 of 2.)