この手順では、設計時、XAML マークアップ、およびコードで C1Book コントロールにコンテンツを追加します。標準の Microsoft コントロールおよびコンテンツを追加して、ページめくり可能な複数のページから成る仮想の本を作成します。プロジェクトをカスタマイズしてアプリケーションの C1Book コントロールにコンテンツを追加するには、次の手順に従います。

1. C1Book コントロールをクリックして選択します。

2. ツールボックスに移動し、TextBlock コントロールをダブルクリックしてプロジェクトに追加します。

3. XAML ビューで、TextBlock のタグを C1Book コントロールのタグ内に移動します。

4. デザインビューで TextBlock を選択し、［プロパティ］ウィンドウに移動して、次のプロパティを設定します。

   • ［Text］を「Hello World!」に

   • ［HorizontalAlignment］を Center に

   • ［VerticalAlignment］を Center に

5. XAML ビューに切り替え、マークアップで TextBlock の直後に２つのボタンコントロールを追加します。マークアップは、次のようになります。

   XAML

   コードのコピー

   <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="前へ" Height="100" Width="100" Click="Button1_Click"/> <Button x:Name="Button2" Content="次へ" Width="150" Height="150" Click="Button2_Click"/> </c1:C1Book>

   これは、コードでボタンにアクセスできるように名前を付け、コントロールをサイズ設定し、イベントハンドラを追加します。イベントハンドラには、次の手順でコードを追加します。

6. デザインビューで、ウィンドウをダブルクリックしてコードビューに切り替えます。

7. コードビューで、次の import 文をページの先頭に追加します。

   • Visual Basic
   • C#

   	コードのコピー
   Imports C1.WPF Imports C1.WPF.Extended

   	コードのコピー
   using C1.WPF; using C1.WPF.Extended;

8. 次のコードをページのコンストラクタの直後に追加することで、Click イベントにハンドラを追加します。

   • Visual Basic
   • C#

   	コードのコピー
   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

   	コードのコピー
   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; }

   これで、ユーザーは、実行時にボタンを使用して最終ページや次ページに移動できるようになります。

9. コードを Window_Loaded イベントに追加します。次のようになります。

   • Visual Basic
   • C#

   	コードのコピー
   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 = "終わりです。" C1Book1.Items.Add(txt1) End Sub

   	コードのコピー
   private void Window_Loaded(object sender, RoutedEventArgs e) { TextBlock txt1 = new TextBlock(); txt1.VerticalAlignment = VerticalAlignment.Center; txt1.HorizontalAlignment = HorizontalAlignment.Center; txt1.Text = "終わりです、E; c1Book1.Items.Add(txt1); }

   これにより、コードで C1Book コントロールに TextBlock が追加されます。

10. プロジェクトを保存し、XAML ビューに戻ります。

11. XAML ビューで、<Button x:Name="Button2"/> タグの直後に次のマークアップを追加します。

    XAML

    コードのコピー

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

    このマークアップにより、複数の Rectangle 要素から成る２つのグリッドが追加されます。このマークアップは、C1Book コントロールの１つのページに複数のコントロールを追加する方法を示しています。ただし、Grid、StackPanel などの１つのパネルにすべてのコントロールを置く必要があります。

この手順では、C1Book コントロールにコンテンツを追加しました。次の手順では、アプリケーションを実行し、実行時の操作を確認します。