New to Telerik UI for WPF? Download free 30-day trial

Getting Started with WPF Book

This article will walk you through defining and using a RadBook control.

Assembly References

In order to use the RadBook control in your projects you have to add references to the following assemblies:

  • Telerik.Windows.Controls
  • Telerik.Windows.Controls.Navigation

  • Telerik.Windows.Data

You can find the required assemblies for each control from the suite in the Controls Dependencies help article.

Adding Telerik Assemblies Using NuGet

To use RadBook when working with NuGet packages, install the Telerik.Windows.Controls.Navigation.for.Wpf.Xaml package. The package name may vary slightly based on the Telerik dlls set - Xaml or NoXaml

Read more about NuGet installation in the Installing UI for WPF from NuGet Package article.

Define a RadBook control

RadBook is an ItemsControl. The pages of the book are represented by the RadBookItem control. RadBookItem is a ContentControl. Below is a basic declaration of RadBook with several pages:

Example 1: Defining a RadBook

<telerik:RadBook Margin="50"> 
    <telerik:RadBookItem Background="Red"> 
        <TextBlock Text="Page 1" FontSize="36"/> 
    </telerik:RadBookItem> 
    <telerik:RadBookItem Background="BlueViolet"> 
        <TextBlock Text="Page 2" HorizontalAlignment="Right" FontSize="36"/> 
    </telerik:RadBookItem> 
    <telerik:RadBookItem Background="RosyBrown"> 
        <TextBlock Text="Page 3" FontSize="36"/> 
    </telerik:RadBookItem> 
    <telerik:RadBookItem Background="Chocolate"> 
        <TextBlock Text="Page 4" HorizontalAlignment="Right" FontSize="36"/> 
    </telerik:RadBookItem> 
</telerik:RadBook> 
This is the result of the above code:

RadBook Getting Started - Step1

Adding content to the pages of the Book

You can add any UIElement as a content of the pages. RadBookItem has a Content property which you can populate with a single root panel which contains the page content.

Example 2: Adding RadBookItems

<telerik:RadBook Margin="50"> 
    <telerik:RadBookItem Background="Red"> 
        <StackPanel> 
            <TextBlock Text="Page 1" FontSize="36"/> 
            <Button Content="Click Me"/> 
        </StackPanel> 
    </telerik:RadBookItem> 
    <telerik:RadBookItem Background="BlueViolet"> 
        <StackPanel> 
            <TextBlock Text="Page 2" HorizontalAlignment="Right" FontSize="36"/> 
            <Image Source="Koala.jpg" Width="320" Height="240"/> 
        </StackPanel> 
    </telerik:RadBookItem> 
    <telerik:RadBookItem Background="RosyBrown"> 
        <TextBlock Text="Page 3" FontSize="36"/> 
    </telerik:RadBookItem> 
    <telerik:RadBookItem Background="Chocolate"> 
        <TextBlock Text="Page 4" HorizontalAlignment="Right" FontSize="36"/> 
    </telerik:RadBookItem> 
</telerik:RadBook> 
RadBook Getting Started - Step2

Setting the initial page

To set the initial page that will be displayed - set the RightPageIndex property:

Example 3: Setting the intially displayed page

<telerik:RadBook Margin="50" x:Name="RadBook1" RightPageIndex="3"> 
    <telerik:RadBookItem Background="Red"> 
        <StackPanel> 
            <TextBlock Text="Page 1" FontSize="36"/> 
            <Button Content="Click Me"/> 
        </StackPanel> 
    </telerik:RadBookItem> 
    <telerik:RadBookItem Background="BlueViolet"> 
        <StackPanel> 
            <TextBlock Text="Page 2" HorizontalAlignment="Right" FontSize="36"/> 
            <Image Source="Koala.jpg" Width="320" Height="240"/> 
        </StackPanel> 
    </telerik:RadBookItem> 
    <telerik:RadBookItem Background="RosyBrown"> 
        <TextBlock Text="Page 3" FontSize="36"/> 
    </telerik:RadBookItem> 
    <telerik:RadBookItem Background="Chocolate"> 
        <TextBlock Text="Page 4" HorizontalAlignment="Right" FontSize="36"/> 
    </telerik:RadBookItem> 
</telerik:RadBook> 
RadBook Getting Started - Step3

Telerik UI for WPF Learning Resources

See Also

In this article