Color Picker Controls

Book

The Book control displays a list of items in the form of an open book. Users can flip the pages of the book to navigate through the list.

To use the Book control, set the ItemsSource or add the collection of elements directly to the Book control in XAML:

CopyPopulating a Book control

<ms:Book ItemsSource="{Binding Photos}" />

CopyPopulating a Book with a fixed set of items

<ms:Book>
  <Image Source="Images/DopefishLives.png" Stretch="Uniform" />
  <Image Source="Images/VikingBarbie.png" Stretch="Uniform" />
  <Image Source="Images/Backtracing.png" Stretch="Uniform" />
</ms:Book>

If the items are not UIElements such as images, you will also typically set the ItemTemplate. You can also use ItemTemplate to customize the appearance of pages:

CopyProviding a data template for items in a Book

<DataTemplate x:Key="PageTemplate">
  <Grid>
    <Border Background="{Binding}" />
    <Image Source="Images/PageBorder_Tassels.png" Stretch="Fill" />
  </Grid>
</DataTemplate>

<ms:Book ItemsSource="{Binding Photos}" 
         ItemTemplate="{StaticResource PageTemplate}" />

Providing a Navigation Interface

The user can navigate through the book by clicking or dragging pages to turn them. You can also supply buttons or other controls for the user to navigate through the book. To do this, use the command properties exposed by the Book instance:

CopyNavigation buttons for a Book control

<!-- The target Book control is named MyBook -->
<Button Content="|&lt;" Width="30" Height="30" HorizontalAlignment="Left" Margin="20" 
        ms:Click.Command="{Binding GoToFirstPageCommand, ElementName=MyBook}" />
<Button Content="&lt;" Width="30" Height="30" HorizontalAlignment="Left" Margin="50" 
        ms:Click.Command="{Binding DecrementPagePairIndexCommand, ElementName=MyBook}" />
<Button Content=">" Width="30" Height="30" HorizontalAlignment="Right" Margin="50" 
        ms:Click.Command="{Binding IncrementPagePairIndexCommand, ElementName=MyBook}" />
<Button Content=">|" Width="30" Height="30" HorizontalAlignment="Right" Margin="20" 
        ms:Click.Command="{Binding GoToLastPageCommand, ElementName=MyBook}" />

Customizing the Appearance of Book Elements

To customize the appearance of page numbers, use the PageNumberTemplate property. The data context of the data template is the page number.

CopyCustomizing the page number display

<ms:IntegerToRomanNumeralConverter x:Key="RomanPageNumberConverter" />

<DataTemplate x:Key="RomanPageNumberTemplate">
  <TextBlock Text="{Binding Converter={StaticResource RomanPageNumberConverter}}" 
             VerticalAlignment="Center" HorizontalAlignment="Center" />
</DataTemplate>

<ms:Book PageNumberTemplate="{StaticResource RomanPageNumberTemplate}" />

To display page numbers in Roman numerals, use the IntegerToRomanNumeralConverter.

For greater control over page number display, use the LeftPageNumberHostStyle and RightPageNumberHostStyle properties. The primary use for these styles is to control the location of the page number (the default is bottom center). The target type for these styles is ContentPresenter.

CopyA style which places the page number at the top right

<Style x:Key="TopRightPageNumberHostStyle" TargetType="ContentPresenter">
  <Setter Property="VerticalAlignment" Value="Top" />
  <Setter Property="HorizontalAlignment" Value="Right" />
  <Setter Property="Margin" Value="20" />
</Style>