Module 10 WPF 2-D Graphics, Multimedia, and Printing
description
Transcript of Module 10 WPF 2-D Graphics, Multimedia, and Printing
![Page 1: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/1.jpg)
Module 10
WPF 2-D Graphics, Multimedia, and
Printing
![Page 2: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/2.jpg)
Module Overview
• Creating 2-D Graphics
• Displaying Images
• Adding Multimedia
• Creating and Printing Documents
![Page 3: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/3.jpg)
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
![Page 4: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/4.jpg)
2-D Graphics Support in WPF
ShapesShapes
RectangleRectangle
EllipseEllipse
LineLine
PathPath
EllipseEllipse
PenPen
BrushBrush
GeometryGeometry
![Page 5: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/5.jpg)
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" />
![Page 6: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/6.jpg)
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" />
![Page 7: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/7.jpg)
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
![Page 8: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/8.jpg)
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
![Page 9: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/9.jpg)
Lesson 2: Displaying Images
• WPF Imaging Components
• Demonstration: Displaying Images in WPF
• Encoding and Decoding Images
• Rotating, Converting, and Cropping Images
![Page 10: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/10.jpg)
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)
![Page 11: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/11.jpg)
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
![Page 12: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/12.jpg)
Encoding and Decoding Images
DecodeDecode
BitmapDecoder
EncodeEncode
BitmapEncoder
![Page 13: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/13.jpg)
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
![Page 14: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/14.jpg)
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
![Page 15: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/15.jpg)
SoundSound
WPF Support for Multimedia
WPF supports the playback of audio and video media by using:
• A MediaElement control
• A MediaPlayer object
VideoVideo
![Page 16: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/16.jpg)
Media Playback Modes
Set the Clock property on MediaElement and MediaPlayer to specify the media playback mode
• Independent mode
• Clock mode
![Page 17: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/17.jpg)
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>
![Page 18: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/18.jpg)
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
![Page 19: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/19.jpg)
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#
![Page 20: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/20.jpg)
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
![Page 21: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/21.jpg)
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
![Page 22: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/22.jpg)
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>
![Page 23: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/23.jpg)
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
![Page 24: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/24.jpg)
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
![Page 25: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/25.jpg)
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
![Page 26: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/26.jpg)
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
![Page 27: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/27.jpg)
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
![Page 28: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/28.jpg)
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
![Page 29: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/29.jpg)
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.
![Page 30: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/30.jpg)
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?
![Page 31: Module 10 WPF 2-D Graphics, Multimedia, and Printing](https://reader030.fdocuments.net/reader030/viewer/2022033102/56813a44550346895da2343d/html5/thumbnails/31.jpg)
Module Review and Takeaways
• Review Questions
• Common Issues and Troubleshooting Tips
• Best Practices