WPF - Apresentando o DataBinding

Os desenvolvedores para a plataforma Windows tem usado praticamente a mesma tecnologia de exibição por mais de 15 anos. Uma aplicação Windows básica se baseia em dois recursos muito usados do sistema operacional Windows para criar a interface com o usuário:

• User32 - fornece a aparência familiar dos elementos Windows como janelas, botões, caixas de texto, etc.;
• GDI/GDI+ - fornece o suporte ao desenho para renderizar formas, texto e imagens ao custo da tradicional complexidade e desempenho;

Ao longo dos anos essas duas tecnologias têm sido refinadas e as APIs que o desenvolvedores usam para interagir com elas tem mudado de forma dramática; mas se você esta criando uma aplicação com a plataforma .NET e WIndows Forms, ou ainda esta usando VB6, nos bastidores, os mesmos recursos do sistema operacional Windows estão sendo usados.

A tecnologia WPF veio para mudar este cenário ao trazer novos recursos e usar uma nova forma de trabalho que trabalha diretamente como a tecnologia DirectX.

O Microsoft Windows Presentation Foundation - WPF introduz uma nova maneira de criar interfaces com o usuário em clientes ricos oferecendo recursos gráficos e uma nova linguagem de marcação chamada XAML que é baseada em XML com um novo modelo de desenvolvimento que inclui um rico modelo para a ligação de dados.

O WPF efetua a separação do design da interface do usuário e do código de uma maneira parecida com ASP .NET onde temos em um arquivo a linguagem de marcação e em outro o código, o arquivo code-behind.

Um dos recursos mais poderosos apresentado pelo WPF é o databinding que permite efetuar a ligação com dados de diversas fontes de dados sem ter que utilizar código, permitindo gerenciar a execução e edição de dados complexos.

É isso mesmo, se você odeia codificar, vai amar o WPF, pois você pode através da linguagem declarativa de marcação (XAML) criar toda a interface com o usuário e efetuar a ligação de dados sem usar código.(Naturalmente tudo que você pode fazer no XAML você pode fazer via código).

Além disso o WPF apresenta as seguintes novas características na versão 3.5 (service pack1 do VS):

• Suporte a aplicações WEB com FireFox - Você agora pode rodar aplicações WPF do tipo web tanto no FireFox como no IE;
• Suporte ao LINQ no databinding - O WPF agora da suporte a utilização do LINQ na vinculação de dados;(Sim, o suporte ao LINQ é nativo)
• Suporte a interface IDataErrorInfo no databinding - Agora a infraestrutura do databinding pode capturar erros de validações e exibí-los usando esta interface;
• Suporte a utilização interativa de controles em um controle RichtTextBox;
• Suporte para a utilização de elementos 2-D em superfícies 3-D;
• Um modelo de Add-In que permite usar componentes de terceiros em um contexto de segurança;

O que é o DataBinding

Para começar a usar o databinding com WPF você deve sempre definir um destino e uma origem.

O destino da ligação pode ser qualquer propriedade acessível ou elemento derivado da classe DependencyProperty. Um exemplo é a propriedade Text do controle TextBox.

A origem da ligação pode ser qualquer propriedade pública, incluindo propriedades de outros controles , objetos CLR, elementos XAML, datasets, arquivos XML, etc. A WPF oferece dois provedores especiais para ajudar na ligação de dados: XmlDataProvider e ObjectDataProvider.

O fluxo de dados na vinculação de dados ocorrer de duas formas básicas :

1. Unidirecional (OneWay) - A alteração é feita somente na origem; Somente a propriedade do objeto é alterada; a fonte de dados não é alterada;
2. Bidirecinal (TwoWay) - A alteração é feita na origem e no destino, ou seja, a alteração da propriedade altera a fonte de dados;

3. OneWayToSource: É o inverso do OneWay. O que você alterar a propriedade destino a propriedade origem é alterada. Ou seja uma alteração na interface se reflete na origem de dados;

Para ficar mais claro vamos a um exemplo bem simples:

Você deseja exibir um valor de um campo de um banco de dados na propriedade Text de um controle TextBox.

No modo unidirecional o valor do campo é exibido na TextBox e não permite alteração (isso pode ser usado para campos do tipo somente-leitura)

No modo bidirecional o valor do campo é exibido e quando você altera o valor da TextBox a alteração é propagada para o banco de dados.

- DataBinding entre controles

Vejamos na prática como usar sintaxe da linguagem XAML para ligar a propriedade Text de um controle TextBox e a propriedade Value de um controle Slider:

<ProgressBar Text="{Binding ElementName=Slider, Path=Value}" Width="50" Height="20"/>

onde :

ElementName - indica o nome do controle que será a fonte de dados;
Path - indica a propriedade que será usada para preencher a propriedade Text da TextBox;

Em contrapartida o controle Slider precisaria ser definido assim:

<Slider Name="Slider" Width="150" Height="30" Maximum="100" />

- DataBinding entre um controle e uma fonte de dados

Agora vejamos como ficaria a declaração para a ligação entre a propriedade Text de um controle TextBox e o campo CategoryName da tabela Categories do banco de dados Northwind.mdb:

<TextBox Width="50" Height="20" Text="{Binding Path=CategoryName}" />

para definir se a ligação de dados é unidirecional ou bidirecional usamos a propriedade Mode:

<TextBox Width="50" Height="20" Text="{Binding Path=CategoryName, Mode=OneWay/TwoWay}" />

Além disso podemos usar o recurso de criar modelos e de usar a classe DataTemplate para a realizar a vinculação de dados.

No WPF os controles possuem um modelo padrão definido pelo sistema operacional. Você pode personalizar o visual de um controle através da criação de templates(modelos). Veja o exemplo abaixo:

			<Button x:Name="Botao1">
			    <Button.Template>
				<ControlTemplate>
				    <Ellipse Fill="Red"/>
				</ControlTemplate>
			    </Button.Template>
			</Button>			

Neste código estamos definindo que o botão fique com o formato de uma elipse através da criação de um template.

Usando a classe DataTemplate

O modelo data templating da WPF fornece a você uma grande flexibilidade para definir a apresentação de dados. Os controles WPF possui funcionalidades embutidas para suportar a personalização da apresentação dos dados.

Toda a funcionalidade de modelagem do WPF esta baseada na classe FrameworkTemplate.

A classe DataTemplate deriva de FrameworkTemplate como todas as outras classes usadas para o propósito da modelagem.

É muito mais fácil e rápido criar uma DataTemplate via declaração XAML do que usar código de programa. O código para criação de modelos atualmente é um tanto complexo e confuso, enquanto que a linguagem declarativa XAML é simples e limpa.

O DataTemplate pode gerar tantos elementos visuais quantos forem necessários para exibir o objeto de dados. Esses elementos usam ligações de dados para exibir os valores da propriedade do objeto de dados. Se um elemento não sabe como exibir o objeto que ele deve processar, ele simplesmente chama o método ToString nele e exibe o resultado em um TextBlock.

Uma outra característica da WPF que é usada em conjunto com os modelos é conhecido como 'triggers' (gatilhos). Um gatilho é algo como um bloco if usado no código procedural e somente executa o que o bloco contém quando uma condição avaliada for verdadeira.

Os triggers são disparados por condições como por exemplo os valores das propriedades, e permitem alterar os estilos dos objetos e efetuar diversas ações. Há diversos tipos de triggers mas os dois tipos básicos são :

• Triggers de propriedade - Têm como condição o valor de uma propriedade do objeto:
• MultiTriggers - São gatilhos(triggers) que têm como condição valores de várias propriedades

Exemplo de ligação de dados

Vou encerrar este artigo com um exemplo prático de ligação de dados mais simples que existe : A ligação as propriedades de um elemento.

Neste exemplo temos um objeto origem que é um elemento WPF e sua propriedade Source que é uma propriedade de dependência.

Abra o Visual Studio 2008 e crie um novo projeto, menu File-> New Project, do tipo WPF Application com o nome wpf_DatBinding;

Na janela padrão Window1.xaml inclua a partir da ToolBox um controle Slider e um controle TextBlock no interior do leiaute Grid:

Define as propriedades dos controles conforme mostrado no arquivo XAML, segue abaixo o código usado:

Controle Slider:

 <Slider Height="22" Margin="30,22,24,0" Name="Slider1" 
                	   VerticalAlignment="Top"  Minimum="1"
	                Maximum="30" Value="10"
	                TickFrequency="1"
	                TickPlacement="TopLeft"
                />

Controle TextBlock:

      <TextBlock Margin="30,59,16,45" Name="TextBlock1" 
                   Text="Macoratti.net"
                   FontSize="{Binding ElementName=Slider1, Path=Value}"
                   />

Ao executar o projeto e mover o ponteiro do controle Slider o tamanho do texto irá ser alterado conforme você move para direita ou para esquerda, conforme a figura abaixo:

Veja que você não usou código apenas a poderosa linguagem declarativa de marcação  XAML. A declaração responsável pelo comportamento é :

  FontSize="{Binding ElementName=Slider1, Path=Value}"

Nesta declaração estamos vinculando a propriedade Value do Controle Slider1 a propriedade FontSize da propriedade Text do controle TextBlock.

No controle Slider configuramos apenas o valores máximo e mínimo.

Veja um exemplo de aplicação WPF com mais recursos em http://www.vertigo.com/familyshow.aspx (FamilyShow)

Faça o download dos fontes do FamlyShow em :  http://www.codeplex.com/familyshow/Release/ProjectReleases.aspx?ReleaseId=23637

Com esta pequena introdução espero ter lançado alguma luz sobre o funcionamento do databinding do WPF. A seguir irei mostrar exemplos mais funcionais com vinculação a fonte de dados.

Eu sei é apenas WPF , mas eu gosto...

• Referencias:
  http://msdn.microsoft.com/en-us/library/system.windows.forms.autocompletemode.aspx
  http://msdn.microsoft.com/en-us/library/system.windows.forms.textbox.autocompletemode.aspx
  http://blogs.zdnet.com/Stewart/?p=320
  http://msdn.microsoft.com/pt-br/library/cc564903.aspx

José Carlos Macoratti