C # - Usando o controle TreeView

Você estava procurando informações sobre como usar o TreeView usando a linguagem C# e chegou até aqui : seja Bem-Vindo.

Antes de continuar lendo o artigo veja nas referências(no final do artigo) mais artigos sobre a utilização do TreeView talvez um deles seja exatamente o que você procura...

Obs: Eu tenho escrito sobre este controle desde sua versão existente no Visual Basic 4 , sim ele existe já faz um tempão

Neste artigo eu vou tratar de operações básicas usando o controle TreeView na linguagem C#; o objetivo e mostrar como usar o controle em tarefas simples mas recorrentes no dia a dia.

Antes que eu me esqueça eu estou tratando da versão 4.0 da plataforma .NET e estou usando o Visual C# 2010 Express Edition que é uma ferramenta totalmente funcional e gratuita. Então aproveite...

O controle TreeView

Para começar deixe-me apresentar o controle TreeView existente na plataforma .NET.

O controle TreeView é utilizado para exibir dados de natureza hierárquica tais como: organogramas organizacionais, dados hierárquicos, arquivos e diretórios, etc.(O Explorer dá um idéia da aparência do controle quando devidamente configurado).

Ele possui uma estrutura composta por uma árvore de nós (node). (dai o nome tree(árvore) view(visão))

Uma 'árvore'(tree) é constituída por ramificações, que por sua vez são constituídas por muitos 'nós' (node), onde cada nó consiste de uma imagem (configurada através da propriedade Image) e um rótulo ( configurado via propriedade Text ). As imagens usadas nos nós(node) são fornecidas pela associação de um componente ImageList com o Controle TreeView. A propriedade ImageList do controle TreeView define o ImageList que contém os objetos Image usados nos nós da árvore.

Um nó(node) pode ser expandido ou retraído, dependendo se possuir ou não nós filhos(child nodes) descendentes. No nível superior ficam as raízes (root nodes) , e cada nó raiz pode ter qualquer quantidade de nós filhos.

As principais  propriedades do controle TreeView são Nodes e SelectedNode.

Você pode exibir ícones ao lado de nós. O controle usa imagens do componente ImageList chamado na propriedade de exibição de árvore de ImageList. A propriedade ImageIndex define a imagem padrão para os nós na árvore.

Usando o TreeView

A maneira mais fácil de usar o controle TreeView e arrastar o controle a partir da ToolBox para o formulário Windows e definir os nós usando a janela de propriedades do controle.

Abra o Visual C# 2010 Express Edition e crie um novo projeto do tipo Windows Forms chamado UsandoTreeView;

A partir da ToolBox vamos incluir dois controles Panel no formulário conforme o leiaute abaixo:

Agora vamos incluir,a partir da Toolbox, no Panel da direita (Panel1) um controle TreeView e no da esquerda um controle WebBrowser:

No controle TreeView em TreeView Tasks clique no link Dock in Parent Container ou defina a propriedade Dock como Fill;

Vamos agora incluir nós no controle TreeView. Selecione o controle e na janela de propriedades clique em na propriedades Node para abrir a janela TreeNode Editor.

Podemos incluir dois tipos de nós (nodes) o Raiz (Root) e o filho (Child).

Vamos agora incluir um nó filho. Selecione o Node Visual Basic e clique no botão Add Child.

Será criado um nó filho abaixo do raiz criado anteriormente. Na janela de propriedades vamos definir as seguintes propriedades para o nó filho:

Repita o processo acima e crie mais um nó filho definindo as suas propriedades conforme a seguir:

Observe que na janela de propriedades temos os botões para descolar os nós raiz e filhos e também para excluir um nó.

Vamos agora usar o evento NodeMouseClick do controle TreeView para que quando o usuário clicar em um nó filho seja aberta a página web correspondente no controle WebBrowser;

Para isso defina o seguinte código no evento NodeMouseClick:

   private void treeView1_NodeMouseClick(object sender, TreeNodeMouseClickEventArgs e)
        {
            TreeNode nNome = e.Node;
            string paginaWeb = "";
            paginaWeb = (string)nNome.Tag;
            if (paginaWeb != string.Empty)
            {
                webBrowser1.Navigate(paginaWeb);
            }
        }

Executando o projeto e clicando em um Nó do TreeView iremos obter:

Vamos mostrar agora outro exemplo onde irei preencher um controle TreeView via código e exibir imagens nos nodes.

Preenchendo um TreeView via Código

Inclua um novo formulário no projeto via opção Project -> add Windows Forms e aceite o nome padrão form2.cs;

Inclua no formulário form2.cs um controle TreeView e aceite o nome padrão:

Como vamos exibir imagens nos Nós do controle TreeView devemos definir as imagens e o local onde devemos armazená-las. No exemplo eu vou colocar as imagens na pasta c:\dados\Imagens.

O código completo do formulário é mostrado a seguir:


using System;
using System.Drawing;
using System.Windows.Forms;

namespace UsandoTreeView
{
    public partial class Form2 : Form
    {
        ImageList il = new ImageList();
        public Form2()
        {
            InitializeComponent();
        }

        private void Form2_Load(object sender, EventArgs e)
        {
            // Seleciona icones em um componente image list
            il.Images.Add(new Icon("\\dados\\Imagens\\Camel.ico"));
            il.Images.Add(new Icon("\\dados\\Imagens\\Bunny.ico"));
            il.Images.Add(new Icon("\\dados\\Imagens\\Critter.ico"));
            il.Images.Add(new Icon("\\dados\\Imagens\\Mouse.ico"));
            treeView1.ImageList = il;

            // Cria o Nó Raiz (RootNode)
            TreeNode rootNode = treeView1.Nodes.Add("Brasil");
            rootNode.ImageIndex = 0;

            // Cria os nós filhos para o raiz
            TreeNode states1 = rootNode.Nodes.Add("São Paulo");
            states1.ImageIndex = 1;
            TreeNode states2 = rootNode.Nodes.Add("Goiás");
            states2.ImageIndex = 1;
            TreeNode states3 = rootNode.Nodes.Add("Rio de Janeiro");
            states3.ImageIndex = 1;
            TreeNode states4 = rootNode.Nodes.Add("Minas Gerais");
            states4.ImageIndex = 1;

            // Cria os nos descendentes para os nós filhos
            TreeNode child = states1.Nodes.Add("Campinas");
            child.ImageIndex = 2;
            child = states1.Nodes.Add("Jundiai");
            child.ImageIndex = 2;
            child = states1.Nodes.Add("Americana");
            child.ImageIndex = 2;

            child = states2.Nodes.Add("Luziânia");
            child.ImageIndex = 2;
            child = states2.Nodes.Add("Catalão");
            child.ImageIndex = 2;
            child = states2.Nodes.Add("Campo Bom");
            child.ImageIndex = 2;

            child = states3.Nodes.Add("Volta Redonda");
            child.ImageIndex = 2;
            child = states3.Nodes.Add("Campos");
            child.ImageIndex = 2;
            child = states3.Nodes.Add("Cabo Frio");
            child.ImageIndex = 2;

            child = states4.Nodes.Add("Frutal");
            child.ImageIndex = 2;
            child = states4.Nodes.Add("Itapagipe");
            child.ImageIndex = 2;
            child = states4.Nodes.Add("Uberaba");
            child.ImageIndex = 2;
        }
    }
}

Para podermos usar as imagens devemos declarar uma instância do objeto ImageList() no início do formulário:

ImageList il = new ImageList();

Seguir inicializamos o componente com as imagens que vamos usar e vinculamos o Imagelist ao controle TreeView:

// Seleciona icones em um componente image list
il.Images.Add(new Icon("\\dados\\Imagens\\Camel.ico"));
il.Images.Add(new Icon("\\dados\\Imagens\\Bunny.ico"));
il.Images.Add(new Icon("\\dados\\Imagens\\Critter.ico"));
il.Images.Add(new Icon("\\dados\\Imagens\\Mouse.ico"));
treeView1.ImageList = il;

Depois criamos o nó raiz para o país e depois os nós filhos para os estados e as respectivas cidades.

Executando projeto teremos:

E então gostou dos exemplos ?

Tudo bem, tudo bem, eu sei que você quer algo mais prático. Então vamos mostrar como usar o controle TreeView com banco de dados.

Exibindo informações do banco de dados no TreeView

O Controle TreeView podem ser preenchido a partir de diferentes tipos de fontes de dados como arquivos textos, arquivo XML, Coleções, Containers e tabelas do banco de dados. A escolha da fonte de dados está intimamente ligada com o cenário e os requisitos da aplicação. Quando os dados sofrerem constante alterações um Banco de dados deve ser a primeira escolha.

Exibindo um valor de um campo no controle TreeView

Nesta tarefa vamos acessar a tabela Products do banco de dados Northwind.mdf e exibir o nome do Produto em um controle TreeView.

Vamos usar também o evento AfterSelect do controle TreeView para que quando o usuário selecionar um produto no controle TreeView os seus detalhes sejam exibidos em controles TextBox do formulário;

Inclua um novo formulário no projeto UsandoTreeView via menu Project -> Add Windows Forms com o nome frmProdutos e a seguir inclua neste formulários os controles : GroupBox, TreeView e TextBox conforme o leiaute abaixo:

A seguir defina no início do formulário os namespaces:

using System;
using System.Data;
using System.Windows.Forms;
using System.Data.SqlClient;
using System.Configuration;

Agora vamos definir uma string de conexão no arquivo App.Config. Para criar o arquivo de configuração no menu Project clique em Add New Item e a seguir selecione o template Application Configuration FIle e aceite o nome padrão clicando em Add;

Para podermos acessar o arquivo de configuração e obter a string de conexão definida temos que incluir uma referência a System.Configuration via menu Project clicando em Add Reference e na tab .NET selecionar o item desejado e clicar em OK;

Vamos agora, após o início da declaração da classe frmProdutos , definir as variáveis para a string de conexão que no exemplo vai ser obtida do arquivo App.Config:

/// <summary>
/// Define as variáveis usadas no formulário
/// A string de conexão obtida do arquivo App.Config
/// O DataReader usado
/// A conexão usada
/// </summary>
static string strConexaoSQL = ConfigurationManager.ConnectionStrings["conexaoSQL_Northwind"].ToString();
SqlDataReader dr;
SqlConnection conn = new SqlConnection(strConexaoSQL);

Agora no evento Load do formulário inclua o código que carrega a rotina para preencher o controle TreeView:

/// <summary>
/// Chama a rotina para vincular os dados no
/// TreeView e DataGridView
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void frmProdutos_Load(object sender, EventArgs e)
{
carregaDadosTreeView();
}

A rotina carregaDadosTreeView() possui o seguinte código:

        /// <summary>
        /// Carrega dados no TreeView
        /// </summary>
        private void carregaDadosTreeView()
        {
            tvwProdutos.Nodes.Clear();
            try
            {
                conn.Open();
                SqlCommand cmd = new SqlCommand("SELECT ProductName FROM Products", conn);
                dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    tvwProdutos.Nodes.Add(dr.GetValue(0).ToString());
                }
                dr.Close();
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.ToString());
            }
            finally
            {
                conn.Close();
            }
        }

Quando o cliente selecionar um item no controle TreeView vamos exibir os detalhes dos produtos nos controles TextBox do formulário. Para isso vamos usar o evento AfterSelect de onde obtemos o nome do item do nó selecionado e chamamos a rotina carregaDadosTextBox(nome) para preencher os TextBox:

       /// <summary>
        /// Após selecionar um item no TreeView
        /// chama a rotina para preencher os textbox
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void tvwProdutos_AfterSelect(object sender, TreeViewEventArgs e)
        {
            string strNome = this.tvwProdutos.SelectedNode.Text.ToString();
            carregaDadosTextBox(strNome);
        }

O código da rotina  carregaDadosTextBox(strNome) e dado a seguir. Nele acessamos o banco de dados e geramos um datareader através do qual acessamos as informações da tabela Products:

       /// <summary>
        /// Carrega os dados a partir da tabela Alunos pelo nome
        /// </summary>
        /// <param name="nome"></param>
        private void carregaDadosTextBox(string nome)
        {
            try
            {
                conn.Open();
                SqlCommand cmd = new SqlCommand("SELECT * FROM Products where ProductName = '" + nome + "'", conn);
                dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    txtCodigo.Text = dr["ProductID"].ToString();
                    txtNome.Text = dr["ProductName"].ToString();
                    txtPreço.Text = dr["UnitPrice"].ToString();
                    txtEstoque.Text = dr["UnitsInStock"].ToString();
                }
                dr.Close();
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.ToString());
            }
            finally
            {
                conn.Close();
            }
        }

Executando o projeto iremos obter:

Existem muitas outras opções para usar o controle TreeView e nos próximos artigos sobre o TreeView eu pretendo mostrar como carregar as tabelas e suas informações para o um banco de dados MSAcess e SQL Server. Aguarde...

Pegue o projeto completo aqui: UsandoTreeView.zip

"Aquele que diz estar na luz, e odeia a seu irmão, até agora está nas trevas. " 1 João 2:9

Referências:

José Carlos Macoratti