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
Ellipse
Rectangle
Geometry
Ellipse
Line
Path
Brush
Pen
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 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
Decode
Encode
BitmapDecoder
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
WPF Support for Multimedia
WPF supports the playback of audio and video media by
using:
• A MediaElement control
• A MediaPlayer object
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 Control
To play media by using a MediaElement control:
<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" />
XAML
MediaPlayer player = new MediaPlayer();
player.Open(new Uri(@"videos\bear.wmv"));
this.videoSurface.Player = player;
player.Play();
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." />
<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
Fixed documents:
Flow documents:
• Use a DocumentViewer control
• FlowDocumentReader
• Set the Document property of
the control to the
FixedDocument instance
• FlowDocumentPageViewer
and
FlowDocumentScrollViewer
• RichTextBox
Zoom
Search
Viewing Mode
Search
Navigation
Zoom
Viewing Mode
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
Virtual machine
10262A-GEN-DEV
User name
Student
Password
Pa$$w0rd
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