SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

 いきなり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プロパティに設定すると以下のようになります。

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>

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

次のページ
複数コンテンツを保持するコントロールのカスタマイズ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

森 博之(AZPower株式会社)(モリ ヒロユキ)

 Microsoft Azure、.NETテクノロジーを使用したWebサービスのプロダクトアーキテクト。他にも技術記事の執筆やトレーニング、セミナースピーカーを行っている。 Microsoft MVPをDeveloper Technologies、Visual Studio and Development Technologies、Windows Development、Client App Dev、.NET、Silverlight、Visual C#などのコン...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5869 2011/04/14 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング