TreeView Web サーバーコントロールの概要

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

TreeView Web サーバーコントロールは、目次やファイルディレクトリなど、ツリー構造内の階層データを表示するために使用されます。

このトピックの内容は次のとおりです。

機能
背景
コード例
クラスリファレンス

機能

TreeView コントロールは、次の機能をサポートしています。

コントロールのノードを XML ドキュメントなどの階層データにバインドできる自動データバインディング。
SiteMapDataSource コントロールとの統合によるサイトナビゲーションサポート。
選択可能なテキストまたはハイパーリンクとして表示できるノードテキスト。
テーマ、ユーザー定義のイメージ、およびスタイルを介してカスタマイズできる外観。
TreeView オブジェクトモデルへのプログラムによるアクセス。ツリーの作成、ノードの設定、プロパティの設定などを動的に行うことができます。
クライアント側のサーバーへのコールバックを介したノードの設定 (サポート対象のブラウザを使用する場合)。
各ノードの隣にチェックボックスを表示する機能。

ページのトップへ

背景

TreeView コントロールでは、コントロール内で宣言的に指定される静的データ、コントロールにバインドされるデータ、TreeView コントロールにプログラムによって追加されるデータなど、ユーザーのアクションに応じて数種類のデータを表示できます。

静的データの表示

静的データは、TreeView コントロールの子である TreeNode 要素のコレクションを作成することで TreeView コントロール内に表示できます。これらの子要素は、子ノードとも呼ばれます。

次の例では、3 つのノードを含み、そのうち 2 つが子ノードを持つ TreeView コントロールのマークアップを示します。

<asp:TreeView ID="MyTreeView" Runat="server">
  <Nodes>
    <asp:TreeNode Value="Child1" Expanded="True" Text="1">
      <asp:TreeNode Value="Grandchild1" Text="A" />
      <asp:TreeNode Value="Grandchild2" Text="B" />
    </asp:TreeNode>
    <asp:TreeNode Value="Child2" Text="2" />
    <asp:TreeNode Value="Child3" Expanded="True" Text="3">
      <asp:TreeNode Value="Grandchild1" Text="A" />
    </asp:TreeNode>
  </Nodes>
</asp:TreeView>

TreeView コントロールへのデータのバインド

TreeView コントロールは、IHierarchicalDataSource インターフェイスをサポートするデータソース (XmlDataSource コントロールや SiteMapDataSource コントロールなど) にバインドできます。また、データをバインドする際は、どのフィールドをデータソースから取得するかを完全に制御できます。詳細については、「TreeView Web サーバーコントロールへのデータのバインディング」を参照してください。

TreeNodeCollection を使用したプログラムによるデータの表示

TreeNodeCollection クラスを返す Nodes プロパティにアクセスすることによって、TreeView コントロールにプログラムによってデータを設定できます。TreeNodeCollection は、厳密に型指定された、TreeNode オブジェクトのコレクションです。TreeNode オブジェクトは、TreeNode オブジェクトを含むことができる ChildNodes と呼ばれるプロパティを含むため、TreeNodeCollection クラスは、TreeView コントロールのすべてのノードを表す階層データ構造となります。

ノードコレクションを走査する方法の例については、「Nodes」を参照してください。

TreeView ノードの種類

TreeView コントロールは 1 つ以上のノードで構成されています。ツリー内の各エントリはノードと呼ばれ、TreeNode オブジェクトで表されます。3 種類のノードを次の表で説明します。

ノードの種類	説明
Root	親ノードを持たず、子ノードを 1 つ以上持つノード。
Parent	親ノードを 1 つ持ち、子ノードを 1 つ以上持つノード。
Leaf	子ノードを持たないノード。

通常のツリーにはルートノードは 1 つしかありませんが、TreeView コントロールでは、ツリー構造に複数のルートノードを追加することもできます。これは、単一のメインルートノードを表示せずに項目の一覧を表示する場合 (製品カテゴリの一覧表示など) に便利です。

各ノードには Text プロパティと Value プロパティがあります。Text プロパティの値は、TreeView コントロールに表示されます。一方、Value プロパティは、ノードに関連付けられているポストバックイベントに渡されるデータなど、ノードについての追加データを格納するために使用されます。

TreeView コントロールのノードがクリックされたときに、(ポストバックを介して) 選択イベントを発生させるか、または別のページに移動させることができます。href プロパティが設定されていない場合、ノードがクリックされると SelectedNodeChanged イベントが発生します。このイベントを処理することによりカスタム機能を提供できます。また、各ノードには SelectAction プロパティもあり、ノードの展開または折りたたみなど、ノードがクリックされたときに発生するアクションを指定するために使用できます。ノードの href プロパティに空の文字列 ("") 以外の値を設定すると、ノードがクリックされたとき、選択イベントを発生させるのではなく他のページに移動させることができます。

要求に応じた TreeNode データの設定

データ構造を静的に定義することは実用的ではないことがあります。データは実行時に収集する情報によって異なることがあるためです。データを動的に表示できるように、TreeView コントロールは動的なノード設定をサポートしています。TreeView コントロールでは、要求に応じてデータを設定するように構成されている場合、ユーザーがノードを展開するとイベントが発生します。イベントハンドラでは適切なデータを検索し、ユーザーによってクリックされたノードにデータを設定します。要求に応じて TreeNode オブジェクトにデータを設定するには、ノードの PopulateOnDemand プロパティを true に設定し、TreeNode オブジェクトにデータを設定する TreeNodePopulate イベントハンドラを作成します。

クライアント側からの TreeView ノード設定

ブラウザ機能の構成ファイルで SupportsCallback プロパティが true に設定されているブラウザでは、クライアント側からのノード設定をサポートします。

クライアント側からノードを設定すると、サーバーへのフルポストバックを要求する代わりに、サーバーの TreeNodePopulate イベントをクライアントスクリプトから呼び出すことにより、TreeView コントロールによってノードを設定できます。クライアント側からのノード設定の詳細については、「PopulateNodesFromClient」を参照してください。

クライアントスクリプトの有効化

既定では、上位レベルのブラウザでは、TreeView コントロールのノードの展開/折りたたみ機能はクライアントスクリプトを使用して実行されます。クライアントスクリプトを使用すると、サーバーにポストバックしなくてもコントロールに新しい構成を表示できるため、表示の効率が向上します。

メモ :
クライアントスクリプトがブラウザ内で無効になっている場合や、ブラウザがクライアントスクリプトをサポートしていない場合、TreeView コントロールは下位レベルのモードに戻り、ユーザーによってノードがクリックされるたびにサーバーにポストバックを行います。

TreeView のポストバック

既定では、ブラウザがクライアントスクリプトをサポートしていない場合や EnableClientScript プロパティが false に設定されている場合を除いて、TreeView コントロールはクライアント側で展開/折りたたみ機能を処理します。PopulateNodesFromClient プロパティの設定が true で、ブラウザがクライアントスクリプトをサポートする場合は、TreeView コントロールはページ全体をポストバックするのではなくサーバーからデータを取得します。

TreeView コントロールが選択モードにある場合、ユーザーがノードをクリックするたびに、サーバーへのポストバックが発生し、SelectedNodeChanged イベントが発生します。

通常、TreeView コントロールが選択モードにあるか、ノードが動的に設定されている場合は、ポストバックイベントを処理する必要があります。これは、PopulateOnDemand プロパティまたは PopulateNodesFromClient プロパティが true に設定されているためです。

TreeView コントロールと UpdatePanel コントロールの使用

UpdatePanel コントロールは、ポストバックを使用してページ全体を更新する代わりに、ページの選択された領域を更新するために使用します。TreeView コントロールは UpdatePanel コントロールの内部で使用できますが、次のような制限があります。

TreeView のコールバックは非同期ポストバックと関連付けられている必要があります。関連付けられていなければ、コールバックイベントの検証は失敗します。TreeNode コントロールの PopulateOnDemand プロパティを true に設定すると、コールバックが有効になります。TreeView のコールバックが UpdatePanel コントロールで機能するようにするには、次のいずれかの方法を使用します。
- TreeView コントロールが UpdatePanel コントロールの内部にない場合は、非同期ポストバックの一部でない TreeNode コントロールのコールバックを無効にします。これを行うには、PopulateOnDemand プロパティを false に設定します。
- 非同期ポストバック中にコールバックを登録するすべてのコントロールをプログラムで更新します。たとえば、TreeView コントロールを UpdatePanel コントロールの内部に配置できます。TreeView コントロールを格納している UpdatePanel コントロールが更新される限り、TreeView コントロールが非同期ポストバックの発生元の UpdatePanel コントロール内に配置されている必要はありません。
カスケードスタイルシート (CSS: Cascading Style Sheet) クラスへの参照を使用してスタイルを適用する必要があります。たとえば、property-subproperty 属性を使用して NodeStyle プロパティを設定する代わりに、property-CssClass 属性を使用してスタイルを設定します。同様に、NodeStyle テンプレートを使用してスタイルを設定する場合、テンプレートの CssClass 属性を使用します。
EnableClientScript プロパティは、true (既定値) である必要があります。また、TreeView コントロールに対してコールバックが有効な場合、非同期ポストバックと非同期ポストバックの間に EnableClientScript プロパティを変更することはできません。

UpdatePanel コントロールの使用方法の詳細については、「UpdatePanel コントロールの概要」および「部分ページレンダリングの概要」を参照してください。

TreeNode の表示

各 TreeNode オブジェクトには、次のイメージに示す 4 つの UI 要素が含まれます。これらについて下の表で説明します。

TreeNode の UI 要素

TreeNode UI 要素

項目	説明
展開/折りたたみイメージ	ノードを展開して子ノードを表示できるかどうかを示すオプションのイメージ。既定では、ノードを展開できる場合はプラス記号 (+) として表示され、ノードを折りたためる場合はマイナス記号 (-) として表示されます。
チェックボックス	チェックボックスはオプションで有効にできます。特定のノードをユーザーが選択できるようにする場合に使用します。
ノードイメージ	ノードテキストの隣に表示するノードイメージを指定できます。
ノードテキスト	ノードテキストは TreeNode オブジェクトに表示される実際のテキストです。ノードテキストは、ナビゲーションモードではハイパーリンクとして機能し、選択モードではボタンとして機能します。

TreeView コントロールは、その固有のプロパティの他に、各ノードタイプの TreeNodeStyle コントロールのプロパティをサポートします。これらのスタイルプロパティは、すべてのノードタイプに適用される NodeStyle プロパティをオーバーライドします。

また、TreeView には、すべてのノードのインデントレベルを指定する NodeIndent プロパティもあります。ノードは、TreeView コントロールが表示される側からインデントされます。これは左から右に表示するロケールにとっては左側で、右から左に表示するロケールにとっては右側となります。

また、ノードには、選択したりマウスをノード上に置いたりしたときに適用されるさまざまなスタイルもあります。ノードの Selected プロパティが true に設定されている場合、SelectedNodeStyle プロパティが適用され、これは選択したノードの未選択のスタイルプロパティをオーバーライドします。マウスをノード上に置くと、HoverNodeStyle プロパティが適用されます。TreeNodeStyle プロパティについて次のイメージと表で説明します。

TreeNodeStyle プロパティ

TreeView ノードスタイルグラフィック

ノードプロパティ	説明
NodeSpacing	現在のノード全体と上下の隣接するノードとの間の縦の間隔を指定します。
VerticalPadding	TreeNode テキストの上下に表示される間隔を指定します。
HorizontalPadding	TreeNode テキストの左右に表示される間隔を指定します。
ChildNodesPadding	TreeNode の子ノードの上下の間隔を指定します。
ImageUrl	TreeNode の隣に表示されるイメージへのパスを指定します。

詳細については、「TreeView Web サーバーコントロールの外観と操作性のカスタマイズ」を参照してください。

TreeView ノードに隣接するチェックボックスの表示

TreeView コントロールのもう 1 つのカスタム表示機能として、ShowCheckBoxes プロパティを使用してノードテキストとイメージとの間にチェックボックスを表示できます。チェックボックスを表示すると、ユーザーに複数のノードを一度に選択させることができます。これは、ニュースグループツリーのようなインターフェイスには特に便利で、ユーザーはチェックボックスを使用して複数のニュースグループを一度に選択して購読を申し込むことができます。チェックボックスの使用方法の詳細については、「TreeView Web サーバーコントロールの選択ボックス、ナビゲーションボックス、およびチェックボックス」を参照してください。

ExpandDepth プロパティの使用

既定では、TreeView コントロールは展開されているツリーのノードをすべて表示します。TreeView コントロールは、初期状態で任意の深さを表示するように構成できます。そのためには、ExpandDepth プロパティを、表示するノードレベルを表す数に設定します。たとえば、ExpandDepth プロパティを 2 に設定すると、クライアントでサイトが表示されるとき、初期状態で 2 つのノードレベル、つまり 2 つの子ノードが表示されます。