6460A_08

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

ShapesShapes

RectangleRectangle

EllipseEllipse

LineLine

PathPath

EllipseEllipse

PenPen

BrushBrush

GeometryGeometry

Defined using Height and Width properties

<Rectangle Height="50" Width="100" /><Rectangle Height="50" Width="100" />

<Ellipse Height="50" Width="100" /><Ellipse Height="50" Width="100" />

Drawing Shapes

Defined using two points

<Line X1="10" Y1="10" X2="50" Y2="50" /><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> ...  <LineSegment Point="10, 300" /> <LineSegment Point="200, 200" />

<Path ... <PathGeometry> ... <PathFigureCollection> ...  <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

Demonstration: Using and Animating Transformations


• Add layout and render transformations to a Shape

• Animate the transformation objects

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


• 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

DecodeDecode

BitmapDecoderBitmapDecoder

EncodeEncode

BitmapEncoderBitmapEncoder

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

Viewport3DViewport3D

Model3DModel3D LightLight

3-D Graphics Support in WPF

CameraCameraMaterialMaterial

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>

<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

OrthographicOrthographic

<OrthographicCamera LookDirection="-1.0 -1 -4" Position="2 2 4" UpDirection="0 1 0" Width="3.5" />

<OrthographicCamera LookDirection="-1.0 -1 -4" Position="2 2 4" UpDirection="0 1 0" Width="3.5" />

PerspectivePerspective

<PerspectiveCamera FieldOfView="45" LookDirection="-1.0 -1 -4" Position="2 2 4" UpDirection="0 1 0" />

<PerspectiveCamera FieldOfView="45" LookDirection="-1.0 -1 -4" Position="2 2 4" UpDirection="0 1 0" />

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" />

<MeshGeometry3D Positions="2 0 0, 2 2 0, -2 0 0, -2 2 0" TriangleIndices="0 1 2, 3 2 1" />

2 2 02 2 0

2 0 02 0 0-2 0 0-2 0 000

11

22

Y

X


• Review triangle geometry

• Create a rectangle

• Move the PerspectiveCamera

Demonstration: Rendering 3-D Content

• 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

Lesson: Manipulating the 3-D Environment

Specifying Materials for a 3-D Model

Use materials to define the surface characteristics and texture of a 3-D object

<GeometryModel3D.Material> <DiffuseMaterial Brush="CornflowerBlue"> ...

<GeometryModel3D.Material> <DiffuseMaterial Brush="CornflowerBlue"> ...

Use any Material-derived classes on your model:

• DiffuseMaterial

• SpecularMaterial

• EmissiveMaterial

Use any Light-derived classes in your model:

• AmbientLight

• DirectionalLight

• PointLight

• SpotLight

Specifying Light for a 3-D Model

Use lights to make the surfaces of your models visible

<ModelVisual3D>... <AmbientLight Color="#404040" /> <DirectionalLight Color="#C0C0C0" Direction="2 -3 -1" />...

<ModelVisual3D>... <AmbientLight Color="#404040" /> <DirectionalLight Color="#C0C0C0" Direction="2 -3 -1" />...


• Make a geometry a resource

• Create a cube by using transforms

Demonstration: Transforming a 3-D Model


• Make a Storyboard

• Rotate a cube continuously by using DoubleAnimation

Demonstration: Animating a 3-D Model

• 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

Lesson: Adding Multimedia

SoundSound

WPF Support for Multimedia

WPF supports the playback of audio and video media by using:

• MediaElement

• MediaPlayer

VideoVideo

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>

<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" /><VideoDrawing x:Name="videoSurface" Rect="0,0,300,200" />

MediaPlayer player = new MediaPlayer();player.Open(new Uri(@"videos\bear.wmv"));this.videoSurface.Player = player;player.Play();

MediaPlayer player = new MediaPlayer();player.Open(new Uri(@"videos\bear.wmv"));this.videoSurface.Player = player;player.Play();

XAMLXAML

C#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

6460A_08

Documents

Transcript of 6460A_08