How To Customize the UI

The following step-by-step tutorial demonstrates how to customize the Document Toolkit user interface controls using Visual Studio 2010. The download link for the complete source code of this tutorial is available at the bottom of this page.

This tutorial extends the How To Add Thumbnails, Navigation and Printing tutorial. Complete that tutorial first before starting.

Note: it is highly recommended to use Expression Blend for UI customization. This tutorials demonstrates how one can manually modify the default control styles in Visual Studio 2010.

1) Open the project created in the How To Add Thumbnails, Navigation and Printing tutorial in Visual Studio 2010.

2) Add a reference to System.Windows.Interactivity.dll, available in the Document Toolkit download.

3) Add a reference to System.Windows.Controls.Toolkit.dll. The assembly is available in the Silverlight Toolkit.

4) First we will customize the look of the thumbnail listbox as shown in the image.
Thumbnails.png

Open the App.xaml and ensure the following XML namespaces are defined:

xmlns:doc="http://schemas.firstfloorsoftware.com/documenttoolkit"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

5) Paste the default ThumbnailListBox style in the resource dictionary. The default Document Toolkit styles are available in the source of this project at http://documenttoolkit.codeplex.com/SourceControl/changeset/view/68817#1429198.

6) The ThumbnailListBox contains a ListBox. Modify the ListBox.ItemTemplate like so:

<ListBox.ItemTemplate>
  <DataTemplate>
    <Grid Margin="4" HorizontalAlignment="Center">
      <Border Background="White" BorderBrush="Black" BorderThickness="1">
        <Image Source="{Binding FixedPageThumbnail}" />
      </Border>
      <TextBlock Text="{Binding PageContent.PageNumber}" Foreground="Red" FontSize="36" Margin="4"
                 HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
    </Grid>
  </DataTemplate>
</ListBox.ItemTemplate>

7) Now we modify the default document viewer style and make it use a WrapPanel instead of the default vertical oriented StackPanel.

Paste the default DocumentViewer style into the App.xaml resource dictionary.

8) Add the following ItemsPanel definition to the ItemsControl named Pages:

<ItemsControl.ItemsPanel>
  <ItemsPanelTemplate>
    <toolkit:WrapPanel />
  </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

Now build and run the project and you'll see the updated layout. This tutorial demonstrates some simple UI changes, you can go a lot further and replace the entire UI as you see fit.

Tutorial source code: CustomizeUI.zip

Last edited Jul 4, 2011 at 7:24 PM by kozw, version 6

Comments

No comments yet.