17章:チュートリアル16:コントロールのテンプレート化と再利用(VB)

    作成2013.03.15

  1. 参照元情報
     コントロールのテンプレート化と再利用(Visual Basic ガイド ツアー)
    「コントロールのテンプレート化と再利用」にジャンプする
     作成方法の詳細は上記を参照願います。


  2. アコントロールのテンプレート化と再利用の完成ファイル
     コントロールのテンプレート化と再利用の解説とおりに作業を実施すると、プロジェクトファイル群が完成します。
     完成ファイルは以下からダウンロードできます。
     ダウンロード後は解凍してから使用してください。
      [コントロールのテンプレート化と再利用]をダウンロードする。
     解凍すると「MyTextbox」フォルダーがあります。
    注(1)「MyTextbox」フォルダーの「MyTextbox.sln」ファイルをダブルクリックすると「Microsoft Visual Basic 2010 Express」が起動します。
    注(2)メニューの「ウインド」_「ウインドレイアウトのリセット」で標準に戻ります。
    注(3)「ソリューションエクスプローラ」ウインドウ内の「MainWindow.xaml」をダブルクリックすると「デザイン」と「XAML」が表示されます。
    注(4)メニューの「表示」_「コード」を選択するとコードが表示されます。
    注(5)「LayoutSample.sln」の動作確認は「デバッグ」_「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。


  3. MyTextboxの実行
    (1)「Microsoft Visual Basic 2010 Express」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)MainWindow画面が表示されます。
    (4)赤い枠内に文字を入力してボタンを押すとメッセージボックスが表示されます。
    (5)クローズボックスで終了します。


  4. 新規プロジェクトの作成
    (1)新規プロジェクト
     新規プロジェクトを作成すると「デザイナー」にはとXAMLが自動生成されます。

    (2)XAMLコードの作成
     サンプルのXAMLコードをコピーして、ペーストすると完成します。

    (3) クラスコード
    Class MainWindow
    End Class
    が自動生成されます。

    (4) その他
     サンプルのXAMLコードをコピーして、ペーストすると簡単に完成しますが、内容の詳細が理解できません。できるだけデザイナーを使用して、XAMLコードを自動生成すると理解が深まります。
     ただし、デザイナーの操作だけでは、完全なコードが生成できないようです。最終的にはXAMLコードの仕組みを理解して、コードの修正が必要になるようです。
     学習のため、XAMLコードを少し変更してみました。


  5. XAMLの全コード
    <Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="300">
        <Window.Resources>
            <!-- すべてのテキストボックスに適用されるスタイル -->
            <Style TargetType="TextBox">
                <!-- Templateプロパティの設定 -->
                <Setter Property="Template">
                    <Setter.Value>
                        <!-- テンプレートの定義 -->
                        <ControlTemplate>
                            <Border CornerRadius="5" BorderThickness="5" BorderBrush="Red">
                                <ScrollViewer x:Name="PART_ContentHost"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
    
        <StackPanel>
            <TextBox Width="200" Height="30" Margin="10" x:Name="textbox1" />
            <Button Width="100" Height="30" Click="button1_Click">Button</Button>
        </StackPanel>
    </Window>
    


  6. XAMLの階層構造
    <Window>階層1
        <Window.Resources>階層2-1
            <Style >階層3-1:"TextBox"
                <Setter>階層4-1:"Template"
                    <Setter.Value>階層5-1
                        <ControlTemplate>階層6-1
                            <Border>階層7-1:"Red"
                                <ScrollViewer />階層8-1:"PART_ContentHost"
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
    
        <StackPanel>階層2-2
            <TextBox/>階層3-2
            <Button></Button>階層3-2
        </StackPanel>
    </Window>
    
    (1)XAMLを理解するには、まずXAMLの階層構造を理解する必要があります。(サンプルは上記のようになります。)
    (2)<Window.Resources>階層2-1:プロパティ:ローカルで定義されたリソース ディクショナリを取得または設定します。
    (3)<Style >階層3-1:クラス:型のインスタンスの間で共有できるプロパティの setter を格納します。
    (4)<Setter>階層4-1:クラス:プロパティ値を適用する setter を表します。
    (5)<Setter.Value>階層5-1:プロパティ:Value が適用されるプロパティを取得または設定します。
    (6)<ControlTemplate>階層6-1:クラス:コントロールの複数のインスタンスで共有できる、Controlのビジュアル構造と動作特性を指定します。
    (7) <Border>階層7-1:クラス:別のオブジェクトの周囲に境界線、背景、またはその両方を描画します。
    (8)<ScrollViewer />階層8-1:クラス:表示される他の要素を格納できるスクロール可能な領域を表します。
    (9)"PART_ContentHost"はコンテンツとスクロールの領域です。
    (10)<StackPanel>階層2-2:クラス:単一行に子要素を整列します。行は水平方向または垂直方向にできます。
    (11)<TextBox/>階層3-2:クラス:Windows テキスト ボックス コントロールを表します。
    (12) <Button>階層3-2:クラス:Windows ボタン コントロールを示します。
    (13)階層5-2と階層6-2はグラデーションを設定します。


  7. VBの全コード
    Class MainWindow 
        Private Sub button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
            MessageBox.Show(Me.textbox1.Text)
        End Sub
    End Class
    


  8. VBコードの解説
    (1) MessageBox.Show(Me.textbox1.Text)でテキストボックスの内容をメッセージボックスに表示します。


    感想:
     コントロールのテンプレート化と再利用は、大規模のプログラムでは役にたちそうです。







18章:チュートリアル17:リスト アイテムの表現(VB) に行く。

トップページに戻る。