Step 2 of 3: Adding Content to the Book Control

In this step you'll add content to the C1Book control in design-time, XAML markup, and code. You'll add standard Microsoft controls and content to create a virtual book with several pages that can be turned. To customize your project and add content to the C1Book control in your application, complete the following steps:

Click once on the C1Book control to select it.
Navigate to the Toolbox and double-click the TextBlock control to add it to the project
In XAML view move the TextBlock’s tag so it is within the C1Book control’s tags
Select the TextBlock in Design view, navigate to the Properties window, and set the following properties:

Text to "Hello World!"
HorizontalAlignment to Center
VerticalAlignment to Center

Switch to XAML view and add two button controls in the markup just after the TextBlock. The markup will appear like the following:

XAML	Copy Code
<c1:C1Book Name="C1Book1" Width="450" Height="300" VerticalAlignment="Center" HorizontalAlignment="Center" IsFirstPageOnTheRight="True" TurnInterval="600"> <TextBox Height="23" HorizontalAlignment="Center" Margin="10,0,0,102" Name="TextBox1" VerticalAlignment="Center" Width="120">Hello World!</TextBox> <Button x:Name="Button1" Content="Last" Height="100" Width="100" Click="Button1_Click"/> <Button x:Name="Button2" Content="Next" Width="150" Height="150" Click="Button2_Click"/> </c1:C1Book>

XAML

Copy Code

<c1:C1Book Name="C1Book1" Width="450" Height="300" VerticalAlignment="Center" HorizontalAlignment="Center" IsFirstPageOnTheRight="True" TurnInterval="600">
    <TextBox Height="23" HorizontalAlignment="Center" Margin="10,0,0,102" Name="TextBox1" VerticalAlignment="Center" Width="120">Hello World!</TextBox>

  <Button x:Name="Button1" Content="Last" Height="100" Width="100" Click="Button1_Click"/>
   <Button x:Name="Button2" Content="Next" Width="150" Height="150" Click="Button2_Click"/>

</c1:C1Book>

This will give the buttons names so they are accessible in code, size the controls, and add event handlers that you will add code for in the next steps.

In Design view, double-click the window to switch to Code view.
In Code view, add the following import statements to the top of the page:

Visual Basic	Copy Code
Imports C1.WPF Imports C1.WPF.Extended

C#	Copy Code
using C1.WPF; using C1.WPF.Extended;

Add the following code just after the page's constructor to add handlers to the Click events:

Visual Basic	Copy Code
Private Sub Button1_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs) Me.C1Book1.CurrentPage = Me.c1book1.CurrentPage - 1 End Sub Private Sub Button2_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs) Me.C1Book1.CurrentPage = Me.c1book1.CurrentPage + 2 End Sub

Visual Basic

Copy Code

Private Sub Button1_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs)
    Me.C1Book1.CurrentPage = Me.c1book1.CurrentPage - 1
End Sub

Private Sub Button2_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs)
   Me.C1Book1.CurrentPage = Me.c1book1.CurrentPage + 2
End Sub

C#	Copy Code
private void Button1_Click(object sender, System.Windows.RoutedEventArgs e) { this.c1Book1.CurrentPage = this.c1Book1.CurrentPage - 1; } private void Button2_Click(object sender, System.Windows.RoutedEventArgs e) { this.c1Book1.CurrentPage = this.c1Book1.CurrentPage + 1; }

Copy Code

private void Button1_Click(object sender, System.Windows.RoutedEventArgs e)
{
   this.c1Book1.CurrentPage = this.c1Book1.CurrentPage - 1;
}
private void Button2_Click(object sender, System.Windows.RoutedEventArgs e)
{
   this.c1Book1.CurrentPage = this.c1Book1.CurrentPage + 1;
}

The buttons will now allow the user to navigate to the last or next page at run time.

Add code to the Window_Loaded event so that it appears similar to the following:

Visual Basic	Copy Code
Private Sub Window1_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded Dim txt1 As New TextBlock txt1.VerticalAlignment = VerticalAlignment.Center txt1.HorizontalAlignment = HorizontalAlignment.Center txt1.Text = "The End." C1Book1.Items.Add(txt1) End Sub

Visual Basic

Copy Code

Private Sub Window1_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
   Dim txt1 As New TextBlock
    txt1.VerticalAlignment = VerticalAlignment.Center
    txt1.HorizontalAlignment = HorizontalAlignment.Center
    txt1.Text = "The End."
   C1Book1.Items.Add(txt1)
End Sub

C#	Copy Code
private void Window_Loaded(object sender, RoutedEventArgs e) { TextBlock txt1 = new TextBlock(); txt1.VerticalAlignment = VerticalAlignment.Center; txt1.HorizontalAlignment = HorizontalAlignment.Center; txt1.Text = "The End."; c1Book1.Items.Add(txt1); }

Copy Code

private void Window_Loaded(object sender, RoutedEventArgs e)

{

    TextBlock txt1 = new TextBlock();

    txt1.VerticalAlignment = VerticalAlignment.Center;

    txt1.HorizontalAlignment = HorizontalAlignment.Center;

    txt1.Text = "The End.";

    c1Book1.Items.Add(txt1);
}

This will add a TextBlock to the C1Book control in code.

Save your project and return to XAML view.
In XAML view, add the following markup just after the <Button x:Name="Button2"/> tag:

XAML	Copy Code
<Grid x:Name="checkers" Background="White" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height=".25" /> <RowDefinition Height=".25" /> <RowDefinition Height=".25" /> <RowDefinition Height=".25" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width=".25" /> <ColumnDefinition Width=".25" /> <ColumnDefinition Width=".25" /> <ColumnDefinition Width=".25" /> </Grid.ColumnDefinitions> <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" Margin="5" /> <Rectangle Fill="Black" Grid.Row="0" Grid.Column="1" Margin="5" /> <Rectangle Fill="Red" Grid.Row="0" Grid.Column="2" Margin="5" /> <Rectangle Fill="Black" Grid.Row="0" Grid.Column="3" Margin="5" /> <Rectangle Fill="Black" Grid.Row="1" Grid.Column="0" Margin="5" /> <Rectangle Fill="Red" Grid.Row="1" Grid.Column="1" Margin="5" /> <Rectangle Fill="Black" Grid.Row="1" Grid.Column="2" Margin="5" /> <Rectangle Fill="Red" Grid.Row="1" Grid.Column="3" Margin="5" /> <Rectangle Fill="Red" Grid.Row="2" Grid.Column="0" Margin="5" /> <Rectangle Fill="Black" Grid.Row="2" Grid.Column="1" Margin="5" /> <Rectangle Fill="Red" Grid.Row="2" Grid.Column="2" Margin="5" /> <Rectangle Fill="Black" Grid.Row="2" Grid.Column="3" Margin="5" /> <Rectangle Fill="Black" Grid.Row="3" Grid.Column="0" Margin="5" /> <Rectangle Fill="Red" Grid.Row="3" Grid.Column="1" Margin="5" /> <Rectangle Fill="Black" Grid.Row="3" Grid.Column="2" Margin="5" /> <Rectangle Fill="Red" Grid.Row="3" Grid.Column="3" Margin="5" /> </Grid> <Grid x:Name="checkers2" Background="White" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height=".25" /> <RowDefinition Height=".25" /> <RowDefinition Height=".25" /> <RowDefinition Height=".25" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width=".25" /> <ColumnDefinition Width=".25" /> <ColumnDefinition Width=".25" /> <ColumnDefinition Width=".25" /> </Grid.ColumnDefinitions> <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" Margin="5" /> <Rectangle Fill="Black" Grid.Row="0" Grid.Column="1" Margin="5" /> <Rectangle Fill="Red" Grid.Row="0" Grid.Column="2" Margin="5" /> <Rectangle Fill="Black" Grid.Row="0" Grid.Column="3" Margin="5" /> <Rectangle Fill="Black" Grid.Row="1" Grid.Column="0" Margin="5" /> <Rectangle Fill="Red" Grid.Row="1" Grid.Column="1" Margin="5" /> <Rectangle Fill="Black" Grid.Row="1" Grid.Column="2" Margin="5" /> <Rectangle Fill="Red" Grid.Row="1" Grid.Column="3" Margin="5" /> <Rectangle Fill="Red" Grid.Row="2" Grid.Column="0" Margin="5" /> <Rectangle Fill="Black" Grid.Row="2" Grid.Column="1" Margin="5" /> <Rectangle Fill="Red" Grid.Row="2" Grid.Column="2" Margin="5" /> <Rectangle Fill="Black" Grid.Row="2" Grid.Column="3" Margin="5" /> <Rectangle Fill="Black" Grid.Row="3" Grid.Column="0" Margin="5" /> <Rectangle Fill="Red" Grid.Row="3" Grid.Column="1" Margin="5" /> <Rectangle Fill="Black" Grid.Row="3" Grid.Column="2" Margin="5" /> <Rectangle Fill="Red" Grid.Row="3" Grid.Column="3" Margin="5" /> </Grid>

XAML

Copy Code

<Grid x:Name="checkers" Background="White" ShowGridLines="True">

    <Grid.RowDefinitions>

        <RowDefinition Height=".25*" />

        <RowDefinition Height=".25*" />

        <RowDefinition Height=".25*" />

        <RowDefinition Height=".25*" />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width=".25*" />

        <ColumnDefinition Width=".25*" />

        <ColumnDefinition Width=".25*" />

        <ColumnDefinition Width=".25*" />

    </Grid.ColumnDefinitions>

    <Rectangle Fill="Red" Grid.Row="0"  Grid.Column="0" Margin="5" />

    <Rectangle Fill="Black" Grid.Row="0" Grid.Column="1" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="0" Grid.Column="2" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="0" Grid.Column="3" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="1" Grid.Column="0" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="1" Grid.Column="1" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="1" Grid.Column="2" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="1" Grid.Column="3" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="2" Grid.Column="0" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="2" Grid.Column="1" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="2" Grid.Column="2" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="2" Grid.Column="3" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="3" Grid.Column="0" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="3" Grid.Column="1" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="3" Grid.Column="2" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="3" Grid.Column="3" Margin="5"  />

</Grid>

<Grid x:Name="checkers2" Background="White" ShowGridLines="True">

    <Grid.RowDefinitions>

        <RowDefinition Height=".25*" />

        <RowDefinition Height=".25*" />

        <RowDefinition Height=".25*" />

        <RowDefinition Height=".25*" />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width=".25*" />

        <ColumnDefinition Width=".25*" />

        <ColumnDefinition Width=".25*" />

        <ColumnDefinition Width=".25*" />

    </Grid.ColumnDefinitions>

    <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" Margin="5" />

    <Rectangle Fill="Black" Grid.Row="0" Grid.Column="1" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="0" Grid.Column="2" Margin="5"  />

   <Rectangle Fill="Black" Grid.Row="0" Grid.Column="3" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="1" Grid.Column="0" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="1" Grid.Column="1" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="1" Grid.Column="2" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="1" Grid.Column="3" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="2" Grid.Column="0" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="2" Grid.Column="1" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="2" Grid.Column="2" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="2" Grid.Column="3" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="3" Grid.Column="0" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="3" Grid.Column="1" Margin="5"  />

    <Rectangle Fill="Black" Grid.Row="3" Grid.Column="2" Margin="5"  />

    <Rectangle Fill="Red" Grid.Row="3" Grid.Column="3" Margin="5"  />

</Grid>

This markup will add two Grids with multiple Rectangle elements. This markup demonstrates how you can add multiple controls to a page of the C1Book control as long as the controls are all in one panel, such as a Grid or StackPanel.

In this step you completed adding content to the C1Book control. In the next step you'll run the application and observe run-time interactions.