SilverLight 4 - Apresentando o controle DataGrid

Se você precisa criar aplicações que tratam com uma grande quantidade de dados, então um controle como o DataGrid do SIlverLight 4 é vital. Este controle exibe os dados em um formato tabular e permite a atualização, inclusão e exclusão de dados inline, bem como a ordenação dos dados em colunas através de um clique no cabeçalho e o agrupamento de forma que você pode criar níveis nos dados.

Desde a versão 2 o SilverLight possui um poderoso controle DataGrid que se apresenta como um boa solução para o tratamento de grande quantidade de informação em um navegador. Ele reside no namespace System.Windows.Controls mas não esta incluído por padrão nos assemblies que são instalados com o SilverLight. Ao utilizá-lo em sua aplicação o SilverLight irá embutir diversos assemblies em um arquivo XAP.

Com o objetivo de manter um bom desempenho o controle DataGrid do SilverLight possui uma recurso conhecido como UI virtualization que faz com que o SilverLight somente crie itens que estão atualmente visíveis. Dessa forma mesmo que você esteja tratando com milhões de linhas, o DataGrid irá ter um desempenho muito bom.

Neste artigo vamos apresentar o controle DataGrid do SilverLight abordando suas principais características e propriedades.

Objetivo : Apresentar as principais características e propriedades do controle DataGrid

premissas:

- Apresentar o controle DataGrid;
- Apresentar o DataBinding no DataGrid : propriedade ItemsSource;
- Definir a Largura e Comprimento do DataGrid : Column Width e Row Height;
- Definir a visibilidade de linhas e cabeçalho:
- Definir as propriedades: Grid Background, Row Background, e Alternative Row Background
- Definir a cor e grossura da borda: Border Color e Thickness
- Definir o Sorting e Scrolling;

Abra o Visual Web Developer 2010 Express Edition e crie um novo projeto com o nome SilverLight_Ap_DataGrid usando a linguagem Visual Basic;

No menu File-> New Project selecione Visual Basic -> SilverLight e a seguir o template SilverLight Application informando o nome SilverLight_Ap_DataGrid;

Clique em OK;

Na seguinte janela de diálogo apenas confirme as opções e clique em OK;

Será criado uma solução com dois projetos: O projeto SilverLight e o Projeto Web;

O controle DataGrid é definido no namespace System.Windows.Controls mas por padrão este namespace não esta relacionado quando criamos o aplicativo SilverLight.

A marca representa um DataGrid controle DataGrid Silverlight em XAML. O controle DataGrid é encontrado no namespace System.Windows.Controls. Quando você arrastar e soltar um controle DataGrid da caixa de ferramentas para o código XAML, a ação adiciona seguinte marca para o controle DataGrid:

<sdk:DataGrid/> ou <sdk:DataGrid></sdk:DataGrid>

Os atributos largura(Width) e altura(Height) representam a largura e a altura de um DataGrid. O atributo x: Name representa o nome do controle, que é um identificador exclusivo de um controle. O atributo Margem(Margin) define a margem de DataGrid que está sendo exibido a partir do canto superior esquerdo.

<sdk:DataGrid x:Name="macDataGrid" Width="300" Height="200" Margin="10,10,10,10"> </sdk:DataGrid>

O DataBinding

A propriedade ItemSource do DataGrid é a chave para a o DataBinding (ligação de dados) e você pode ligar qualquer fonte de dados que implementa a interface IEnuemerable sendo que cada linha do DataGrid está vinculado a um objeto na fonte de dados e cada coluna no DataGrid está vinculado a uma propriedade dos objetos fonte de dados.

No exemplo a seguir vemos um exemplo muito simples para mostrar como funciona o DataBinding.

Abra o arquivo MainPage.xaml.vb e define ao seguinte código:

Partial Public Class MainPage
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
        macDataGrid.ItemsSource = preencherDataGrid()
    End Sub

    Private Function preencherDataGrid() As String()
        Return "www.macoratti.net quase tudo para Visual Basic".Split()
    End Function

End Class

O resultado pode ser visto na figura ao lado onde a coluna padrão do DataGrid exibe todas as strings contidas no array devolvido pela função preencherDataGrid();

Vamos criar um exemplo mais complexo usando o DataBinding. Vamos criar uma coleção de objetos e fazer a vinculação com o DataGrid.

Clique com o botão direito sobre o projeto SilverLight (SilverLight_Ap_DataGrid) e selecione Add Class informando a seguir o nome da classe: Livro.vb.

1- Classe Livro.vb

Public Class Livro

    Public Property Titulo() As String
        Get
            Return m_Titulo
        End Get
        Set(ByVal value As String)
            m_Titulo = value
        End Set
    End Property
    Private m_Titulo As String
    Public Property Autor() As String
        Get
            Return m_Autor
        End Get
        Set(ByVal value As String)
            m_Autor = value
        End Set
    End Property
    Private m_Autor As String
    Public Property Paginas() As Integer
        Get
            Return m_Paginas
        End Get
        Set(ByVal value As Integer)
            m_Paginas = value
        End Set
    End Property
    Private m_Paginas As Integer
    Public Property Editor() As String
        Get
            Return m_Editor
        End Get
        Set(ByVal value As String)
            m_Editor = value
        End Set
    End Property
    Private m_Editor As String
End Class		 A classe Livro foi definida com os seguintes membros:
  • Titulo - o título do livro;
  • Autor - o nome do autor do livro;
  • Paginas - o número de páginas do livro;
  • Editor - o editor do livro;

Vamos agora abrir o arquivo code-behind MainPage.xaml.vb e definir o código conforme abaixo:

Partial Public Class MainPage
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
        macDataGrid.ItemsSource = preencherColecao_DataGrid()
    End Sub

    Private Function preencherColecao_DataGrid() As List(Of Livro)
        Dim livroColecao As New List(Of Livro)()

        Dim livro1 As New Livro()
        livro1.Titulo = "ASP, ADO e banco de dados na web "
        livro1.Autor = "José Carlos Macoratti"
        livro1.Paginas = 250
        livro1.Editor = "Editora Visual Books"
        livroColecao.Add(livro1)

        livro1 = New Livro()
        livro1.Titulo = "2001 Uma Odisséia no espaço"
        livro1.Autor = "Stanley Kubrick"
        livro1.Paginas = 300
        livro1.Editor = "Editora B"
        livroColecao.Add(livro1)

        livro1 = New Livro()
        livro1.Titulo = "A moreninha "
        livro1.Autor = "Jose de Alencar"
        livro1.Paginas = 200
        livro1.Editor = "Editora Cs"
        livroColecao.Add(livro1)

        livro1 = New Livro()
        livro1.Titulo = "Fernando Pessoa - O Cancioneiro "
        livro1.Autor = "Fernando Pessoa"
        livro1.Paginas = 150
        livro1.Editor = "Editora D"
        livroColecao.Add(livro1)

        Return livroColecao
    End Function

End Class		 O código define uma coleção do tipo Livro onde estamos gerando uma coleção com objetos livros
em memória.

A seguir estamos atribuindo a coleção a propriedade ItemsSource do controle DataGrid.

O resultado obtido pode ser visto na figura a seguir:

Como podemos ver todas as propriedades públicas do objeto Livro são representados
como colunas do DataGrid. Isso ocorre pois por padrão, a propriedade AutoGenerateColumns
do DataGrid é definida como True. Se você não deseja gerar colunas automaticamente,
basta definir essa propriedade para false da seguinte forma:

MacDataGrid.AutoGenerateColumns = false

As propriedades ColumnWidth e RowHeight do DataGrid são usados para definir a largura padrão da coluna e altura da linha do DataGrid.

No exemplo de código a seguir estamos alterando a largura da coluna para 100 e sua altura para 50 bem como a cor de fundo do controle para Aqua;

<sdk:DataGrid x:Name="macDataGrid" Width="550" Height="250" Margin="10,10,10,10" ColumnWidth="100" RowHeight="50" Background="Aqua" >
</sdk:DataGrid>

Além destas propriedades temos:

- O MaxWidth e MaxHeight representam a largura máxima e altura máxima de um DataGrid.
- O MinWidth e MinHeight representam a largura mínima e altura máxima de um DataGrid.
- O MaxColumnWidth e minColumnWidth representam a largura máxima e largura mínima das colunas em um DataGrid.

A propriedade GridLinesVisibility é usada para tornar as linhas de grade visível.

Usando esta opção você pode mostrar e ocultar as linhas vertical, horizontal, todas ou nenhuma linhas.

A propriedade HeaderVisibility é usada para mostrar e ocultar os cabeçalhos de linha e coluna.

A propriedade background é usada para definir a cor de fundo do DataGrid.

As propriedades RowBackground e AlternativeRowBackground são usados para definir a cor de fundo das linhas alternativas do DataGrid.

O código abaixo estamos definindo a cor de fundo das linhas alternadas como amarela e azul;

<sdk:DataGrid x:Name="macDataGrid" Width="550" Height="250" Margin="10,10,10,10" ColumnWidth="100" RowHeight="50" Background="Aqua"
    RowBackground="LightYellow" AlternatingRowBackground="LightBlue">
</sdk:DataGrid>

As propriedades BorderBrush e BorderThickness são usadas para definir a cor e a largura da borda.

Abaixo vemos um exemplo com BorderBrush="Black" e BorderThickness="8"

Por padrão, a classificação da coluna é habilitado em um DataGrid. Você pode ordenar uma coluna simplesmente clicando no cabeçalho da coluna; para desativar esse recurso basta definir a propriedade CanUserSortColumns para false. Ex: CanUserSortColumns = "False"

As propriedades HorizontalScrollBarVisibility VerticalScrollBarVisibility do tipo da enumeração ScrollBarVisibility controla as barras de rolagem horizontal e vertical do DataGrid. Os valores possíveis são: Auto, Disabled, Hidden e Visible.

O valor padrão é Auto que indica quando a rolagem for necessária ela irá aparecer caso contrário ficará invisível.

No trecho de código abaixo estamos habilitando as barras de rolagem horizontal e vertical:

  <sdk:DataGrid x:Name="macDataGrid" Width="550" Height="250" Margin="10,10,10,10"
         ColumnWidth="100" RowHeight="50" Background="Aqua"
         RowBackground="LightYellow" AlternatingRowBackground="LightBlue"
         BorderBrush="Black" BorderThickness="8"
         HorizontalScrollBarVisibility="Visible"
         VerticalScrollBarVisibility="Visible" >
        </sdk:DataGrid>

Finalmente para encerrar vou colocar um dica que mostra como obter o valor da linha e coluna selecionada de um célula no DataGrid:

Vamos incluir um botão de comando - btnValorSelecionado - acima do DataGrid na página MainPage.xaml conforme o leiaute abaixo:

A seguir no arquivo MainPage.xaml.vb vamos definir no evento Click do botão o seguinte código:

Private Sub btnValorSelecionado_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnValorSelecionado.Click
        Dim livro As Livro = DirectCast(macDataGrid.SelectedItem, Livro)
        MessageBox.Show("Livro Selecionado: " + livro.Titulo)
    End Sub

Executando o projeto , selecionando uma linha e clicando no botão iremos obter:

E dessa forma demos uma visão geral no DataGrid suas principais propriedades e características...

Simples , simples assim...

Pegue o projeto completo aqui: Silverlight_Ap_DataGrid.zip

Eu sei é apenas SilverLight 4 , mas eu gosto...

Referências:

José Carlos Macoratti