C1RichTextBox : Header/Footer on Every Page

It is common to add headers and footers in your documents and continuing them on every page makes up for its efficient usage too. With this blog, we will discuss how one can add Headers and Footers in RTF documents displayed in ComponentOne RichTextbox for WPF/Silverlight. Before implementing the same, we will quickly have a look in the documentation that what the RichTextBox for Silverlight Quick Start says. Keeping this blog simple and straight forward, lets look at the steps to follow :

Step I) Load a RTF file in C1RichTextBox

Firstly, we will load a simple RTF File in the C1RichTextBox.

var stream = Application.GetResourceStream(new Uri("/" + new AssemblyName(Assembly.GetExecutingAssembly().FullName).Name + ";component/Mark Twain.rtf", UriKind.Relative)).Stream;  
var rtf = new StreamReader(stream).ReadToEnd();  
richTextBox.Document = new RtfFilter().ConvertToDocument(rtf);  
richTextBox.ViewMode = TextViewMode.Print;  

Step II) Add Header and Footer

To add Headers and Footers on every page of the C1RichTextBox, the DataTemplate for each page displayed inside the RichTextBox needs to be modified. This can be done by setting its 'PrintTemplate' property. In the DataTemplate we will the Index property to display a Header/Footer corresponding to the respective page number. (PS : The Index is zero based, you may use a converter if you want it to start at 1)

<Grid.Resources>  
    <DataTemplate x:Key="pageTemplate">  
        <Grid Margin="4">  
            <Grid.Resources>  
                <rtb:ZoomToScaleTransformConverter x:Key="zoomConverter" />  
            </Grid.Resources>  
            <Border BorderThickness="1" BorderBrush="#FF646464" Grid.Row="1" Grid.Column="1" Background="{Binding ViewManager.PresenterInfo.Background}">  
                <Border.Effect>  
                    <DropShadowEffect Opacity="0.3" />  
                </Border.Effect>  
            </Border>  
            <c1:C1LayoutTransformer LayoutTransform="{Binding ViewManager.PresenterInfo.Zoom, Converter={StaticResource zoomConverter}}">  
                <Grid Height="{Binding ViewManager.PresenterInfo.Height}" Width="{Binding ViewManager.PresenterInfo.Width}">  
                    <rtb:C1RichTextPresenter Source="{Binding}" Grid.Row="1" Grid.Column="1" Margin="{Binding ViewManager.PresenterInfo.Padding}"/>  
                    <TextBlock Text="{Binding Index,StringFormat='Header on Page : {0}'}" HorizontalAlignment="Center"  VerticalAlignment="Top" FontWeight="UltraBold"  FontSize="16" Margin="50" Foreground="Red" />  
                    <TextBlock Text="{Binding Index,StringFormat='Footer on Page : {0}'}" HorizontalAlignment="Right"  VerticalAlignment="Bottom" FontStyle="Italic" FontSize="14" Margin="50" Foreground="Green" />  
                </Grid>  
            </c1:C1LayoutTransformer>  
        </Grid>  
    </DataTemplate>  
</Grid.Resources>  
<c1:C1RichTextBox Name="richTextBox" PrintTemplate="{StaticResource pageTemplate}"/>  

As could be seen, no extra coding is required :D All the work is done in the Xaml file.

Conclusion

With the above code you can create a repeated Header and footer on every page displayed in C1RichTextBox. However, you may customize the DataTemplate to suit your application requirements with simple tweaking in C1RichTextBox. Download WPF Sample Download SL Sample For more details on DataTemplate, please read here: http://msdn.microsoft.com/en-us/library/ms589297