Introdução

Uma das críticas ao WPF era o fato de não ter disponível uma DataGrid, para poder mostrar os dados em formato de tabela. Sem dúvida, poderíamos usar a DataGrid WinForms usando os componentes de interoperabilidade entre WPF e WinForms, mas esta seria uma solução muito aquém do esperado, pois não poderíamos aplicar nosso estilo de apresentação, na DataGrid. Outra solução seria usar a ListBox ou a ListView com um template de dados que permitisse a edição, mas isto ainda não permitia a flexibilidade que uma DataGrid permite.

Finalmente, a Microsoft ouviu os pedidos e disponibilizou uma DataGrid para WPF. Ela pode ser baixada (com o código fonte) junto com o WPF toolkit em http://www.codeplex.com/wpf . O WPF Toolkit, além da DataGrid, contém um DateTimePicker, um Calendário, temas para WPF e o VisualStateManager, que permite criar estados para um componente e transições entre os estados: por exemplo, o botão possui o estado MouseOver e o estado Pressed. Podemos criar estilos para os botões nestes estados e definir animações para as transições entre eles. Isto faz que o WPF fique semelhante ao Silverlight, que usa o VisualStateManager para estilizar os componentes.

Uma vez baixado, o toolkit, você deve instalar o arquivo msi que está incluído. Isto instala as referências para os novos assemblies.

Usando a DataGrid

Criaremos agora um projeto que lê dados de um banco de dados usando LINQ to SQL e mostra os dados na DataGrid. Crie um novo projeto WPF. No projeto adicione um novo LINQ to SQL classes  e chame-o de NorthwindModel.dbml. No Server Explorer, adicione uma nova conexão de dados, usando SqlServer File e apontando para o lugar onde está o arquivo Northwind.mdf.  Ao confirmar, a conexão deve aparecer no Server Explorer. Abra o ramo tables da conexão e arraste as tabelas Customers e Orders para o modelo. As tabelas e sua relação são adicionadas ao modelo. Agora iremos criar a nossa interface de usuário.

Para usar a DataGrid, devemos adicionar uma nova referêcia ao projeto. Dê um clique com o botão direito do mouse no Project Explorer e selecione a opção Add Reference e adicione o assembly WPFToolkit. Uma vez adicionada a referência, precisamos adicionar o namespace no código xaml. Isto é feito colocando a seguinte linha na declaração da janela, após os demais namespaces:

xmlns:dg="clr-namespace:Microsoft.Windows.Controls;

  assembly=WPFToolkit"

Em seguida, podemos colocar um componente DataGrid na janela, dentro do component Grid de layout:

<dg:DataGrid x:Name="dataGrid" AutoGenerateColumns="True" />

Estamos usando a propriedade AutoGenerateColumns, configurando-a para True, de modo que a DataGrid crie colunas para os nossos dados automaticamente. No construtor da janela, coloque o código que carrega os dados para a DataGrid:

public Window1()

{

    InitializeComponent();

    var dc = new NorthwindModelDataContext();

    dataGrid.ItemsSource = dc.Customers.ToList();

}

Aqui criamos o contexto de dados e atribuímos a coleção Customers à lista de dados da DataGrid. Isto é o suficiente para alimentarmos os dados da DataGrid, como mostra a Figura 1.

Figura 1 – DataGrid com dados da tabela de clientes

Esta DataGrid, apesar de simples, tem uma série de características interessantes:

·         Classifica os dados clicando na coluna, ou mesmo classificar por múltiplas colunas teclando Shift e clicando nas colunas desejadas

·         Redimensiona as colunas individualmente

·         Move as colunas de lugar

·         Permite inserir dados

·         Remove um dado quando teclamos Del

A inserção e deleção não são persistidas no banco de dados. Como usamos o método ToList() para alimentar a DataGrid,  temos apenas uma coleção em memória, desligada do banco de dados. Para que os dados fossem persistidos, precisaríamos fazer algo como:

dataGrid.ItemsSource = dc.Customers;

Mas neste caso, perdemos a capacidade de classificar os dados, pois o LINQ to SQL traz os dados como Table<T>  e isso faz que a classificação não seja suportada nesta versão da DataGrid. Se você quiser usar a classificação e persistir os dados, deve usar outro meio de acesso a dados, como o Dataset, ou  criar um mecanismo que capture as mudanças na coleção e passe-as ao LINQ to SQL para que sejam persistidas, ou mesmo criar uma camada de acesso a dados que faça toda a atualização das modificações, porém isto está além do escopo deste artigo.

Mudando o estilo das linhas da DataGrid

A DataGrid, como todos os controles WPF, tem várias opções de personalização. Podemos mudar as cores e fontes das linhas e cabeçalhos, inclusive cores diferentes para linhas alternadas, criando uma tabela “zebrada”. A maneira mais fácil de fazer isso é usar as propriedades AlternationCount, que indica a quantas linhas a cor deve ser trocada, RowBackground e AlternatingRowBackground, que indicam as cores das linhas. Por exemplo, o código abaixo permite gerar a DataGrid conforme a Figura 2:

<dg:DataGrid x:Name="dataGrid" AutoGenerateColumns="True"

             AlternationCount="2" RowBackground="Beige"

             AlternatingRowBackground="LightBlue">

Figura 2 – DataGrid “zebrada”

Podemos também mudar o estilo do cabeçalho, criando um novo estilo. Inicialmente, criamos o novo estilo na seção Resources da janela:

<Window.Resources>

    <Style x:Key="columnHeaderStyle"

             TargetType="Primitives:DataGridColumnHeader">

        <Setter Property="Background">

            <Setter.Value>

                <LinearGradientBrush StartPoint="0.5,0"

                         EndPoint="0.5,1" >

                    <LinearGradientBrush.GradientStops>

                        <GradientStop Color="Navy" Offset="0" />

                        <GradientStop Color="LightBlue" Offset="1" />

                    </LinearGradientBrush.GradientStops>

                </LinearGradientBrush>

            </Setter.Value>

        </Setter>

        <Setter Property="Foreground" Value="White" />

    </Style>

</Window.Resources>

Em seguida, aplicamos este estilo à propriedade ColumnHeaderStyle:

<dg:DataGrid x:Name="dataGrid" AutoGenerateColumns="True"

             AlternationCount="2" RowBackground="Beige"

             AlternatingRowBackground="LightBlue"

             ColumnHeaderStyle="{StaticResource columnHeaderStyle}" />

Assim, obtemos uma DataGrid como a da Figura 3.

Figura 3 – DataGrid com o cabeçalho customizado

Podemos fazer mudanças mais radicais nas linhas, mudando o seu estilo. Podemos criar um novo estilo para as linhas:

<Style x:Key="rowStyle" TargetType="dg:DataGridRow">

    <Setter Property="FontFamily" Value="Verdana" />

    <Setter Property="FontSize" Value="10" />

    <Style.Triggers>

        <Trigger Property="AlternationIndex" Value="0">

            <Setter Property="Background" Value="White" />

        </Trigger>

        <Trigger Property="AlternationIndex" Value="1">

            <Setter Property="Background" Value="#DDDDDD" />

        </Trigger>

        <Trigger Property="IsMouseOver" Value="True">

            <Setter Property="Background" Value="#BBBBBB" />

        </Trigger>

    </Style.Triggers>

</Style>