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

はじめに

　今回はSilverlightアプリケーションで階層構造の表示・選択などに利用されるコントロールTreeViewコントロールのカスタマイズ方法と、Infragisticsの高機能コントロール群であるNetAdvantage for SilverlightにあるXamDataTreeコントロールのカスタマイズ方法についてそれぞれご説明いたします。

対象読者

　Silverlightを利用したアプリケーション開発に必要となるXAMLやコンテンツモデル、データバインディング、テンプレートなどのSilverlightの基礎的な知識を有する方。

　SilverlightにおけるC#,Visual BasicなどのマネージAPIに関する知識をお持ちの方。

必要環境

　Visual Studio 2010もしくはVisual Web Developer 2010 Express Edition、Silverlight 4 Tools for Visual Studioの利用にはNetAdvantage for Silverlight Line of Business、NetAdvantage for .NETまたはNet Advantage Ultimateが必要となります。

　なお、今回のサンプルはWindows 7 Ultimate 64bit環境でVisual Studio 2010 Ultimate SP1とSilverlight 4 Tools for Silverlight、NetAdvantage Ultimate 2010 Volume 3を利用しました。

Silverlightのコントロールカスタマイズ機能

　TreeViewコントロールのカスタマイズにあたり、まずはSilverlightの持つコントロールのカスタマイズ機能についてご紹介しましょう。

　Silverlightではさまざまなレベルでコントロールをカスタマイズするためのシナリオが用意されています。

　Silverlightで用意されているコントロールのカスタマイズシナリオは大きく2つあります。1つは「スタイル」によるカスタマイズ、もう一つは「テンプレート」によるカスタマイズです。

　スタイルとは、Webにおけるスタイルシートのようなイメージで、各コントロールに対してプロパティの値を適用することができるメカニズムです。

　今回はもう一つのカスタマイズ、テンプレートによるカスタマイズを中心にご説明します。

テンプレート

　テンプレートは一言で言ってしまえばコントロールの雛形です。

　コントロールの雛形は視覚的要素と視覚的な動作を定義できます。

　具体的にはそれらの定義はSilverlightでは多くの場合がXAMLのControlTemplateで定義し、各コントロールの各種Templateプロパティへ定義することで従来持っていた視覚的要素・視覚的な動作を再定義できます。

　こういったテンプレートを定義する際に覚えておいたほうがいいトピックについていくつかご紹介しましょう。

コントロールコントラクト

　Silverlightのコントロールはこのような形でビジュアル定義されています。つまり、実装の見た目の定義と内部のロジックが明確に分離されて実装されています。

　これらが分離されていることで、ロジックとは切り離した形で、見た目・振る舞いを設定できます。

　しかし、逆に分離するだけではコントロールを使ってデザインする場合に、もともと定義されていた要素の中で、ロジックの中で利用されているなど、必要となる要素を掌握することが難しくなることもあり、あらかじめこういった視覚要素や振る舞いの部分に対して取り決めを行っています。

　これをコントロールコントラクトといいます。

　コントロールコントラクトでは以下の点について取り決めています。

• コントロールクラスで公開される視覚的表現に利用されるプロパティ
• テンプレートに必要なパーツ
• パーツに関連付けられたテンプレートに必要となるロジック

　これらについて取り決めを行うことで、コントロールの実装に影響を及ぼさないでカスタマイズできます。

Parts and Statesモデル

　さきほどのコントロールコントラクトに加えて、Silverlightでは視覚的構造と視覚的動作をParts and Statesモデルと呼ばれるモデルによって定義を行います。

　先ほどもご説明したとおり、SilverlightのコントロールのカスタマイズはTemplateで行うことが可能ですが、これらのテンプレートはパーツ・状態・状態グループという3つの要素で構成されます。

　ここで言うパーツとは具体的には「コントロール」（正確に言うならばFrameworkElementまたはFrameworkElementの派生クラスのオブジェクト）になります。つまり、各コントロールは複数のコントロールを組み合わせることで視覚的な構造を表現することができます。

　そして、コントロールコントラクトに沿った実装にするのであれば、MSDNやSilverlightのドキュメントを参照します。

　例えばListBoxコントロールの場合、以下のように記述されています。

• 参照：MSDN Silverlight ListBoxクラス

　ご覧いただいたとおり、コントロールのクラス定義の上部にいくつか属性が定義されていますが、1つ取り上げてみるとTemplateVisualStateAttributeという属性はTemplateに実装されているべき状態（VisualState）・状態グループ（VisualStateGroup）を表現しています。

　つまり、ListBoxコントロールはこの属性の記述にあるNameという属性で状態の名前となっており、この名前のStateをコントロールのロジックから呼び出していることを表現しています。

　言い換えるなら、ここに表記されている状態の名前がテンプレートに定義されていなければ、コードは状態の動作を呼び出すことができないため、該当の状態の表現は行われないということになります。