StackPanel with FlowDocumentReader

• Download example - 25.74 KB

Introduction

This is my third article, and is building on my previous two. The previous articles can be found here: 1 and 2. In this article, we will be learning what a FlowDocumentReader is and how we can use it with a StackPanel to add functionality to your WPF applications.

What is a StackPanel used for? A StackPanel allows the developer to stack elements in a specified direction. The direction is defined by the properties within the StackPanel. StackPanels are mostly used within list boxes or combo boxes, but in this example we will use the StackPanel with a FlowDocumentReader control.

What is a FlowDocumentReader, you ask? In a nutshell, a FlowDocumentReader is a control that provides functionality for viewing flow content. It gives the user the option to choose between many viewing modes. This control comes with a scroller and a search feature.

The Code!

First, we will create the DockPanel and add two TextBlocks. We will dock one TextBlock to the top of the DockPanel that will display the Project Euler (pronounced oiler) logo. The other TextBlock is docked on to the bottom, this will show a quote from Leonhard Euler.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Sundeepan's Stack Panel Example">
<DockPanel LastChildFill="True">
<TextBlock
DockPanel.Dock="Top"
Background="White"
TextBlock.FontFamily="Verdana"
TextBlock.FontSize="48"
VerticalAlignment="Center">
<Image
Source="http://projecteuler.net/images/logo.jpg"
Width="287"
Height="67"/>
</TextBlock>
<TextBlock DockPanel.Dock="Bottom"
Background="DarkRed"
Foreground="White" 
FontSize="10">
For since the fabric of the universe is most perfect 
and the work of a most wise Creator,
nothing at all takes place in the universe in which some rule of 
maximum or minimum does not appear. 
- &#169; 1783 Euler  
</TextBlock>
</DockPanel>
</Window> 

Immediately following the last TextBlock, we add a StackPanel and dock it to the left of the DockPanel. Within the freshly added StackPanel, we place an Image of Leonhard Euler. See code below:

<StackPanel
    DockPanel.Dock="Left"
    VerticalAlignment="Center"
    Margin="5">
    <Image
        Source="http://www.pas.rochester.edu/~cline/P235W/Leonhard_Euler_2.jpg"
        Height="223"
        Width="180"/>
</StackPanel>  

We now add a FlowDocumentReader as the last element in the DockPanel. Remember from the previous article Creating a WPF DockPanel using XAML if the LastChildFill="True", the last child added will fill the space that hasn't been occupied by the other children (this child is pretty needy!). In this instance, the FlowDocumentReader will be the last child and it will occupy the rest of the space. See the code below:

 <FlowDocumentReader>
    <FlowDocument>
        <Paragraph>
            <Bold></Bold>
        </Paragraph>
        <Paragraph>
            <Paragraph.FontFamily>Verdana</Paragraph.FontFamily>
            <Paragraph.FontSize>36</Paragraph.FontSize>
            <Bold>About Project Euler</Bold>
        </Paragraph>
        <Paragraph>
            <Paragraph.FontFamily>Verdana</Paragraph.FontFamily>
            <Paragraph.FontSize>18</Paragraph.FontSize>
            <Bold>What is Project Euler?</Bold>
        </Paragraph>
        <Paragraph>
            Project Euler is a series of challenging mathematical/computer 
            programming problems that will require more than just mathematical 
            insights to solve. Although mathematics will help you arrive at 
            elegant and efficient methods, the use of a computer and programming skills 
            will be required to solve most problems.The motivation for starting 
            Project Euler, and its continuation, is to provide a platform for the 
            inquiring mind to delve into unfamiliar areas and learn new concepts 
            in a fun and recreational context.
        </Paragraph>
        <Paragraph>
            <Paragraph.FontFamily>Verdana</Paragraph.FontFamily>
            <Paragraph.FontSize>18</Paragraph.FontSize>
            <Bold>Who are the problems aimed at?</Bold>
        </Paragraph>
        <Paragraph>
            The intended audience include students for whom the basic curriculum 
            is not feeding their hunger to learn, adults whose background was not 
            primarily mathematics but had an interest in things mathematical, 
            and professionals who want to keep their problem solving and mathematics 
            on the edge.
        </Paragraph>
        <Paragraph>
            <Paragraph.FontFamily>Verdana</Paragraph.FontFamily>
            <Paragraph.FontSize>18</Paragraph.FontSize>
            <Bold>Can anyone solve the problems?</Bold>
        </Paragraph>                
        <Paragraph>
            The problems range in difficulty and for many the experience 
            is inductive chain learning. 
            That is, by solving one problem it will expose you to a new concept 
            that allows you to undertake a previously inaccessible problem. 
            So the determined participant will slowly but surely work his/her 
            way through every problem.
        </Paragraph>
    </FlowDocument>
 </FlowDocumentReader> 

Now your app should look like the screenshot above!

History

• 18^th March, 2010: Initial post