ExtendedLibrary for WPF/Silverlight
手順 2：コンテンツの追加
Book > Book for Silverlight クイックスタート > 手順 2：コンテンツの追加

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

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

  2. ツールボックスに移動し、TextBlock コントロールをダブルクリックしてプロジェクトに追加します。 XAML ビューで、C1Book コントロールのマークアップ内に TextBlock コントロールが追加されたことがわかります。

  3. ［オブジェクトとタイムライン］ウィンドウで TextBlock を選択し、次のプロパティを設定します。

    • ［Text］を「Hello World!」に設定します。

    • ［HorizontalAlignment］を Center に設定します。

    • ［VerticalAlignment］を Center に設定します。

  4. ［オブジェクトとタイムライン］ウィンドウで C1Book を選択し、ツールボックスに移動します。［ボタン］項目を２回ダブルクリックして、ページに２つのボタンを追加します。

  5. XAML ビューで、これらの Button コントロールのマークアップを更新します。次のようになります。

    XAML
    コードのコピー 
    <Button x:Name="btnLast" Content="前へ" Height="100" Width="100" Click="btnLast_Click"/>
<Button x:Name="btnNext" Content="次へ" Width="150" Height="150" Click="btnNext_Click"/>

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

  6. ［プロジェクト］ウィンドウで［MainPage.xaml］項目を展開し、コードファイル（MainPage.xaml.cs または MainPage.xaml.vb）をダブルクリックします。

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

    コードのコピー 
    Imports C1.Silverlight
Imports C1.Silverlight.Extended
    コードのコピー 
    using C1.Silverlight;
using C1.Silverlight.Extended;

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

    コードのコピー 
    Private Sub btnLast_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs)
    Me.c1book1.CurrentPage = Me.c1book1.CurrentPage - 2
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
    コードのコピー 
    private void btnLast_Click(object sender, System.Windows.RoutedEventArgs e)
{
    this.c1book1.CurrentPage = this.c1book1.CurrentPage - 2;
}
private void btnNext_Click(object sender, System.Windows.RoutedEventArgs e)
{
    this.c1book1.CurrentPage = this.c1book1.CurrentPage + 2;
}

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

  9. ［プロジェクト］ウィンドウで［MainPage.xaml］項目を展開し、コードファイル（MainPage.xaml.cs または MainPage.xaml.vb）をダブルクリックします。

    コードのコピー 
    Public Sub New()
    InitializeComponent()
    Dim txt1 as New TextBlock
    txt1.VerticalAlignment = VerticalAlignment.Center
    txt1.HorizontalAlignment = HorizontalAlignment.Center
    txt1.Text = "終わりです。"
    c1book1.Items.Add(txt1)
End Sub
    コードのコピー 
    public MainPage()
{
    InitializeComponent();
    TextBlock txt1 = new TextBlock();
    txt1.VerticalAlignment = VerticalAlignment.Center;
    txt1.HorizontalAlignment = HorizontalAlignment.Center;
    txt1.Text = "終わりです。";
    c1book1.Items.Add(txt1);
}

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

  1. 次のコードを Page コンストラクタに追加します。

    コードのコピー 
    Public Sub New()
    InitializeComponent()
    Dim txt1 as New TextBlock
    txt1.VerticalAlignment = VerticalAlignment.Center
    txt1.HorizontalAlignment = HorizontalAlignment.Center
    txt1.Text = "終わりです。"
    c1book1.Items.Add(txt1)
End Sub
    コードのコピー 
    public MainPage()
{
    InitializeComponent();
    TextBlock txt1 = new TextBlock();
    txt1.VerticalAlignment = VerticalAlignment.Center;
    txt1.HorizontalAlignment = HorizontalAlignment.Center;
    txt1.Text = "終わりです、E;
    c1book1.Items.Add(txt1);
}

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

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

    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 コントロールにコンテンツを追加しました。次の手順では、アプリケーションを実行し、実行時の操作を確認します。

 

 

Copyright © GrapeCity, Inc. All rights reserved.