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 Shapes Rectangle Ellipse Line Path Ellipse Pen Brush Geometry

Drawing Shapes Defined using Height and Width properties Defined using two points

What Are Paths and Geometries? Paths are defined by geometries, which are made up of figures and segments <Path <Path

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

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 element Animate the transformation objects

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.

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

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.

Encoding and Decoding Images Decode BitmapDecoder Encode 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

Sound WPF Support for Multimedia WPF supports the playback of audio and video media by using: A MediaElement control A MediaPlayer object 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 Control To play media by using a MediaElement control:

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 this.videoSurface.Player = player; player.Play(); MediaPlayer player = new MediaPlayer(); player.Open(new this.videoSurface.Player = player; player.Play(); XAML 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 <TextBlock Text="This is a fixed document." /> <TextBlock Text="This is a fixed document." /> This is a paragraph. This is another paragraph. This paragraph has more formatting than the first. This is a paragraph. This is another paragraph. This paragraph has more formatting than the first.

Viewing Fixed and Flow Documents Search Zoom Viewing Mode Fixed documents: Use a DocumentViewer control Set the Document property of the control to the FixedDocument instance Search Navigation Zoom Viewing 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

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.

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

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.