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. Notice in XAML view that the TextBlock control was added within the C1Book control's markup.
Select the TextBlock in the Objects and Timeline window, navigate to the Properties window, and set the following properties:
Text to "Hello World!"
HorizontalAlignment to Center
VerticalAlignment to Center
Select the C1Book in the Objects and Timeline window, navigate to the Toolbox, and double-click the Button item twice to add two button controls to the page.

In XAML view, update the Button controls' markup so that it appears similar to the following:

C#	Copy Code
<Button x:Name="btnLast" Content="Last" Height="100" Width="100" Click="btnLast_Click"/> <Button x:Name="btnNext" Content="Next" Width="150" Height="150" Click="btnNext_Click"/>

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

In the Projects window, expand the MainPage.xaml item and then double-click the code file (MainPage.xaml.vb or MainPage.xaml.cs).

In Code view, add the following import statements to the top of the page:

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

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

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

Visual Basic	Copy Code
Private Sub btnLast_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs) Me.c1book1.CurrentPage = Me.c1book1.CurrentPage - 1 End Sub Private Sub btnNext_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 btnLast_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs)
    Me.c1book1.CurrentPage = Me.c1book1.CurrentPage - 1
End Sub
Private Sub btnNext_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 btnLast_Click(object sender, System.Windows.RoutedEventArgs e) { this.c1book1.CurrentPage = this.c1book1.CurrentPage - 1; } private void btnNext_Click(object sender, System.Windows.RoutedEventArgs e) { this.c1book1.CurrentPage = this.c1book1.CurrentPage + 1; }

Copy Code

private void btnLast_Click(object sender, System.Windows.RoutedEventArgs e)
{
    this.c1book1.CurrentPage = this.c1book1.CurrentPage - 1;
}
private void btnNext_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 page's constructor so that it appears similar to the following:

Visual Basic	Copy Code
Public Sub New() InitializeComponent() 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

Public Sub New()
    InitializeComponent()
    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
public MainPage() { InitializeComponent(); TextBlock txt1 = new TextBlock(); txt1.VerticalAlignment = VerticalAlignment.Center; txt1.HorizontalAlignment = HorizontalAlignment.Center; txt1.Text = "The End."; c1book1.Items.Add(txt1); }

Copy Code

public MainPage()
{
    InitializeComponent();
    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="btnNext"/> tag:

XAML to add

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.