One new object that deserves special mention is FlowDocument. A FlowDocument acts a bit like content on a Web page. It contains text in various styles that flows across the available space. It can also contain objects such as images or even WPF controls that sit on the page as the text flows around them.

WPF provides three controls to display FlowDocuments: FlowDocumentScrollViewer, FlowDocumentPageViewer, and FlowDocumentReader.

Styles:

Styles let you wrap up a collection of property values in a named package so it's easy to apply the entire set of values to one or more controls. For example, the following XAML snippet defines a style named ButtonStyle that defines font, foreground, background, margin, and width properties for the Button control type.

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Background" Value="LightBlue" />
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="75" />
</Style>

By defining a style in a window's resources, you can easily apply that style to a Button. The following XAML element creates a Button control that uses the ButtonStyle style. The Content attribute sets the control's Content property value (the text it displays) to "Yes."

<Button Style="{DynamicResource ButtonStyle}" Content="Yes" />

Assigning the same style to multiple buttons gives them a common appearance. If you want to change their appearance later, you can simply change the style's definition in a single place and leave the button definitions alone.

A resource dictionary can hold a collection of styles. You can then apply all the styles to a window at once by setting the window's resource dictionary appropriately.

For example, the following code makes the window use the resources defined in the separate file NormalResources.xaml.

<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="NormalResources.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>

By changing the Source attribute's value to a different resource dictionary file, SillyResources.xaml, you can instantly change all the styles used by the window and the controls it contains. This gives you a simple way to implement skinning. Of course, you'll probably want to do this in code rather than by changing the window's XAML so the user can choose the skin—but the idea is the same.

While a style lets you change the appearance of a control by setting property values, a control template lets you change how the control works, by modifying its internal structure. Because changing a control's internals can involve changing its properties, control templates and styles are sometimes confused. To make the difference easier to understand, think about the styles used in the previous section. By setting property values for the buttons, the styles change the buttons' background color, foreground color, size, and even angle of rotation. However, the buttons still behave just as buttons normally do. When the mouse moves over, presses, or releases a button, the button changes appearance accordingly.

Now suppose you wanted to make buttons that have a flat surface with a drop shadow, more rounded corners, and text that extends past the edges. While you cannot use properties or styles to do those things, a control template can do the trick. The basic idea is for the template to define the controls used by the object (in this case, the button) and to determine how it presents its content. The following XAML fragment shows a template that redefines how buttons should work.

<ControlTemplate x:Key="OverflowingButton" TargetType="Button">
<Grid Name="ButtonGrid">
<Rectangle RadiusX="10" RadiusY="10"
Fill="LightBlue" Margin="5" />
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.BitmapEffect>
<DropShadowBitmapEffect />
</Grid.BitmapEffect>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#FFFF0000" />
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="BitmapEffect">
<Setter.Value>
<DropShadowBitmapEffect />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="Button">
<Setter Property="Template"
Value="{StaticResource OverflowingButton}" />
<Setter Property="FontSize" Value="12"/>
<Setter Property="Margin" Value="20"/>
<Setter Property="MinWidth" Value="50" />
<Setter Property="MinHeight" Value="50" /> </Style>

The ControlTemplate is named OverflowingButton and contains a Grid to hold the button's content. The Grid contains a Rectangle with rounded corners. The ContentPresenter in the code is the object that holds the button's text.

The Triggers section indicates how the Button should behave when the mouse is over it. In this example, the code changes the button's Foreground, FontSize, FontWeight, and BitmapEffect properties whenever the user moves the mouse over the control. At the end of the example, the Style tag sets a button's Template property to the OverflowingButton template. After defining the template and style, your program can simply create buttons and they automatically define themselves according to the template. For example, the following code creates a WrapPanel containing three Buttons.

<WrapPanel>
<Button Content="Write Code" />
<Button Content="Debug Code" />
<Button Content="Update Resume" />
</WrapPanel>