Carregando treeview dinamicamente em Silverlight 4

Sex, 23 de Julho de 2010 13:55 Escrito por Flávia Moreira

Introdução

O Treeview é um controle com estrutura de árvore cuja finalidade principal é para exibir dados hierárquicos sob a forma de nós. Cada nó que tem filhos pode ser recolhido e ampliado.

O objetivo deste artigo é demonstrar como popular um treeview Silverlight 4 através de dados de um banco. Da mesma forma, você poderá consumir dados, por exemplo, de um arquivo XML.

Ferramentas:

Visual Studio 2010 ou 2008
Silverlight 4
Microsoft Blend 4
SQL Server 2005 ou 2008

Banco de Dados

Antes de começar a criar o projeto Silverlight, o primeiro passo é criar a database, com nome de DBSite. O banco de dados irá possuir duas tabelas, uma denominada seção e a outra categoria, conforme pode ser visualizado na Figura 1.

Figura 1 – Banco de dados – DBSite

Download: Script

Nota: Nota: Adicione alguns dados para as tabelas

Iniciando o projeto no Visual Studio

Abra o Visual Studio, em New-Project, escolha o template Silverlight Application, forneça o nome de AppTreeView.

Na Solution Explorer, dentro do projeto Web, adicione um serviço WCF, como mostra a Figura 2 , e coloque o nome de ServicoSite.

Figura 2 - Serviço WCF

O próximo passo é criar um novo projeto para camada de dados, como traz a Figura 03, e forneça o nome para este projeto de DataModel.

Figura 3 - Projeto camada de dados

Adicione neste projeto o template ADO.NET Entity Data Model, e forneça o nome de Model.edmx, pressione o botão ok, a seguir selecione a opção Generate from database, como traz a Figura 4.

Figura 4 – ADO.NET Entity Data Model

Após, é necessário escolher a propriedade de conexão de dados, e uma tela é apresentada com as configurações para a connection string do banco de dados, e forneça o nome de

DBSiteEntities. Em seguida, tem-se a tela para adicionar as tabelas TBSecao e TBCategoria, e em namespace, coloque o nome de DBSiteModel, como mostra a Figura 5.

Figura 5 – Adicionando tabelas para o modelo

Crie uma classe dentro do projeto DataModel, com o nome de Secao.cs, e coloque o código como apresentado na Tabela 1.

using DataModel;

namespace DataModel{

public class Secao{

private DBSiteEntities _db;

public Secao() {

_db = new DBSiteEntities();

}

public List<TBSECAO> ListarSecao() {

return _db.TBSECAO.Include("TBCATEGORIA").ToList(); }

}

Tabela 1– Código para trazer os dados da tabela TBSECAO

Referencie o Projeto DataModel, dento do projeto Web, como mostra a Figura 6.

Figura 6 – Referencia de projeto

Dentro do serviço WCF adicione o código da Tabela 2.

using DataModel;

using System.Collections.Generic;

[OperationContract]

public List<TBSECAO> ListarSecao()

{

Secao _secao = new Secao();

/ Add your operation implementation here

return _secao.ListarSecao();

}

Tabela 2 – Retornando uma lista de TBSECAO

Agora vá ao Projeto Silverlight, no arquivo MainPage.XAML adicione um treeview, como traz a Tabela 3.

<my:TreeView x:Name="tree"></my:TreeView>

Tabela 3 - Adicionando TreeView

E adicione o código para popular o TreeView dentro do Arquivo MainPage.Xaml.cs como mostra a Tabela 4.

using AppTreeView.Service;

using System.Collections.ObjectModel;

using System.Windows.Media.Imaging;

public partial class MainPage : UserControl

{

public MainPage(){

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

Service.ServicoSiteClient _cliente = new ServicoSiteClient();

_cliente.ListarSecaoCompleted += new EventHandler<ListarSecaoCompletedEventArgs>(_cliente_ListarSecaoCompleted);

_cliente.ListarSecaoAsync();

}

void _cliente_ListarSecaoCompleted(object sender, ListarSecaoCompletedEventArgs e)

{

if (e.Error != null)

return;

ObservableCollection<TBSECAO> _secao = e.Result;

TreeViewItem _item = null;

StackPanel _panel;

Image _image;

TextBlock _text;

if (_secao != null)

{

for (int i = 0; i < _secao.Count(); i++)

{

_item = new TreeViewItem();

_item.Header = _secao.TITULO;

                  for (int j = 0; j < _secao.TBCATEGORIA.Count(); j++)

                  {

                     _text = new TextBlock();

                     _image = new Image();

                     _image.Width = 20;

                     _image.Height = 20;

                  if (_secao.TBCATEGORIA[j].URLIMAGEM != "")

                     {

                         _image.Source = new BitmapImage(new Uri(_secao.TBCATEGORIA[j].URLIMAGEM, UriKind.RelativeOrAbsolute));

                     }

                     _text.Text = _secao.TBCATEGORIA[j].TITULO;

                      _panel = new StackPanel();

                      _panel.Orientation = Orientation.Horizontal;

                      _panel.Children.Add(_image);

                      _panel.Children.Add(_text);

                      _item.Items.Add(_panel);

                  }

                  tree.Items.Add(_item);

              }

          }

        }

    }

Tabela 4 - Codificação para popular TreeView.

Nota: Poderia ter carregado o treeview por Binding.

Conforme você pode observar no código da Tabela 4 foi criado um objeto do tipo TreeViewItem, e um StackPanel.No objeto do StackPanel foi adicionado dois objetos, um do tipo imagem e outro do tipo TextBlock. E em seguida, dentro do objeto TreeViewItem foi adicionado o StackPanel. E por último o TreeViewItem foi adicionado dentro do Treeview. Isto mostra que existe uma hierarquia na formatação dos objetos em silverlight.

Execute a aplicação, e o resultado deverá ser similar como mostrado na Figura 7.

Figura 7 – Treeview carregado

Neste artigo foi mostrado como popular um treeview dinamicamente através de dados de um banco de dados. De forma simples e objetiva.

Carregando treeview dinamicamente em Silverlight 4

NewsLetter