Silverlightでのツリー表示（その1）: 標準TreeViewコントロールとNetAdvantage XamDataTreeコントロール

はじめに

　今回は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, XamDataTreeの利用にはNetAdvantage for Silverlight Line of Business, NetAdvantage for .NETまたはNet Advantage Ultimateが必要となります。

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

TreeViewコントロールについて

　Silverlightにはさまざまなデータを表現するための多くのコントロールが存在しています。今回紹介するTreeViewコントロールはその名前のとおり、階層構造となる各データ・オブジェクトをTree形式で表現することができるコントロールです。

　データ構造の中でも階層構造を持つデータは一般的に複雑な構造となりやすく、整理整頓を意識したデータ作成を行わないと、データ構造の可読性は低くなりやすい傾向にあります。

　こういった、階層構造を持つデータ構造・オブジェクト構造を表現する方法としてTreeViewのようなコントロールを利用することで、ユーザーにとって必要のないデータを一時表示・非表示の制御を行えるようにし、これらの構造の見通しをよくすることができるという効能もあることから、さまざまな場面で利用されます。

　しかし、階層構造を持つデータを取り扱うコントロールのため、データ構造とコントロール内のデータ設定を行うポイントとのマッピング方法をきちんと押さえておくことが重要です。

XamDataTreeコントロールについて

　XamDataTreeコントロールは、Infragisticsで開発されたSilverlight上で利用できる高度なコントロール群であるNetAdvantage for Silverlight LOB, NetAdvantage for .NETもしくはNetAdvantage Ultimateに含まれるコントロールです。

　今回の記事で紹介するこれらのコントロールはInfragisticsのホームページより20日間フル機能を試すことができるトライアル版のダウンロードが可能です。それ以外にも公開されたヘルプやサンプルなどが用意されているので、本記事で興味を持たれた方はぜひダウンロードしてお試しください。

　今回の記事ではSilverlightのSDKに含まれる標準のTreeViewコントロールの利用方法と、XamDataTreeの利用方法を解説し、それぞれどのような特徴があるのかを紹介したいと思います。

コンテンツモデル

　まず、Silverlightのコンテンツモデルのおさらいからはじめましょう。

　Silverlightではユーザーインターフェースとして表示・入力そしてそれらの振る舞いの定義を行うためのさまざまな種類のコントロールが用意されています。

　これらの中から表示機能を持ったものに注目するとテキスト・イメージ・動画など、それぞれ決まった特定のオブジェクトを表示するためのコントロール群や、ユーザーが用意した特定のエンティティクラスやその配列のコレクション、そしてレイアウトコントロールのような、コントロールそのものを組み合わせて配置・表示するためのコントロールなど多岐にわたって用意されています。

　これらの指定されたオブジェクト（コンテンツ）を表示するコントロールということで、これらを総称して「コンテンツモデルのコントロール」と呼んでいます。

　コンテンツモデルと一口に言っても、当然、コントロールによって取り扱うコンテンツの種類は異なります。これらのコンテンツの種類をざっくりと分類すると以下の表のような形になります。

　こういったコンテンツモデルのコントロール群はそれぞれ指定された任意のコンテンツ（データ）を表示するため、それぞれコンテンツプロパティとよばれるプロパティを持っています。

　例えば、TextBoxコントロールであればTextプロパティ、ButtonコントロールであればContentプロパティ、TabItemであればHeaderプロパティとContentプロパティといったプロパティがそれに当たります。

　各コントロールは、コンテンツプロパティに指定された各データを何らかの形で表示するなど取り扱いができるように実装されています。

　今日紹介するTreeViewコントロールや、XamDataTreeコントロールも同様、コンテンツモデルのコントロールになるため、そのコンテンツとして階層構造を持ったオブジェクトを指定することになります。

　しかし、階層構造を持つデータという特性からオブジェクトの各ノードの表現方法や取扱い方法が少々複雑になります。

　まず、TreeViewコントロールやXamDataTreeコントロールが取り扱うコンテンツは「オブジェクトのコレクション」を取り扱うコントロールということになります。

　このオブジェクトのコレクションを取り扱うコントロールの多くが親クラスとして「ItemsControl」というコントロールを継承しています。つまり、ItemsControlは複数のItem（コンテンツ）を取り扱うことができるコントロールで、コレクションに定義された各Itemを表示するための機能を持っています。

　TreeViewコントロールもこのItemsControlを継承しており、それらの機能を有しています。また、XamDataTreeでもその一部の機能は同様に利用できます。

　それではItemsControlについて少し見てみましょう。