Module 10

WPF 2-D Graphics, Multimedia, and

Printing

Module Overview

• Creating 2-D Graphics

• Displaying Images

• Adding Multimedia

• Creating and Printing Documents

Lesson 1: 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

Drawing Shapes

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

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> ... <!-- A Triangle. --> <LineSegment Point="10, 300" /> <LineSegment Point="200, 200" />

<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 shape and a Rectangle shape

• Define values for the Stroke and Fill properties

• Create a triangle by using the Path class

Demonstration: Using and Animating Transformations

In this demonstration, you will see how to:

• Add layout and render transformations to a Shape element

• Animate the transformation objects

Lesson 2: 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 control

• 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

BitmapDecoder

EncodeEncode

BitmapEncoder

Rotating, Converting, and Cropping Images

To rotate an image:

• Set the Rotation property on a BitmapImage class

To convert an image to a different pixel format:

• Use FormatConvertedBitmap

To crop an image:

• Set the Clip property of an Image class or use CroppedBitmap

Lesson 3: Adding Multimedia

• WPF Support for Multimedia

• Media Playback Modes

• Displaying Media by Using a MediaElement Control

• Controlling the Operation of a MediaElement Control

• Playing Media by Using a MediaPlayer Object

SoundSound

WPF Support for Multimedia

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

• A MediaElement control

• A MediaPlayer object

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 Control

To play media by using a MediaElement control:

<StackPanel ... ><MediaElement Source="videos\bear.wmv" />

</StackPanel>

<StackPanel ... ><MediaElement Source="videos\bear.wmv" />

</StackPanel>

Controlling the Operation of a MediaElement Control

Control how the MediaElement control behaves by using:

• LoadedBehavior

• UnloadedBehavior

Control playback through the MediaElement control by using the playback methods:

• Play

• Pause

• Stop

• Close

Playing Media by Using a MediaPlayer Object

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#

Lesson 4: Creating and Printing Documents

• What Are Fixed and Flow Documents?

• Defining Fixed and Flow Documents

• Viewing Fixed and Flow Documents

• What Is the XML Paper Specification?

• Demonstration: Printing Documents

• Controlling Print Jobs

• Managing the Print Queue

What Are Fixed and Flow Documents?

Fixed Documents:

• Are static, read-only, portable documents

• Provide WYSIWYG presentation

• Are independent of the display or printer hardware

Flow Documents:

• Are a XAML construct for holding large blocks of textual data

• Provide an optimized viewing and reading experience

• Dynamically adjust and reflow content

• Provide additional viewing features:

• Searching

• Navigation

• Zooming

Defining Fixed and Flow Documents

<FixedDocument> <PageContent> <FixedPage> <TextBlock Text="This is a fixed document." />

<FixedDocument> <PageContent> <FixedPage> <TextBlock Text="This is a fixed document." />

<FlowDocument> <Paragraph> This is a paragraph. </Paragraph> <Paragraph> <Italic>This</Italic> is <Bold>another</Bold> paragraph. This paragraph has more formatting <Span FontFamily="Lucida Handwriting">than the first</Span>. </Paragraph></FlowDocument>

<FlowDocument> <Paragraph> This is a paragraph. </Paragraph> <Paragraph> <Italic>This</Italic> is <Bold>another</Bold> paragraph. This paragraph has more formatting <Span FontFamily="Lucida Handwriting">than the first</Span>. </Paragraph></FlowDocument>

Viewing Fixed and Flow Documents

SearchSearch

ZoomZoom Viewing ModeViewing Mode

Fixed documents:

• Use a DocumentViewer control

• Set the Document property of the control to the FixedDocument instance

SearchSearch

NavigationNavigation

ZoomZoom

Viewing ModeViewing Mode

Flow documents:

• FlowDocumentReader

• FlowDocumentPageViewer and FlowDocumentScrollViewer

• RichTextBox

What Is the XML Paper Specification?

An XPS document:

• Is a package that contains one or more fixed documents

• Contains resources and information required for rendering:

• Fonts (OpenType and TrueType)

• Images (TIFF, PNG, JPEG, and HD Photo for bitmaps)

• Application data

Demonstration: Printing Documents

In this demonstration, you will see how to:

• Create a PrintDialog dialog box and return a PrintQueue instance

• Create an XpsDocumentWriter instance

• Write the document to a PrintQueue instance by using the XpsDocumentWriter class

Controlling Print Jobs

To query printer capabilities:

• Get a PrintCapabilities object for the printer

• Query properties on the PrintCapabilities object

To instruct a printer how to process a print job:

• Get a PrintTicket object for the printer

• Configure properties on the PrintTicket object by using information about the printer capabilities

Managing the Print Queue

To manage jobs on a print queue:

• Create a PrintServer object representing the print server

• Create a PrintQueue object representing the print queue

• Query the status of the queue

• Query the queue for a list of jobs pending

• Invoke methods on the PrintSystemJobInfo class to:

• Add

• Pause

• Resume

• Purge

Lab: Drawing 2-D Graphics

• Exercise 1: Choosing the Appropriate Windows Client Technology

• Exercise 2: Creating the Data Access Layer and User Interface

• Exercise 3: Drawing Shapes, Painting with Brushes, and Applying Effects

• Exercise 4: Adding Images

Logon information

Estimated time: 45 minutes

Lab Scenario

You have been asked to create a new control for the Product Inventory system, which is a Windows Forms application. The control that you have been asked to develop visually graphs the transaction history of any inventory item provided. The control requires a great deal of graphical rendering; therefore, you need to choose the correct design and platform for a proof-of-concept application.

Lab Review

Review Questions

• How do you use a single repeating image as the background of a UI element?

• Which control enables you to add an image to the UI?

Module Review and Takeaways

• Review Questions

• Common Issues and Troubleshooting Tips

• Best Practices