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 プロパティ
.gif "TreeView ノード スタイル グラフィック")
ノード プロパティ |
説明 |
|---|---|
現在のノード全体と上下の隣接するノードとの間の縦の間隔を指定します。 |
|
TreeNode テキストの上下に表示される間隔を指定します。 |
|
TreeNode テキストの左右に表示される間隔を指定します。 |
|
TreeNode の子ノードの上下の間隔を指定します。 |
|
TreeNode の隣に表示されるイメージへのパスを指定します。 |
Level Styles コレクション
LevelStyles コレクションを使用しても NodeStyle プロパティなどの個別スタイル プロパティを設定できます。LevelStyles コレクションはツリーの特定レベルでノードのスタイルを制御します。コレクションの最初のスタイルは、ツリーの最初のレベルのノードのスタイルに対応します。同様に、コレクションの 2 番目のスタイルは、ツリーの 2 番目のレベルのノードのスタイルに対応することになります。このプロパティは、特定レベルのノードの外観を、これらのノードが子ノードを持つかどうかにかかわらず、同じにする必要がある場合に、コンテンツ スタイルのナビゲーション メニューのテーブルを生成する目的でよく使われます。
.gif "メモ") メモ : |
|---|
LevelStyles コレクションを使用して特定レベルのスタイルが定義されている場合、このプロパティによってそのレベルでのノードのルート ノード、親ノード、または葉ノードのスタイル設定がオーバーライドされます。 |
スタイルの優先順位
スタイル プロパティは、次の優先順位で適用されます。
ノード タイプに応じて RootNodeStyle、ParentNodeStyle、または LeafNodeStyle。LevelStyles コレクションが定義されている場合、これはこの時点で適用され、その他のノード スタイルのプロパティはオーバーライドされます。
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 コントロールは、多くの一般的なツリーで使用するイメージと同じ、組み込みイメージ リソースのセットを含みます。利用できる一般的なイメージ セットを次の表に示します。
イメージ セット名 |
説明 |
|---|---|
TreeViewImageSet.Contacts |
MSN Messenger のイメージ |
TreeViewImageSet.Faq |
FAQ スタイルのイメージ |
TreeViewImageSet.Inbox |
Outlook 受信トレイのイメージ |
TreeViewImageSet.News |
Outlook Express ニュースグループのイメージ |
TreeViewImageSet.Help |
Microsoft Windows ヘルプのシステム イメージ |
TreeViewImageSet.XPFileExplorer |
Microsoft Windows XP のファイル エクスプローラのイメージ |
カスタムのイメージと線
組み込みイメージ リソースを使用する他に、TreeView コントロールに独自のカスタム イメージ リソース セットを定義できます。カスタム イメージ セットを使用するには、2 種類のイメージを作成する必要があります。1 つは、展開可能なノード、折りたたみ可能なノード、および展開も折りたたみも不可能なノードを示すノード イメージです。これらのイメージは Microsoft ペイントなどのプログラムで作成できます。線を使用してノードを接続する場合、一連の線イメージを作成し、ShowLines プロパティを true に設定する必要があります。Visual Web Developer などのビジュアル デザイナを使用している場合、Line Image Creator ツールを使用して線イメージを作成できます。ビジュアル デザイナを使用していない場合は、Microsoft ペイントなどのプログラムを使用して手動で作成する必要があります。
ノード イメージを作成した後は、そのノード イメージを Web サイト内のディレクトリに配置し、TreeView コントロールの次のプロパティを設定してイメージを参照します。
また、線イメージはフォルダに置き、LineImagesFolder プロパティを線イメージのフォルダを指すように設定する必要があります。
ImageSet プロパティと利用可能なイメージ セットの一覧の詳細については、「ImageSet」を参照してください。
線イメージとすべての TreeView コントロール イメージの一覧の詳細については、「LineImagesFolder」を参照してください。
テーマとスキン
テーマとスキンを使用すると、プロパティのセットを Web サイト内の複数のコントロールに簡単に適用できます。たとえば、MyTheme というテーマを作成し、そのテーマ内に MyTreeView スキンいうスキンを定義した場合、そのスキンを一度だけ定義して多くの TreeView コントロールに適用できます。
詳細については、「ASP.NET のテーマとスキンの概要」を参照してください。