TreeView Web サーバー コントロールの外観と操作性のカスタマイズ

更新 : 2007 年 11 月

TreeView コントロールの表示は完全にカスタマイズできるため、広範囲の表示スタイルが可能になります。

TreeView コントロールの外観と操作性をカスタマイズするには、次の操作を行います。

• コントロールのディスプレイと表示に影響する TreeView コントロールのプロパティを指定します。

• 実行時にコントロールで表示される組み込みイメージのセットを選択する ImageSet プロパティを指定します。

• TreeView コントロール内の TreeNode オブジェクトの特定グループの表示および表示特性を制御する個々のイメージ プロパティとスタイル プロパティを指定します。

• Visual Studio の AutoFormat 機能を使用してイメージ プロパティとスタイル プロパティのセットをすべて一度にカスタマイズします。

• アプリケーションの TreeView コントロールの実行時での表示と表示特性を定義する定義済みのテーマまたはスキンを割り当てます。

最上位レイアウトのプロパティ

BackColor プロパティなどの標準サーバー コントロールのプロパティの他に、TreeView コントロールは、TreeView コントロールの外観を正確に制御するプロパティ セットを公開します。

NodeIndent プロパティ

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

NodeWrap プロパティ

NodeWrap プロパティは、各ノードに表示されるテキストが次の行の先頭にラップするかどうか、空間が足りなくなった場合に同じ行で続行するかどうかを指定します。

ShowLines プロパティ

ShowLines プロパティは、子ノードを親ノードに関連付ける線を表示するかどうかを指定します。このプロパティが true に設定されている場合、TreeView コントロールは、LineImagesFolder プロパティによって指定された Web アクセス可能なフォルダで線のイメージを検索します。

TreeNodeStyle プロパティ

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

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

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

TreeNodeStyle プロパティ

Level Styles コレクション

LevelStyles コレクションを使用しても NodeStyle プロパティなどの個別スタイル プロパティを設定できます。LevelStyles コレクションはツリーの特定レベルでノードのスタイルを制御します。コレクションの最初のスタイルは、ツリーの最初のレベルのノードのスタイルに対応します。同様に、コレクションの 2 番目のスタイルは、ツリーの 2 番目のレベルのノードのスタイルに対応することになります。このプロパティは、特定レベルのノードの外観を、これらのノードが子ノードを持つかどうかにかかわらず、同じにする必要がある場合に、コンテンツ スタイルのナビゲーション メニューのテーブルを生成する目的でよく使われます。

メモ :
LevelStyles コレクションを使用して特定レベルのスタイルが定義されている場合、このプロパティによってそのレベルでのノードのルート ノード、親ノード、または葉ノードのスタイル設定がオーバーライドされます。

スタイルの優先順位

スタイル プロパティは、次の優先順位で適用されます。

1. NodeStyle

2. ノード タイプに応じて RootNodeStyle、ParentNodeStyle、または LeafNodeStyle。LevelStyles コレクションが定義されている場合、これはこの時点で適用され、その他のノード スタイルのプロパティはオーバーライドされます。

3. SelectedNodeStyle

4. HoverNodeStyle

AutoFormat

Visual Web Developer などのビジュアル デザイン ツールを使用している場合、TreeView コントロールは AutoFormat 機能を公開します。AutoFormat 機能は、デザイン時に、表示プロパティのセットをコントロールに適用します。これらのプロパティ設定は、以前に設定されたプロパティ値をオーバーライドし、コード デザイナで変更できます。

標準的なスタイル属性の他に、AutoFormat は ImageSet プロパティを TreeView コントロールに含まれている利用可能なイメージ セットの 1 つに設定します。AutoFormat を使用すると、次のようなその他の既知のカスタム ツリーを模倣して TreeView コントロールの外観をすばやく変更できます。

• Outlook の受信トレイ フォルダ

• Microsoft Windows のファイル システム

• MSN Messenger の連絡先一覧

• Outlook Express のニュースグループ リスト

• MSDN の目次

• Windows ヘルプの目次

• よく寄せられる質問 (FAQ)

• Windows のイベント一覧ビュー

一般的なツリー スタイルの他に、AutoFormat 機能は定型化された多数の箇条書きリストを含みます。

AutoFormat はプロパティ セットを 1 つのコントロールに適用する場合には便利ですが、テーマとスキンを使用すると、同じ外観と操作性を Web サイト内の複数の TreeView コントロールに適用できます。詳細については、「ASP.NET のテーマとスキンの概要」を参照してください。

Image プロパティ

TreeView コントロールでは、他の多くのコントロールとは異なり、グラフィック リソースのセットをコントロールに適用する機能を利用できます。イメージを使用して、ノード、展開ボタンと折りたたみボタン、および接続線を表すことができます。

イメージは、ImageSet プロパティを設定することによって、またはカスタム イメージを作成し、個別のイメージ プロパティを設定することによって、TreeView レベルで設定できます。また、TreeNode レベルでイメージを設定して TreeView コントロールの外観をさらにカスタマイズすることもできます。

イメージ セット

TreeView コントロールは、多くの一般的なツリーで使用するイメージと同じ、組み込みイメージ リソースのセットを含みます。利用できる一般的なイメージ セットを次の表に示します。

カスタムのイメージと線

組み込みイメージ リソースを使用する他に、TreeView コントロールに独自のカスタム イメージ リソース セットを定義できます。カスタム イメージ セットを使用するには、2 種類のイメージを作成する必要があります。1 つは、展開可能なノード、折りたたみ可能なノード、および展開も折りたたみも不可能なノードを示すノード イメージです。これらのイメージは Microsoft ペイントなどのプログラムで作成できます。線を使用してノードを接続する場合、一連の線イメージを作成し、ShowLines プロパティを true に設定する必要があります。Visual Web Developer などのビジュアル デザイナを使用している場合、Line Image Creator ツールを使用して線イメージを作成できます。ビジュアル デザイナを使用していない場合は、Microsoft ペイントなどのプログラムを使用して手動で作成する必要があります。

ノード イメージを作成した後は、そのノード イメージを Web サイト内のディレクトリに配置し、TreeView コントロールの次のプロパティを設定してイメージを参照します。

• CollapseImageUrl

• ExpandImageUrl

• NoExpandImageUrl

また、線イメージはフォルダに置き、LineImagesFolder プロパティを線イメージのフォルダを指すように設定する必要があります。

ImageSet プロパティと利用可能なイメージ セットの一覧の詳細については、「ImageSet」を参照してください。

線イメージとすべての TreeView コントロール イメージの一覧の詳細については、「LineImagesFolder」を参照してください。

テーマとスキン

テーマとスキンを使用すると、プロパティのセットを Web サイト内の複数のコントロールに簡単に適用できます。たとえば、MyTheme というテーマを作成し、そのテーマ内に MyTreeView スキンいうスキンを定義した場合、そのスキンを一度だけ定義して多くの TreeView コントロールに適用できます。

詳細については、「ASP.NET のテーマとスキンの概要」を参照してください。

参照

参照

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