Silverlightでのツリー表示（その2）: 標準TreeViewコントロールとNetAdvantage XamDataTreeコントロール - UI カスタマイズ編

テンプレートによるカスタマイズの基本

　それでは、早速テンプレートを使った具体的なカスタマイズについて行ってみましょう。

　いきなりTreeViewコントロールのカスタマイズとなると複雑なので、まずは基本的なところで、単一のコンテンツを表示できるコントロールのカスタマイズ方法から復習しましょう。

　単一のコンテンツを表示するコントロールということで、まずはButtonコントロールのTemplateのカスタマイズ方法から順にご紹介します。

単一コンテンツを保持するコントロールのカスタマイズ

　ButtonコントロールのテンプレートはTemplateプロパティに定義されています。

　このTemplateプロパティにControlTemplateオブジェクトをセットすることでButtonコントロールの見た目を変更できます。

　それでは、ButtonコントロールのTemplateを定義してみましょう。

List1　ControlTemplateの定義サンプル[XAML]

<ControlTemplate TargetType="Button">  ……（1）
    <Border x:Name="Background" Background="Red" CornerRadius="3">  ……（2）
        <ContentPresenter x:Name="contentPresenter" />  ……（2）
    </Border>  ……（2）
</ControlTemplate>

　上記はButtonコントロールのTemplateプロパティに適用することができるControlTemplateのサンプルになります。

1. ControlTemplateを定義する場合、最初に対象となるコントロールを定義する必要があります。指定はTargetTypeプロパティに対して行います。今回はButtonコントロールなので、TargetType="Button"を指定します。
2. ControlTemplateは前述したように、視覚的構造と視覚的動作を定義することができます。視覚的構造はコントロールを使って指定します。Border、ContentPresenterという2つのコントロールを配置しています。つまり、Borderを背景に、前面にContentPresenterを配置しています。

　このControlTemplateをButtonコントロールのTemplateプロパティに設定すると以下のようになります。

• サンプルプログラム1：01-ControlTemplate.zip

List2　ControlTemplateの設定[XAML]

<StackPanel x:Name="LayoutRoot" Background="White">
    <Button Margin="5" 
            Name="btnNormal" 
            Content="通常のボタン" />
    <Button Margin="5" Background="Azure" 
            Name="btnCustomButton" 
            Content="テンプレートを加工したボタン">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border x:Name="Background" Background="Red" CornerRadius="3">
                    <ContentPresenter 
                        x:Name="contentPresenter" 
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</StackPanel>

　実行結果は以下のような形になります。

参考）ContentPresenter

　ContentPresenterコントロールは説明のような形でControlTemplateを定義する際、ControlTemplateの中に設定して利用されることを前提としたコントロールです。

　ContentPresenterの主な役割はTemplateを設定された親オブジェクト内に指定されたContentプロパティの内容を適切な形で表示できるようコントロールに変換することを目的としたコントロールです。

　親コントロールのContentプロパティの内容と後述するTemplateBindingを利用してContentPresenter自身のContentプロパティにバインディングします。

　Contentプロパティにバインディングによって設定されたオブジェクトの内容に応じて適切な表示が行えるよう各種コントロールへ変換する役割を持ちます。

　そうすることによって、ControlTemplate内に定義された他のコントロール同様、表示の際に利用され、反映させることが可能です。

TemplateBinding

　このようにSilverlightではコントロールの見た目・振る舞いをTemplateの設定で簡単に加工できます。

　しかし、この状態では実際にコントロールに定義されたプロパティ設定がUIに反映させることができません。

　List2の太字部分を見ていただきますと、ButtonコントロールにはBackgroundプロパティが"Azure"で設定されていますが、実際のテンプレートではBorderコントロールのBackgroundプロパティに"Red"が定義されているため、実際のUI上に表示されている背景色は赤色の背景色が表示されています。

　このように、実際のコントロールに指定されているプロパティ設定をテンプレート内のコントロールに反映させたい場合、TemplateBindingを設定します。

　TemplateBindingはマークアップ拡張で指定できますので、以下のList3のように変更することでコントロールの設定内容をテンプレートに反映させることが可能です。

List3　TemplateBindingの設定[XAML]

<ControlTemplate TargetType="Button">
    <Border x:Name="Background" Background="{TemplateBinding Background}" CornerRadius="3">
        <ContentPresenter 
            x:Name="contentPresenter" 
            HorizontalAlignment="Center" 
            VerticalAlignment="Center" />
    </Border>
</ControlTemplate>

　実行結果は以下のような形になります。