Usando Imagens com o Controle de Exibição de Árvore

Artigo
10/15/2014

O controle TreeView é capaz de várias aparências diferentes, fornecendo personalização de imagem flexível, bem como as propriedades que especificam opções personalizadas da interface do usuário (UI).Você pode usar imagens com o controle TreeView para representar nós, linhas de conexão e expandir e recolher ícones.Você também pode usar um conjunto pré-definido de imagens a partir da propriedade ImageSet, ou usar imagens personalizadas, definindo as propriedades individuais da imagem.

Imagens usadas no controle de Exibição de Árvore

Os elementos visuais de um controle TreeView incluem o seguinte:

Imagens de nós recolhidos
Imagens de nós expandidos
Imagens não expansíveis
Imagens de nó raiz
Imagens de nó pai
Imagens de nó folha

Em adição a essas imagens, o controle TreeView também usa imagens para criar linhas que conectam os itens TreeView quando a propriedade ShowLines é definida como true.Você pode gerar essas linhas usando a caixa de diálogo Gerador de Imagem Linear disponível no controle TreeView (quando a propriedade Mostrar Linhas estiver marcada), ou você pode criar as imagens sozinho.Observe que você não precisa personalizar cada propriedade de imagem.Se uma propriedade de imagem não é explicitamente definida, a imagem interna padrão será usada.

Usando as Imagens Padrão em um Conjunto de Imagem

A maneira mais fácil atribuir imagens a um controle TreeView é usando a propriedade ImageSet.O conjunto de imagem que está embutido no controle TreeView inclui conjuntos de recursos de imagem comuns em árvores usadas com o MSN Messenger, Microsoft Outlook, Windows Explorer e a Ajuda do Microsoft Windows.Os conjuntos também incluem vários estilos de lista com marcadores.

O exemplo de código a seguir mostra um controle TreeView que usa o conjunto de imagem do Windows XP File Explorer.

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

Para obter uma lista completa e descrição dos conjuntos de imagem disponíveis para o controle TreeView, consulte a propriedade ImageSet.

Usando Recolher e Expandir Imagens Personalizado

Você pode usar imagens para indicar um nó expansível, um nó recolhível ou um nó que não expande ou recolhe.Você pode criar imagens para essa finalidade na maioria dos programas gráficos.

Para atribuir uma imagem a um determinado tipo de nó, atribua o local de arquivo de imagem a ser usado para a propriedade correspondente.Essas propriedades incluem ExpandImageUrl, CollapseImageUrl e NoExpandImageUrl.O exemplo a seguir define essas propriedades para imagens personalizadas na pasta de imagens do site.

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

Observe que você pode desativar o processamento de expandir e recolher imagens, definindo a propriedade ShowExpandCollapse como false.

Usando Imagens Personalizados para Nós Raiz, Pai e Folha

Cada controle TreeView pode consistir de nós raiz, pai e folha.Um nó raiz é qualquer nó que tem nós filhos e sua propriedade Parent é definida como null; ele é o nó de nível superior na árvore.Um nó pai é qualquer nó na coleção TreeView do controle de nós que possui nós filhos abaixo na hierarquia.Um nó folha é qualquer nó na coleção TreeView do controle de nós que não possui nós filhos; e não é nem um nó raiz nem um nó pai.

The TreeView controle expõe propriedade estilos para os três TreeNode tipos: raiz, pai e nós folha.Estas são as propriedades RootNodeStyle, ParentNodeStyle e LeafNodeStyle, respectivamente.Cada propriedade pode ser usada para definir um valor ImageUrl de uma propriedade aplicada àquele tipo de nó.Essas imagens são processadas à esquerda do texto de nó.Cada tipo TreeNode pode substituir seletivamente a imagem padrão para o tipo de nó usando a propriedade ImageUrl.

O exemplo a seguir mostra como atribuir propriedades.

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

O exemplo a seguir mostra como substituir a imagem especificada no estilo de nó para um nó de árvore único.Observe que quando processado, o nó de árvore "Página 2" poderia ter uma estrela (Star.gif) como a imagem de nó em vez da imagem atribuída usando a propriedade LeafNodeStyle.

      <asp:TreeView id="SampleTreeView" 
        >
          <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>

Usando Imagens de Linhas

O controle TreeView pode processar linhas que conectam os nós de árvore com uma série de imagens pré-processadas.O controle processa essas linhas quando a propriedade ShowLines é definida como true.Você pode editar a aparência dessas imagens de linha usando o Gerador de Imagem de Linha no menu de atalho TreeView do controle, ou você pode atribuir imagens personalizadas para cada um desses recursos de linha você mesmo.

Observação:
Ferramentas de design visual, como Visual Studio 2005 geralmente incluem utilitários para gerar automaticamente as imagens de linha.

O controle TreeView usa um convenção de nomenclatura específica para as 16 imagens diferentes que compõem as linhas usadas para conectar nós de árvore.A tabela a seguir mostra o nome de arquivo e uma descrição para cada uma das imagens usadas para fazer as conexões das linha.

File name	Image	Descrição
Dash.gif		Uma imagem de linha exibida ao lado de nó raiz quando há apenas um nó raiz na estrutura de árvore e o nó raiz que é uma folha.
Dashminus.gif		Uma imagem de um sinal de menos (-) é exibida próxima ao nó raiz quando há apenas um nó raiz na estrutura de árvore para indicar que o nó raiz é expandido.
Dashplus.gif		Uma imagem de um sinal de mais (+) é exibida próxima ao nó raiz quando há apenas um nó raiz na estrutura de árvore para indicar que o nó raiz é recolhido.
I.gif		Uma imagem de linha exibida para conectar nós adjacentes.
L.gif		Uma imagem de linha é exibida próximo ao último nó em um galho quando o nó é uma folha.
Lminus.gif		Uma imagem de linha exibida próxima ao último nó em um galho para indicar que o nó é expandido.
Lplus.gif		Uma imagem de linha exibida próxima ao último nó em um galho para indicar que o nó é recolhido.
Minus.gif		Uma imagem de um sinal de subtração exibida próximo ao primeiro nó raiz, em um estrutura de árvore que contém vários nós raiz, para indicar que o nó será expandido.Esta imagem não contém uma linha extra e é exibida somente após o nó raiz ter sido recolhido uma vez.Quando a página é carregada pela primeira vez, uma imagem Rminus.gif é exibida.
Noexpand.gif		Uma imagem de espaço em branco é exibida próximo a um nó folha.Esta imagem permite que o texto seja alinhado verticalmente.
Plus.gif		Uma imagem de um sinal de adição exibida próximo ao primeiro nó raiz, em um estrutura de árvore que contém vários nós raiz, para indicar que o nó será recolhido.Esta imagem não contém uma linha extra e é exibida somente após o nó raiz ter sido expandido uma vez.Quando a página é carregada pela primeira vez, uma imagem Rplus.gif é exibida.
R.gif		Uma imagem de linha exibida próximo ao primeiro nó raiz, em um estrutura de árvore que contém vários nós raiz, para indicar que o nó é folha.
Rminus.gif		Uma imagem de um sinal de subtração exibida próximo ao primeiro nó raiz, em um estrutura de árvore que contém vários nós raiz, para indicar que o nó será expandido.Esta imagem contém uma linha extra e é exibida somente quando a página é carregada pela primeira vez.Após o nó raiz ter sido recolhido uma vez, uma imagem Minus.gif é exibida.
Rplus.gif		Uma imagem de um sinal de adição exibida próximo ao primeiro nó raiz, em um estrutura de árvore que contém vários nós raiz, para indicar que o nó será recolhido.Esta imagem contém uma linha extra e é exibida somente quando a página é carregada pela primeira vez.Após o nó raiz ter sido expandido uma vez, uma imagem Plus.gif é exibida.
T.gif		Uma imagem de linha exibida próximo a um nó no meio de uma estrutura de árvore (em um interseção em T) para indicar que o nó é uma folha.
Tminus.gif		Uma imagem de sinal de menos é exibida próximo a um nó no meio de uma estrutura de árvore (em um interseção em T) para indicar que o nó é expandido.
Tplus.gif		Uma imagem de sinal de mais é exibida próximo a um nó no meio de uma estrutura de árvore (em um interseção em T) para indicar que o nó é recolhido.

Quando você usa o gerador de imagem de linha, o controle cria as imagens e as armazena em uma pasta padrão denominada TreeLineImages.Você pode alterar o nome nesta pasta, bem como editar as imagens geradas pelo gerador de imagem de linha.Se você criar imagens personalizadas, nomeie-as usando as mesmas convenções de nomeação da tabela acima.Para ajudar você na criação de imagens personalizadas, você pode usar o Gerador de Imagem de Linha para criar imagens, em seguida, você pode editar e personalizar.