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
FieldOfView="45"
LookDirection="-1.0 -1 -4"
Position="2 2 4"
UpDirection="0 1 0" />
<OrthographicCamera
LookDirection="-1.0 -1 -4"
Position="2 2 4"
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