Extended Library for UWP
コードでのブック内のナビゲーション
Extended Library for UWP > Book for UWP > タスク別ヘルプ > コードでのブック内のナビゲーション
全て展開
すべて折りたたむ

表示されるページは CurrentPage プロパティを使用して設定できますが、TurnPage メソッドを使用して、実行時に現在のページを変更することもできます。詳細については、「ブックナビゲーション」を参照してください。このトピックでは、アプリケーションに２つのボタンを追加します。一方はページをめくって前のページに戻り、もう一方はページをめくって次のページに進みます。

Blend でブックにナビゲーションを追加するには、次の手順に従います。

  1. C1Book コントロールの名前を「c1book1」に設定し、<Extended:C1Book> タグと </Extended:C1Book> タグの間に次の XAML マークアップを追加します。これで、チェッカー盤のような６つのページがアプリケーションに追加されます。

    XAML でマークアップの書き方

    マークアップ
    コードのコピー 
    <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>
  2. ツールボックスに移動し、［ボタン］項目をダブルクリックして、アプリケーションに２つの Button コントロールを追加します。
  3. １つめのボタンを選択し、［プロパティ］ウィンドウに移動して、次のプロパティを設定します。
    • ［Name］を「btn_last」に
    • ［Content］を「&lt;」に
    • ［Height］と［Width］を「48」に
  4. ２つめのボタンを選択し、［プロパティ］ウィンドウに移動して、次のプロパティを設定します。
    • ［Name］を「btn_next」に
    • ［Content］を「&gt;」に
    • ［Height］と［Width］を「48」に
  5. btn_last ボタンをブックの左側に、btn_next ボタンをブックの右側に置いて、ボタンの位置を変更します。
  6. 左ボタンをダブルクリックして、Click イベントを作成します。
  7. デザインビューに戻り、同じ手順を右のボタンで繰り返します。つまり、各ボタンに Click イベントを指定します。
    XAML マークアップは次のようになります。
    マークアップ
    コードのコピー 
    <Button x:Name="btn_last" HorizontalAlignment="Left" Margin="49,223,0,229" Width="48" Height="48" Content="&lt;" Click="btn_last_Click"/>
<Button x:Name="btn_next" HorizontalAlignment="Right" Margin="0,224,49,228" Width="48" Height="48" Content="&gt;" Click="btn_next_Click"/>

    ページは次のようになります。
  8. コードビューに切り替え、次の import 文をページの先頭に追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Imports C1.Xaml.Extended

    C# コードの書き方

    C#
    コードのコピー 
    using C1.Xaml;
using C1.Xaml.Extended;
  9. Click イベントハンドラにコードを追加します。次のようになります。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    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# コードの書き方

    C#
    コードのコピー 
    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);
}}
    このコードは、ボタンのタップによってブックを１ページ前または後にめくります。

ここまでの成果

ブック内のナビゲーションをカスタマイズしました。ブック内のナビゲーションを確認するには、アプリケーションを実行し、右ボタンをタップします。ページめくりアニメーションによって次のページがめくられることがわかります。

左ボタンをタップし、ブックが前のページに戻ることを確認します

 

 

Copyright © MESCIUS, Inc. All rights reserved.