TreeView コントロールでのイメージの使用

更新 : 2007 年 11 月

TreeView コントロールは多様な表示形式に対応し、柔軟性の高いイメージのカスタマイズ機能とカスタム ユーザー インターフェイス (UI) オプションを指定できるプロパティが備わっています。TreeView コントロールでは、ノード、ラインの接続、展開アイコン、および折りたたみアイコンを表すときにイメージを使用できます。ImageSet プロパティから事前に定義されたイメージ セットを使用したり、各イメージ プロパティを設定したカスタム イメージを使用したりできます。

TreeView コントロールで使用されるイメージ

TreeView コントロールには、次のビジュアル要素が含まれます。

• 折りたたまれたノードのイメージ

• 展開されたノードのイメージ

• 展開できないイメージ

• ルート ノードのイメージ

• 親ノードのイメージ

• リーフ ノードのイメージ

上記のイメージのほかに、ShowLines プロパティが true に設定されている場合、TreeView コントロールでは TreeView 項目に接続するラインを作成するイメージも使用します。TreeView コントロールで利用できる [ライン イメージ ジェネレータ] ダイアログ ボックスを使用して、このようなラインを生成することもできます ([線の表示] プロパティがオンの場合)。また、カスタムのイメージも作成できます。すべてのイメージ プロパティをカスタマイズする必要はありません。イメージ プロパティが明示的に設定されていない場合、組み込みの既定のイメージが使用されます。

イメージ設定への既定のイメージの使用

TreeView コントロールにイメージを割り当てる最も簡単な方法は、ImageSet プロパティを使用することです。TreeView コントロールに組み込まれているイメージ設定には、MSN Messenger、Microsoft Outlook、エクスプローラ、および Microsoft Windows ヘルプのツリーで共通して使用されるイメージ リソースが含まれます。このリソースには、複数の箇条書きリスト スタイルもあります。

Windows XP ファイル エクスプローラのイメージ設定を使用する TreeView コントロールのコード例を次に示します。

        <asp:TreeView ID="TreeView1" 
        runat="server" 
        DataSourceID="XmlDataSource1" 
        ImageSet= "XPFileExplorer">

TreeView コントロールで使用できるイメージ設定の一覧と説明については、ImageSet プロパティを参照してください。

カスタムの折りたたみと展開のイメージ

展開できるノード、折りたたむことができるノード、または展開または折りたたみできないノードを示すイメージを使用できます。ほとんどのグラフィック プログラムにこの用途のイメージを作成できます。

イメージを特定のノード型に割り当てるには、使用するイメージ ファイルの場所を対応するプロパティに割り当てます。たとえば、ExpandImageUrl、CollapseImageUrl、および NoExpandImageUrl のプロパティなどです。次の例では、これらのプロパティを Web サイトの Images ディレクトリにあるカスタム イメージに設定します。

    <asp:TreeView ID="TreeView1" 
        runat="server" 
        DataSourceID="XmlDataSource1"
            ExpandImageUrl="~/Images/ExpandAll.gif"
            CollapseImageUrl="~/Images/CollapseAll.gif"
            NoExpandImageUrl="~/Images/stop.gif">
    </asp:TreeView>

展開と折りたたみのイメージの描画をオフにするには、ShowExpandCollapse プロパティを false に設定します。

ルート ノート、親ノード、リーフ ノードへのカスタム イメージの使用

各 TreeView コントロールは、ルート ノード、親ノード、およびリーフ ノードで構成できます。ルート ノードは、所属する子ノードがあり、Parent プロパティが null に設定されているノードです。ツリーのトップレベルのノードです。親ノードは、階層の下位に子ノードがある、TreeView コントロールのノード コレクションにあるノードです。リーフ ノードは、子ノードがなく、TreeView コントロールのノード コレクションにあるノードです。

TreeView コントロールは、ルート ノード、親ノード、リーフ ノードという 3 つの TreeNode 型のプロパティ スタイルを表します。それぞれ、RootNodeStyle、ParentNodeStyle、および LeafNodeStyle の各プロパティです。各プロパティを使用して、そのノード型に適用されるプロパティの ImageUrl 値を定義できます。これらのイメージはノード テキストの左側に描画されます。各 TreeNode 型は、ImageUrl プロパティを使用し、ノード型の既定のイメージを選択してオーバーライドできます。

プロパティの割り当て方法の例を次に示します。

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1" >
        <RootNodeStyle ImageUrl="~/Images/root.gif" />
        <ParentNodeStyle ImageUrl="~/Images/parent.gif" />
        <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />
    </asp:TreeView>

単一のツリー ノードについて、指定したノード スタイル イメージをオーバーライドする方法の例を次に示します。描画するときに、ツリー ノード "Page 2" のノード イメージとして、LeafNodeStyle プロパティを使用して割り当てられたイメージではなく、星 (Star.gif) が表示されます。

      <asp:TreeView id="SampleTreeView" 
        runat="server">
          <RootNodeStyle ImageUrl="~/Images/root.gif" />
          <ParentNodeStyle ImageUrl="~/Images/parent.gif" />
          <LeafNodeStyle ImageUrl="~/Images/leaf.gif" />
        <Nodes>
          <asp:TreeNode Value="Home" 
            Text="Home"
            Target="Content" 
            Expanded="True">
            <asp:TreeNode Value="Page 1" 
              Text="Page1"
              Target="Content">
              <asp:TreeNode Value="Section 1" 
                Text="Section 1"
                Target="Content"/>
            </asp:TreeNode>              
            <asp:TreeNode Value="Page 2" 
              Text="Page 2"
              Target="Content"
                ImageUrl="~/Images/star.gif">
            </asp:TreeNode> 
          </asp:TreeNode>
        </Nodes>
      </asp:TreeView>

ライン イメージの使用

TreeView コントロールは、ツリー ノードを描画済みイメージと接続するラインを描画できます。ラインが描画されるのは、ShowLines プロパティが true に設定されている場合です。TreeView コントロールのショートカット メニューの [ライン イメージ ジェネレータ] を使用して、このライン イメージの外観を編集できます。またはカスタム イメージをこのようなライン機能に割り当てることができます。

メモ :
多くの場合、Visual Studio 2005 などのビジュアル デザイン ツールには、ライン イメージを自動的に生成するユーティリティが付属しています。

TreeView コントロールでは、ツリー ノードへの接続に使用するラインを構成する 16 種類のイメージに、特定の名前付け規則を使用しています。ラインの接続を構成する各イメージのファイル名と説明を次の表に示します。

ファイル名	イメージ	説明
Dash.gif		ツリー構造に 1 つのルート ノードのみがあり、そのルート ノードがリーフ ノードの場合、ルート ノードの横に表示されるライン イメージ。
Dashminus.gif		ツリー構造に 1 つのルート ノードのみがあり、そのルート ノードが展開されていることを示す場合、ルート ノードの横に表示されるマイナス記号 (-) イメージ。
Dashplus.gif		ツリー構造に 1 つのルート ノードのみがあり、そのルート ノードが折りたたまれていることを示す場合、ルート ノードの横に表示されるマイナス記号 (+) イメージ。
I.gif		隣接するノードに接続することを示すライン イメージ。
L.gif		リーフ ノードの場合、分岐の最終ノードの横に表示されるライン イメージ。
Lminus.gif		ノードが展開されていることを示す、分岐の最終ノードの横に表示されるライン イメージ。
Lplus.gif		ノードが折りたたまれていることを示す、分岐の最終ノードの横に表示されるライン イメージ。
Minus.gif		ノードが展開されていることを示す、複数のルート ノードを含むツリー構造の最初のルート ノードの横に表示されるマイナス記号イメージ。このイメージには他のラインは含まれず、ルート ノードが折りたたまれた後にのみ表示されます。ページが最初に読み込まれたときは、Rminus.gif イメージが表示されます。
Noexpand.gif		リーフ ノードの横に表示される空白のスペーサ イメージ。このイメージを使用して、テキストを垂直方向に整列できます。
Plus.gif		ノードが折りたたまれていることを示す、複数のルート ノードを含むツリー構造の最初のルート ノードの横に表示されるプラス記号イメージ。このイメージには他のラインは含まれず、ルート ノードが展開された後にのみ表示されます。ページが最初に読み込まれたときは、Rplus.gif イメージが表示されます。
R.gif		ノードがリーフ ノードであることを示す、複数のルート ノードを含むツリー構造の最初のルート ノードの横に表示されるライン イメージ。
Rminus.gif		ノードが展開されていることを示す、複数のルート ノードを含むツリー構造の最初のルート ノードの横に表示されるマイナス記号イメージ。このイメージには他のラインが含まれ、ページが最初に読み込まれたときにのみ表示されます。ルート ノードが折りたたまれると、Minus.gif イメージが表示されます。
Rplus.gif		ノードが折りたたまれていることを示す、複数のルート ノードを含むツリー構造の最初のルート ノードの横に表示されるプラス記号イメージ。このイメージには他のラインが含まれ、ページが最初に読み込まれたときにのみ表示されます。ルート ノードが展開されると、Plus.gif イメージが表示されます。
T.gif		リーフ ノードであることを示す、ツリー構造 (T 字路) の中にあるノードの横に表示されるライン イメージ。
Tminus.gif		ノードが展開されていることを示す、ツリー構造 (T 字路) の中にあるノードの横に表示されるマイナス記号イメージ。
Tplus.gif		ノードが折りたたまれていることを示す、ツリー構造 (T 字路) の中にあるノードの横に表示されるプラス記号イメージ。

ライン イメージ ジェネレータを使用すると、イメージが作成され、TreeLineImages という既定フォルダに格納されます。このフォルダ名は変更できます。また、ライン イメージ ジェネレータで生成されたイメージも編集できます。カスタム イメージを作成する場合、上記の表に示したのと同じ名前付け規則を使用して名前を付けます。カスタム イメージの作成を支援する [ライン イメージ ジェネレータ] を使用してイメージを作成し、編集とカスタマイズを行うことができます。

参照

概念

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

参照

[TreeView ライン イメージ ジェネレータ] ダイアログ ボックス

TreeView

LineImagesFolder