将图像用于 TreeView 控件

项目
10/22/2014

更新：2007 年 11 月

TreeView 控件具有许多不同的外观，从而可以提供灵活的图像自定义以及指定自定义用户界面 (UI) 选项的属性。您可以将图像与 TreeView 控件一起使用来表示节点、连接线以及展开和折叠图标。还可以使用 ImageSet 属性中一组预定义的图像，或者通过设置各个图像属性来使用自定义图像。

TreeView 控件中使用的图像

TreeView 控件的可视化元素包括下列图像：

折叠的节点图像
展开的节点图像
不可展开的图像
根节点图像
父节点图像
叶节点图像

除了这些图像以外，将 ShowLines 属性设置为 true 时，TreeView 控件还使用图像创建连接 TreeView 项的线条。可以使用 TreeView 控件上的可用“行图标生成器”对话框生成这些线条（选中“显示行”属性时），也可以自行创建图像。请注意，不需要自定义每个图像属性。如果没有显式设置图像属性，则使用内置的默认图像。

使用图像集中的默认图像

为 TreeView 控件分配图像的最简单方法是使用 ImageSet 属性。内置于 TreeView 控件中的图像集包括树中用于 MSN Messenger、Microsoft Outlook、Windows Explorer 和 Microsoft Windows 帮助的常见图像资源集。图像集还包括几种项目符号样式。

下面的代码示例演示使用 Windows XP 文件资源管理器图像集的 TreeView 控件。

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

有关可用于 TreeView 控件的图像集的完整列表和说明，请参见 ImageSet 属性。

使用自定义折叠和展开图像

可以使用图像来指示可展开的节点、可折叠的节点或者不展开或折叠的节点。可以在大多数图形程序中针对此目的创建图像。

若要为特定的节点类型分配图像，可以为相应的属性分配要使用的图像文件的位置。这些属性包括：ExpandImageUrl、CollapseImageUrl 和 NoExpandImageUrl。下面的示例设置这些属性，以自定义网站的 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 控件公开三种 TreeNode 类型的属性样式：根节点、父节点和叶节点。这些样式分别为 RootNodeStyle、ParentNodeStyle 和 LeafNodeStyle 属性。每种属性都可用来为应用于该节点类型的属性定义一个 ImageUrl 值。这些图像呈现在节点文本的左侧。通过使用 ImageUrl 属性，每个 TreeNode 类型可以有选择地重写其节点类型的默认图像。

下面的示例演示如何分配属性。

<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”将星号 (Star.gif) 作为节点图像，而不是将使用 LeafNodeStyle 属性分配的图像作为节点图像。

      <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		在树结构中只有一个根节点并且该根节点是叶节点时，显示在根节点旁边的线条图像。
Dashminus.gif		在树结构中只有一个根节点时，显示在根节点旁边以指示该根节点已展开的减号 (-) 图像。
Dashplus.gif		在树结构中只有一个根节点时，显示在根节点旁边以指示该根节点已折叠的加号 (+) 图像。
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 的默认文件夹中。可以更改此文件夹的名称，并且可以编辑由“行图标生成器”生成的图像。如果创建自定义图像，请使用与前面表中相同的命名约定来命名这些图像。为了帮助您创建自定义图像，可以使用“行图标生成器”来创建随后可以编辑和自定义的图像。