Visual Studio® 2008:
Windows® Presentation
Foundation
Module 8: Graphics and Multimedia
• Creating 2-D Graphics
• Displaying Images
• Creating 3-D Graphics
• Manipulating the 3-D Environment
• Adding Multimedia
Lesson: Creating 2-D Graphics
• 2-D Graphics Support in WPF
• Drawing Shapes
• What Are Paths and Geometries?
• Demonstration: Filling Shapes and Geometries
• Demonstration: Using and Animating Transformations
2-D Graphics Support in WPF
Shapes
Ellipse
Rectangle
Geometry
Ellipse
Brush
Line Pen
Path
Drawing Shapes
Defined using Height and Width properties
<Rectangle Height="50" Width="100" />
<Ellipse Height="50" Width="100" />
Defined using two points
<Line X1="10" Y1="10" X2="50" Y2="50" />
What Are Paths and Geometries?
Paths are defined by geometries, which are made up of figures
and segments
<Path ...
<PathGeometry>
...
<PathFigureCollection>
...
<!-- A Triangle. -->
<LineSegment Point="10, 300" />
<LineSegment Point="200, 200" />
Demonstration: Filling Shapes and Geometries
In this demonstration, you will see how to:
• Define an Ellipse and a Rectangle
• Define Stroke and Fill values
• Create a triangle by using a Path
Notes Page Over-flow Slide. Do Not Print Slide.
See Notes pane.
Demonstration: Using and Animating Transformations
In this demonstration, you will see how to:
• Add layout and render transformations to a Shape
• Animate the transformation objects
Notes Page Over-flow Slide. Do Not Print Slide.
See Notes pane.
Lesson: Displaying Images
• WPF Imaging Components
• Demonstration: Displaying Images in WPF
• Encoding and Decoding Images
• Rotating, Converting, and Cropping Images
WPF Imaging Components
WPF introduces a new API for working with images:
• Image
• ImageBrush
• ImageDrawing
WPF supports most popular imaging formats including:
• Bitmap (BMP)
• JPEG
• Portable Network Graphics (PNG)
• Graphics Interchange Format (GIF)
• Windows Media Photo (WMP)
Demonstration: Displaying Images in WPF
In this demonstration, you will see how to:
• Display an image by using the Image class
• Display an image as a brush by using the ImageBrush
class
• Display an image as a drawing by using the ImageDrawing
class
Encoding and Decoding Images
Decode Encode
BitmapDecoder BitmapEncoder
Rotating, Converting, and Cropping Images
To rotate an image:
• Set the Rotation property on a BitmapImage
To convert an image to a different pixel format:
• Use FormatConverterBitmap
To crop an image:
• Set the Clip property of an Image or use CroppedBitmap
Lesson: Creating 3-D Graphics
• Differences Between 2-D and 3-D
• 3-D Graphics Support in WPF
• What Is a Viewport3D?
• Camera Types for Viewport3D
• Creating Models
• Demonstration: Rendering 3-D Content
Differences Between 2-D and 3-D
New concepts in 3-D:
• Z-axis
• Cameras
• Lights
Similar concepts, but new names:
• Drawings become models
• Brushes become materials
3-D Graphics Support in WPF
Material Camera
Viewport3D
Model3D Light
What is a Viewport3D?
3-D graphics content is encapsulated in a Viewport3D
• Viewport3D is a 2-D visual element
• Provides a viewport into a 3-D scene
• Contains 3-D models
<Canvas Width="300" Height="200">
<Viewport3D ClipToBounds="True"
Width="150" Height="150"
Canvas.Left="0" Canvas.Top="10">
...
</Viewport3D>
</Canvas>
Camera Types for Viewport3D
Create a camera to specify the point of view for a 3-D scene
Perspective Orthographic
<PerspectiveCamera <OrthographicCamera
FieldOfView="45" LookDirection="-1.0 -1 -4"
LookDirection="-1.0 -1 -4" Position="2 2 4"
Position="2 2 4" UpDirection="0 1 0"
UpDirection="0 1 0" /> Width="3.5" />
Creating Models
• Use models to define the shape of your 3-D objects
• Use MeshGeometry3D classes to define positions and
triangle indices
<MeshGeometry3D
Positions="2 0 0, 2 2 0, -2 0 0, -2 2 0"
TriangleIndices="0 1 2, 3 2 1" />
Y
1
220
2 0
-2 0 0 200
X
Demonstration: Rendering 3-D Content
In this demonstration, you will see how to:
• Review triangle geometry
• Create a rectangle
• Move the PerspectiveCamera
Lesson: Manipulating the 3-D Environment
• Specifying Materials for a 3-D Model
• Specifying Light for a 3-D Model
• Demonstration: Transforming a 3-D Model
• Demonstration: Animating a 3-D Model
Specifying Materials for a 3-D Model
Use any Material-derived classes on your model:
• DiffuseMaterial
• SpecularMaterial
• EmissiveMaterial
Use materials to define the surface characteristics and
texture of a 3-D object
<GeometryModel3D.Material>
<DiffuseMaterial
Brush="CornflowerBlue">
...
Specifying Light for a 3-D Model
Use any Light-derived classes in your model:
• AmbientLight
• DirectionalLight
• PointLight
• SpotLight
Use lights to make the surfaces of your models visible
<ModelVisual3D>
...
<AmbientLight Color="#404040" />
<DirectionalLight Color="#C0C0C0"
Direction="2 -3 -1" />
...
Demonstration: Transforming a 3-D Model
In this demonstration, you will see how to:
• Make a geometry a resource
• Create a cube by using transforms
Demonstration: Animating a 3-D Model
In this demonstration, you will see how to:
• Make a Storyboard
• Rotate a cube continuously by using DoubleAnimation
Lesson: Adding Multimedia
• WPF Support for Multimedia
• Media Playback Modes
• Displaying Media by Using a MediaElement
• Controlling the Operation of a MediaElement
• Playing Media by Using a MediaPlayer
WPF Support for Multimedia
WPF supports the playback of audio and video media by
using:
• MediaElement
• MediaPlayer
Sound
Video
Media Playback Modes
Set the Clock property on MediaElement and
MediaPlayer to specify the media playback mode
• Independent mode
• Clock mode
Displaying Media by Using a MediaElement
To play media by using a MediaElement:
<StackPanel ... >
<MediaElement Source="videos\bear.wmv" />
</StackPanel>
Controlling the Operation of a MediaElement
Control how the MediaElement behaves by using:
• LoadedBehavior
• UnloadedBehavior
Control playback through the MediaElement by using the
playback methods:
• Play
• Pause
• Stop
• Close
Playing Media by Using a MediaPlayer
MediaPlayer is designed to be used with drawing objects
<VideoDrawing x:Name="videoSurface"
Rect="0,0,300,200" />
XAML
MediaPlayer player = new MediaPlayer();
player.Open(new Uri(@"videos\bear.wmv"));
this.videoSurface.Player = player;
player.Play();
C#
Lab: Graphics and Multimedia
• Exercise 1: Displaying 2-D Graphics
• Exercise 2: Displaying Images
• Exercise 3: Displaying 3-D Graphics
• Exercise 4: Playing Video Clips
Logon information
Virtual machine 6460A-LON-DEV-08
User name Student
Password Pa$$w0rd
Estimated time: 60 minutes
Lab Review
• How do you define an ImageBrush as background to
another element?
• How do you use a VisualBrush to render a Path?
• Which object do you need to assign a camera to in order
to display a 3-D model?
• What property of the AxisAngleRotation3D class do you
need to target to cause a model to rotate?
• How do you stop a MediaElement from playing back the
source media after it is loaded?
Module Review and Takeaways
• Review Questions
• Common Issues and Troubleshooting Tips
• Best Practices
• Tools
