CODE Framework: Documents, Printing, and Interactive Document UIs

The CODE Framework WPF features (based on MVVM and MVC concepts) have become very popular amongst .NET developers, thanks to ease of development paired with a high degree of freedom, control and reuse. Another CODE Framework module takes these concepts and extends them into the domain of documents and printing. Many applications use third-party reporting products to create print and report output, and those products certainly have a good reason for existence and aren’t entirely replaced by the CODE Framework Document features. However, the CODE Framework Document features can replace some functionality that would otherwise be handled by reporting packages, and in addition, the CODE Framework Document features add a significant number of new features including the ability to create more naturally flowing documents and printouts and use those not just for print, but also use them as interactive user interfaces.

All CODE Framework Document features follow the standard MVVM/MVC setup of the framework, which means that developers who are already familiar with WPF development know most of what they need to know to use these features to the fullest. Better yet, since all Document features are based on standard WPF features, existing assets can be used on documents and print output. For instance, a WPF third-party control such as a charting control, or an interesting style one might have in a WPF project, can be directly reused for printing. Documents use standard view models as their underlying data. Documents can also directly reuse styles such as colors and fonts and other WPF resource dictionaries. Documents even support theming mechanisms as they are used in other parts of the framework. In other words: The familiar concepts are extended into very sophisticated document and print features! And as always in CODE Framework, these features are completely free and open source.

Following standard CODE Framework patterns, CODE Framework does not reinvent the wheel when it comes to print and document features. Instead, standard WPF features are utilized, extended and made easy to use. In this case, all print features are based on WPF’s document engine, which includes flow documents, document printing, XPS, rich typography, document preview and rendering controls and more. It is a little known fact that WPF includes a very rich document rendering engine. Unfortunately, this engine has not been built specifically for business applications, and thus does not include features such as binding documents to lists of data. For this reason, CODE Framework extends the WPF document engine and provides these types of features. It is also somewhat difficult to handle aspects such as document printing and saving using the standard WPF features. While all the basic building blocks are in place, developers are on their own when it comes to paginating output, handling different paper formats, accounting for margins and much more. Again, CODE Framework remedies the problem and makes the engine very simple to use.

A WPF Flow Document Primer

To fully understand the CODE Framework document features, it is helpful to have an understanding of standard WPF document support. WPF has a complete sub-system dedicated to rendering documents. In simplified terms, you can think of WPF documents as “HTML on steroids.” WPF documents are known as “flow documents” since they dynamically and in real-time “flow” text in various formats. Documents are defined as collections of paragraphs, lists, tables, WPF UI elements and much more. This content is then dynamically laid out (a.k.a. “flown”) for display on screen using various UI controls WPF provides for this purpose. The same content can also be forced into fixed size layouts, which are typically used for printing and to save printouts to files.

What really makes this system powerful is that WPF provides very rich features for layout and typography. This means that flow documents can have very rich formatting, including concepts such as multi-column layouts, scroll-reading, page-flip-reading, advanced paragraph formatting (“perfect layout” is an approach to laying out text that rivals many desktop publishing systems), media support, and more. In addition, since flow documents are really just WPF objects, all WPF UI elements can be embedded into flow documents, which means that any and every WPF object is fair game for use within documents. Of course interactivity is lost in print scenarios, but it can still be very useful when documents are displayed on screen.

Basic document definitions are quite straightforward. The following example shows a simple flow document in WPF:

Of course, you can also fully style documents. Consider the following additions:

Flow documents are not just collections of paragraphs. Instead, documents can be composed out of a variety of elements. In addition to paragraphs, there are lists, tables, figures (which can contain objects such as images as well as others), floaters (elements that are “floating” on the page, such as pull-quotes), block UI containers (can contain any WPF element) and more. Each of those elements can contain other elements. For instance, a Paragraph is itself a composition of multiple inlines. There are different types of inlines, such as line breaks and runs. A run is a section of text with certain attributes, such as font sizes, colors, styles and so forth. Using multiple runs within a paragraph enables rich formatting within paragraphs, as you would find in a Word document.

The flow document engine provides additional features ranging from hyphenation support to the definition of flexibly flowing columns. For instance, the entire flow document can have column widths and column spacing defined and hyphenation enabled, in the following fashion:

It is also noteworthy that the overall layout engine behind flow documents is quite powerful. Not only is there rich support for features such as advanced typography and advanced paragraph layout (such as very advanced justified-text formatting), but the layout engine also understands concepts such as figures (i.e., images) that always float at a position relative to the current content display (screen or print) or elements that always span a certain number of columns. Perhaps you would like a heading that always spans two columns regardless of how many columns there are? No problem. Maybe you would like an image that is always vertically centered in the page on the right edge of the display, regardless of display size and number of columns? No problem either.

A full discussion of all WPF flow document features is beyond the scope of this article (nor is it specific to CODE Framework), but I encourage you to search the web for more information on this topic. One such article is one I wrote for MSDN Magazine a few years ago, which you can find at http://msdn.microsoft.com/en-us/magazine/cc163371.aspx.

By: Markus Egger

Markus is the founder and publisher of CODE Magazine and EPS' President and Chief Software Architect. He is also a Microsoft RD (Regional Director) and the one of the longest (if not THE longest) running Microsoft MVPs (Most Valuable Professionals). Markus is also a renowned speaker and author.

Markus' spends most of his time writing production code. The projects Markus has worked on include efforts for some of the world's largest companies including many Fortune 500 companies. Markus has also worked as a contractor for Microsoft (including the Visual Studio team). Markus has presented at many industry events, ranging from local user groups to major events such as MS TechEd. Markus' written work has been published extensively and in magazine ranging from MSDN Magazine, to Visual Studio Magazine, and of course in Markus' own CODE Magazine and much more. Markus is a supporter of communities in North America, Europe, and sometimes even beyond.

Markus currently focuses on development in .NET (Windows, Web, Windows Phone, and WinRT) as well as Android and iOS. He is passionate about overall application architecture, SOA, user interfaces and general development productivity and building maintainable and reusable systems.

In his spare time, Markus is an avid windsurfer, scuba diver, ice hockey player and world traveler. On a rainy day, he is known to enjoy a good game on his PC or Xbox.

megger@eps-software.com