Module 10 WPF 2-D Graphics, Multimedia, and Printing

1. Module 10 WPF 2-D Graphics, Multimedia, and Printing

2. Module Overview • Creating 2-D Graphics • Displaying Images • Adding Multimedia • Creating and Printing Documents

3. 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

4. 2-D Graphics Support in WPF Ellipse Shapes Geometry Rectangle Brush Ellipse Pen Line Path

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

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

7. 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

8. 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

9. Lesson 2: Displaying Images • WPF Imaging Components • Demonstration: Displaying Images in WPF • Encoding and Decoding Images • Rotating, Converting, and Cropping Images

10. 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)

11. 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

12. Encoding and Decoding Images Encode Decode BitmapEncoder BitmapDecoder

13. 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

14. 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

15. WPF Support for Multimedia Sound WPF supports the playback of audio and video media by using: • A MediaElement control • A MediaPlayer object Video

16. Media Playback Modes Set the Clock property on MediaElement and MediaPlayer to specify the media playback mode • Independent mode • Clock mode

17. Displaying Media by Using a MediaElement Control To play media by using a MediaElement control: <StackPanel ... > <MediaElement Source="videos\bear.wmv" /> </StackPanel>

18. 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

19. 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#

20. 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

21. What Are Fixed and Flow Documents? Fixed Documents: Flow Documents: • Are static, read-only, portable documents • Provide WYSIWYG presentation • Are independent of the display or printer hardware • 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

22. 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>

23. Viewing Fixed and Flow Documents Fixed documents: Flow documents: • Use a DocumentViewer control • Set the Document property of the control to the FixedDocument instance • FlowDocumentReader • FlowDocumentPageViewer and FlowDocumentScrollViewer • RichTextBox Zoom Viewing Mode Search Zoom Search Navigation Viewing Mode

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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.

30. 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?

31. Module Review and Takeaways • Review Questions • Common Issues and Troubleshooting Tips • Best Practices