19章:10 行でズバリ!! コントロールのテンプレート化と再利用 (C#)

    作成2013.04.16

     10 行でズバリ!! コントロールのテンプレート化と再利用 (C#)は下記の参照元情報からほぼ完全な作成方法の説明と解説を参照できます。

  1. 参照元情報
     10 行でズバリ!! コントロールのテンプレート化と再利用 (C#)は
    「10 行でズバリ!! コントロールのテンプレート化と再利用 (C#)」にジャンプする
     作成方法の詳細は上記を参照願います。


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


  3. MyTextbox.slnの実行
    (1)「Express 2012 for Windows Desktop」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)操作画面が表示されます。
    (4)動作確認はありません。
    (6)クローズボックスで終了します。


  4. 新規プロジェクトの作成
    (1)MainWindow.xamlのデザイン設定
     新規プロジェクトを作成すると「デザイナー」にはMainWindow.xamlが自動生成されます。MainWindow.xamlのデザイン設定はVBのMainWindow.xamlのコピー&ペーストで完成します。

    (2) MainWindow.xaml.csコード
     基本コードが自動生成されます。


  5. MainWindow.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. MainWindow.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. MainWindow.xaml.csの全コード
    using System.Windows;
    namespace MyTextbox
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
            private void Button_Click_1(object sender, RoutedEventArgs e)
            {
                MessageBox.Show(this.textbox1.Text);
            }
        }
    }
    


  8. MainWindow.xaml.csコードの解説


    感想:
    (1) private void Button_Click_1は、デザイナーから発生させる必要がありそうです。
    (2)VB とC#同じです。







20章:10 行でズバリ!! リスト アイテムの表現 (C#)に行く。

トップページに戻る。