C# WPF How To: Rotate An Image Control In a Flow Document
Windows Presentation Foundation (WPF) applications divide documents into two different categories, "Flow Documents" and "Fixed Documents".
The Flow document class is a document that is optimized for viewing an readability in which ease of reading is the primary function of the document. It works a little like HTML in which you can add block level and inline level child elements in to the document in order to achieve a document layout that automatically resizes and reflows based on the medium that is viewing the content.
This post goes over what it takes to roate images in your flow document so you don't have to explicitly lay our your flow document in landscape orientation for full page size images.
I had been asked to work on a WPF based application for a client that would print a report of information gained based on user selections.
Reports in the application include all of the tabulated data for each "Installation" slection as well as the image that is linked to that installation. These images are based on CAD drawings, and so they need to be as large as possible in order to fully express all of the detail that is required to view all of the intricacies of the image.
Image controls are, in essense, UIElements, which are not allowed to be added to the "top level" of a flow document. We require use of a BlockUIContainer class to put any UIElement controls in our flow document.
This snippet shows how to insert any UIElement into a flowdocument. The image below shows the application output.
As you can see, we've got an image in our flow document. It's on the page in a portrait-style orientation, though, so we're not using the full page when outputting our image. This isn't good for printing as we would like to have as much information displayed from our image as possible.
So, what if we rotate our image? You first may think about rotating the Image control in place after we set our source. The method of performing this rotation is shown below, and the picture after code is the application output.
So now we've rotated our image, but there's a big problem. The image itself is out of the view of the Flow Document! So if rotating the image control in our BlockUIContainer isn't the correct solution, what other solutions do we have?
Well, there is one more way in which we could rotate our image. We could provide a TransformedBitmap operation on our BitmapImage, essentially rotating the image before our FlowDocument has a chance to deal with it and work its paginating magic. The code used to supply a TransformedBitmap is below. And the image below the code is the output.
Aha! As you can see we have a fully rotated image that has been successfully processed by the FlowDocument paginator and margin handling. What you see on the preview is what you should see on the document, if you so choose to print it.
Let me know if this blog helped you out by posting a comment below. It's always good to hear feedback if it ever comes.