Step 2 of 3: Adding Content to the Book Control

In This Topic

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:

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

Imports C1.Silverlight

Imports C1.Silverlight.Extended

· C#

using C1.Silverlight;

using C1.Silverlight.Extended;

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

· Visual Basic

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#

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.

9. Add code to the page's constructor so that it appears similar to the following:

· Visual Basic

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#

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.

10. Save your project and return to XAML view.

11. In XAML view, add the following markup just after the <Button x:Name="btnNext"/> tag:

· XAML to add

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</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.