by November 4, 2006 0 comments

Developers have one major drawback that they are notoriously known for. Most
developers have little or no design sense which also translates into the user
experience that their applications get. However, with Windows Vista and .NET
3.0, developers can now start developing applications that take advantage of the
capabilities offered by the system to make their applications look richer.
Windows Presentation Foundation or WPF is the new core stack of .NET 3.0 that
allows this. This article takes a look at the typography and document features
of WPF that you can leverage for your app.

Document balancing
HTML has been around for ages and has become a way to show any kind of content.
However, there are a number of issues that it has not been able to solve. For
instance, you might be using a very high resolution screen and can browse over
to a news site. But because of the layout of the site, you might notice that
your Web page uses only a part of the screen and the rest is filled with white
space. You also cannot flow content into columns that render themselves based on
screen resolution, font size and available application canvas size automatically
when you are using HTML.

Applies To: Vista developers
Learn to use WPF in .NET 3.0 
Primary Link:
Google Keywords: windows presentation foundation

This is where WPF’s FlowDocument Reader element comes into play. This
element can render content automatically based on a number of differentinputs or
properties (either set or detected). For instance, type in the following code
into Notepad and save it as DOC.XAML.

<FlowDocumentReader MinHeight="300" MinWidth="400"
MinZoom="80" MaxZoom="200" ZoomIncrement="10"
Name="Viewer" xmlns=""
<Paragraph>TEST TEXT …</Paragraph>
<Paragraph>TEST TEXT …</Paragraph>
<Paragraph>TEST TEXT …</Paragraph>
<Paragraph>TEST TEXT …</Paragraph>

Make sure you have lots of text in each paragraph and there are a good number
of paragraphs. Now double click on the XAML file to execute it. As you will see,
the XAML viewer opens up a special version of IE that allows you to view the
content. The viewer has features like font size adjustment, page modes, and text
search built in. When you view the content, you will see that the content is
adjusted into columns that span the available space. Not only that, but the
columns also follow the rules you have set (min height, min width, etc.) so that
they render the content correctly. In fact, when you adjust the font size or the
application size or even screen resolution, the content is re-rendered
automatically to fit the application.

Two views of same content with app canvas and
font size changing. Content is automatically rendered into columns &
pages without any code or human intervention

This would be impossible if you do it with HTML. Note that the document
features of WPF allow for all sorts of rich content-including lists, tables,
floaters, figures, images and all the normal font formatting. For instance, to
add a floater element in the content, simply add the following within one of the
paragraph tags:

<Floater Background="LightYellow" BorderThickness="1"
FontStyle="Italic" Width="120" HorizontalAlignment="Right"
Margin="5, 0, 0, 5" Padding="10">
<Paragraph>Some Floater text in the middle</Paragraph>

Rich typography
WPF also lets you create extremely rich typography using the new OpenType fonts.
Unlike TrueType fonts which are basically static bitmaps, OpenType fonts
actually render themselves based on some rules. Each font also has a set of
properties that can be set that allows you to manipulate their behavior, exactly
like you might do with a programmable object. For instance, consider the
following piece of code.

<StackPanel xmlns=""
<RichTextBox FontFamily="Verdana" FontSize="72" />
<TextBlock TextAlignment="Right"> Verdana</TextBlock>
<RichTextBox FontFamily="Palatino LinoType" FontSize="72"
<TextBlock TextAlignment="Right">Palatino LinoType</TextBlock>
<RichTextBox FontFamily="Segoe Script" FontSize="72"
<TextBlock TextAlignment="Right">Segoe Script</TextBlock>

Here, we have defined three rich text box controls-each with a different
font. The first uses the standard TTF Verdana, and the other two use OpenType
fonts “Palatino LinoType” and “Segoe Script”. Save this as Typo. XAML
and run it. You will be able to enter any text into them as expected and the
fonts will render as per their types. Now set properties on the textboxes that
use OpenType fonts to start rendering them differently. For instance, change the
middle textbox to:

<RichTextBox FontFamily="Palatino LinoType"
FontSize="72" Typography.NumeralStyle="OldStyle" />

Two views of same content with app canvas and
font size changing. Content is automatically rendered into columns &
pages without any code or human intervention

This adds a new typography property to the font. Now try entering a few
numbers into this text box and see the difference in the rendering. Add another
property so that the line now looks like

<RichTextBox FontFamily="Palatino LinoType"
Typography.NumeralStyle="OldStyle" Typography.Fraction="Stacked"

Now add not only enter numbers, but also fractions like 1/2, 3/4, 5/6, etc.
They automatically get stacked as requested. Change the code again to look like:

<RichTextBox FontFamily="Segoe Script" FontSize="72"

Now enter some text into the last textbox. You will see that the font
dynamically renders itself based on alphabet that come before or after the
current one. For instance, type in the text “this is so cool and different”
into this box. You will notice that every instance of the letter “o” and “s”
are different and the double-f and the “th” are joined together as they
should be.

We’ve only touched the tip of the very rich capabilities of Vista and its
document and typography features. As developers you now have access to all of
this and can take advantage of them to make your
application richer and better.

Vinod Unny, Enterprise Infotech

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.