Navigating the Book with Code
In This Topic
You can set the displayed page using the C1Book.CurrentPage property, but you can also use the C1Book.TurnPage method to change the current page at run time. For more information, see Book Navigation. In this topic you'll add two buttons to your application, one that will turn to the previous page and one that will turn to the next page of the book.
To add additional navigation to your book, complete the following steps:
- Set the name of the C1Book control as c1book1 and add the following XAML markup between the <Extended:C1Book> and </Extended:C1Book> tags. This will add six pages that look like checkerboards to your application:
| Markup |
Copy Code
|
<Grid Name="checkers" Background="White" >
<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 Name="checkers2" Background="White">
<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="checkers3" Background="White" >
<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 Name="checkers4" Background="White" >
<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="checkers5" Background="White" >
<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 Name="checkers6" Background="White" >
<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>
|
- Navigate to the Toolbox and double-click the Button item twice to add two Button controls to your application.
- Select the first button, navigate to the Properties window and set the following properties:
- Set Name to "btn_last".
- Set Content to "<".
- Set Height and Width to "48"
- Select the second button, navigate to the Properties window and set the following properties:
- Set Name to "btn_next".
- Set Content to ">".
- Set Height and Width to "48"
- Relocate the buttons by placing the btn_last button to the left of the book, and the btn_next button to the right of the book.
- Double-click the left button to create the Click event.
- Return to Design view and repeat the previous step with the right button so each button has a Click event specified.
The XAML markup will appear similar to the following:
| Markup |
Copy Code
|
<Button x:Name="btn_last" HorizontalAlignment="Left" Margin="49,223,0,229" Width="48" Height="48" Content="<" Click="btn_last_Click"/>
<Button x:Name="btn_next" HorizontalAlignment="Right" Margin="0,224,49,228" Width="48" Height="48" Content=">" Click="btn_next_Click"/>
|
The page should now look similar to the following:
- Switch to Code view and add the following import statements to the top of the page:
| Visual Basic |
Copy Code
|
Imports C1.Xaml.Extended
|
| C# |
Copy Code
|
using C1.Xaml;
using C1.Xaml.Extended;
|
- Add code to the Click event handlers so they look like the following:
| Visual Basic |
Copy Code
|
Private Sub btn_next_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs)
c1book1.TurnPage(True)
End Sub
Private Sub btn_last_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs)
c1book1.TurnPage(False)
End Sub
|
| C# |
Copy Code
|
public MainPage()
{
private void btn_next_Click(object sender, System.Windows.RoutedEventArgs e)
{
c1book1.TurnPage(true);
}
private void btn_last_Click(object sender, System.Windows.RoutedEventArgs e)
{
c1book1.TurnPage(false);
}}
|
This code will turn the book a page forward or back depending on the button tapped.
What You've Accomplished
You've customized navigation in the book. To view the book's navigation, run the application and tap the right button. Notice that the page turns to the next page with a page turning animation:
Tap the left button and observe that the book returns to the previous page.
