Introdução ao WPF

Bruno Sonnino e Roberto Sonnino

Publicado em: 9 de outubro de 2006

Introdução

Nesse artigo, iremos apresentar a nova tecnologia para desenvolvimento de aplicativos e interfaces da Microsoft, o Windows Presentation Foundation ou WPF, que estará disponível no .NET 3.0.

Esta tecnologia será nativa no Windows Vista, e está disponível como um download separado no Windows XP. Apresentaremos também um pequeno programa que demonstra as características básicas do WPF, mostrando a maneira de programar com ele.

Nesta página

Introdução ao WPF
Instalação
Desenvolvendo com WPF
Conclusões

Introdução ao WPF

O WPF apareceu em 2001 com o codinome “Avalon”, como a nova tecnologia de apresentação do Windows Vista. Suas principais características são:

• Flexibilidade da interface, que pode ser independente do código: podemos ter duas apresentações completamente diferentes compartilhando o mesmo comportamento;

• Incorpora todas as funções do .NET 2.0, acrescentando às interfaces novos recursos como 3D, animações, gráficos vetoriais, reconhecimento de voz, layouts avançados, entre outros;

• Leva para o desktop o conceito já existente na Web de separação entre o design e o código, permitindo que a interface seja criada por um designer e o código por um programador especializado, de maneira independente;

• Usa os recursos do sistema operacional, de maneira a otimizar a performance da interface para o hardware do usuário;

• Os controles podem ser personalizados a qualquer nível que se queira, por exemplo, podemos criar um botão não retangular que contém uma animação 3D, sem a necessidade de escrever código para isso.

• é independente de plataforma; o mesmo código-fonte funciona tanto na web quanto para desktop e, no futuro poderá ser distribuído até em sistemas como Mac, Linux e celulares, usando o WPF/E (WPF Everywhere, que está em desenvolvimento).

Um programa que usa WPF é normalmente composto por duas partes: um arquivo XML com características especiais chamado XAML (eXtended Aplication Markup Language, pronuncia-se “zémel”), e um código para .NET (que pode ser escrito em qualquer linguagem compatível, VB.net, C#, etc). O arquivo XAML contém as diretrizes de interface, podendo ser comparado ao XHTML em relação ao ASP.net. A Figura 1 mostra o Microsoft Expression Interactive Designer, ferramenta para criação de programas WPF, com um arquivo XAML carregado.

Figura 1 – Microsoft Expression Interactive Designer com arquivo XAML aberto

Todo arquivo XAML tem algumas características:

• Ele deve ter um controle “root”, que é um controle raiz que contém todos os outros. Só é permitido um “root” em cada arquivo XAML. No exemplo da figura, o “root” é a grid.

• Ele está ligado a uma classe no código, indicado na propriedade “ x:Class” do elemento root. No nosso exemplo, o arquivo XAML está ligado à classe HelloWorld.Scene1

• Os elementos são definidos usando tags (< > e < / >). O nível de parentesco é dado pelo encadeamento das tags.

Por exemplo:

<grid> 
<label/> 
<button/> 
</grid> 

Indica que o label e o button estão contidos na grid. No exemplo da figura, vemos que o elemento RichText está incluído na grid.

• Os elementos podem conter atributos especificados de duas maneiras:

• Na tag do elemento, utilizando a sintaxe (as aspas são obrigatórias)

<elemento atributo=“valor”> 

• Como sub-elemento do elemento principal:

<elemento>
<atributo> 
Conteúdo 
</atributo> 
</elemento> 

A segunda maneira, embora mais complicada, é mais flexível e possibilita maior customização dos elementos. Veja abaixo um exemplo comparando as duas maneiras:

• <Label x:Name="Label" Content="Alô, Mundo"/>

•  <Label x:Name="Label"> 
<Label.Content> 
  Alô, Mundo 
</Label.Content> 
</Label> 

Como pudemos ver, cada XAML referencia uma classe de código que pode definir seu comportamento, de forma análoga ao code-behind do ASP.net. Este código encontra-se em um arquivo .vb ou .cs, dependendo da linguagem utilizada. Podemos alterar os atributos dos elementos usando código de programação, da mesma maneira que fazemos usualmente. Por exemplo, esse código .NET muda o conteúdo do label que colocamos na janela:

public Scene1()

{

this.InitializeComponent();

// Muda o conteúdo do label

Label.Content = "Nome mudado";

}

Note que o label é referenciado por sua propriedade x:Name, que no caso é Label .

Instalação

Para instalar o WPF, é necessário uma máquina com Windows XP SP2, Windows 2003 Server ou Windows Vista. Inicialmente, devemos instalar o Framework .NET 3.0. Ele pode ser instalado concomitantemente com as versões 2.0 e 1.1 do Framework, não havendo conflitos.

A versão disponível quando o artigo foi escrito era o July 2006 CTP, que pode ser baixado em https://www.microsoft.com/downloads/details.aspx?FamilyId=62057A6F-185F-41DB-ABE5-678F6FC388F0&displaylang=en, mas qualquer versão mais nova deverá funcionar.

O Windows Vista já vem com o .NET 3.0 pré instalado, e a versão varia com a versão do sistema operacional. O Vista beta 2 (público) contém a versão May CTP 2006.

Para compilar programas .NET 3.0 você também precisará do Visual Studio 2005 ou uma versão Express Edition, ou ainda do MS Expression Interactive Designer. Este programa está em beta, e pode ser baixado gratuitamente em https://www.microsoft.com/products/expression/en/interactive_designer/id_free_trial.aspx. Note que, para usar o Expression Interactive Designer no Windows Vista beta 2 é necessário usar a versão May 2006. A versão July 2006 não funciona com o Vista beta.

Desenvolvendo com WPF

Para ilustrar o desenvolvimento com WPF, iremos criar um pequeno programa que demonstra suas características básicas. Este programa será desenvolvido em duas partes: na primeira será apenas utilizado XAML e na segunda adicionamos código C#. O programa poderia ser desenvolvido em outra linguagem; o código VB.net equivalente está disponível no download que acompanha este artigo.

Após instalar o .NET Framework e o Expression Interactive Designer, abra o Expression Interactive Designer. Você verá uma tela como a mostrada na Figura 1.

A parte de cima mostra a barra de menus. Abaixo da barra de menus, temos o editor de código/designer. Ele mostra os arquivos que estão abertos no momento. Quando estamos visualizando um arquivo XAML, podemos alterar a visualização entre o código XAML e o designer usando as abas da parte inferior da janela.

Abaixo do editor, temos as paletas TimeLine e Results . A paleta TimeLine serve para controlar animações ou selecionar objetos no seu programa. A paleta Results mostra resultados e mensagens da compilação/execução.

Ao lado da janela do editor, temos a paleta Tools , onde encontramos as ferramentas mais usadas para trabalhar com itens na janela. Para adicionar objetos, você deve usar a paleta Library . Podemos selecionar o elemento desejado e depois clicar e arrastar o mouse na janela central, adicionando o novo elemento à página. A paleta Appearance permite alterar a aparência do elemento selecionado na janela Design . Caso você queira selecionar um elemento que está abaixo de outro, basta dar um clique duplo ou quantos forem necessários até que o elemento desejado esteja marcado. Para alterar alguma propriedade do elemento selecionado, podemos usar as propriedades da paleta Properties .

Por padrão, o Expression ID cria um projeto C# vazio. Se quiser outra linguagem, crie um novo projeto usando File/New Project .

Em seguida abra a paleta Library e selecione o componente Label . Clique e arraste o mouse em uma área vazia da janela para criar um novo Label. Na paleta Properties , altere sua propriedade Name (categoria Misc ) para lblAloMundo . Altere sua propriedade Content (categoria Content ) para Olá, WPF! . Pressione F5 e veja que este programa já está funcionando, como mostra a Figura 2:

Figura 2 – Primeiro programa WPF em execução

Feche o programa e verifique na aba XAML Code do editor o código XAML da janela. Você pode alterar as características tanto no designer quanto no XAML, e as duas vistas ficam em sincronia. No XAML, altere o valor do atributo Content do Label para WPF é muito fácil . Volte para o designer e veja que a alteração se reflete nesta vista também.

Na paleta Timeline selecione o documento DocumentRoot e na paleta Appearance altere seu fundo para um gradiente simples. Isto é feito selecionando o botão de gradiente na paleta e alterando as cores de início e final, selecionando os ícones na barra da paleta e alterando as cores. Verifique que as mudanças feitas aqui se refletem nas propriedades do objeto no código XAML também:

<Grid.Background> 
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> 
<LinearGradientBrush.RelativeTransform> 
<TransformGroup> 
<TranslateTransform X="-0.5" Y="-0.5"/> 
<ScaleTransform ScaleX="1" ScaleY="1"/> 
<SkewTransform AngleX="0" AngleY="0"/> 
<RotateTransform Angle="90"/> 
<TranslateTransform X="0.5" Y="0.5"/> 
<TranslateTransform X="0" Y="0"/> 
</TransformGroup> 
</LinearGradientBrush.RelativeTransform> 
<GradientStop Color="sc#1, 0.28061232, 0.2235669, 0.939156055" Offset="0"/> 
<GradientStop Color="sc#1, 0.5, 0.5, 0.5" Offset="1"/> 
<GradientStop Color="#FF000000" Offset="1"/> 
<GradientStop Color="sc#1, 0.6311629, 0.656368852, 0.7287432" Offset="1"/> 
</LinearGradientBrush> 
</Grid.Background> 

Acabamos de criar uma aplicação StandAlone, um executável .NET. Se quisermos, podemos facilmente transformar este em um programa Web. Para isto, basta selecionar a opção Project/Deployment Settings (Figura 3) e configurar a aplicação como uma aplicação Web com confiabilidade parcial (partial trust).

Figura 3 – Configuração para criação de aplicação Web

Ao teclar F5 , nossa aplicação é executada como uma aplicação Web, como mostra a Figura 4.

Figura 4 – Aplicação WPF sendo executada no Internet Explorer

As aplicações WPF para a Web podem ser executadas atualmente apenas no Internet Explorer 6.0 ou superior, e em máquinas onde o .NET 3.0 está instalado. Em breve, o módulo Web será integrado ao WPF/E, podendo ser executado em outros browsers e sistemas.

Mude as opções de criação do projeto para voltar a ser uma aplicação StandAlone e clique F5 para executar o projeto novamente.

Nosso programa está bastante simples e não executa nenhuma ação. Iremos agora ao Visual Studio para editar o código relativo a ele. Neste artigo, iremos usar o Visual Studio 2005 Standard Edition, mas você pode utilizar o Visual C# Express Edition sem nenhuma modificação.

Salve o projeto e feche o Expression Interface Designer. Abra o Visual Studio e selecione File/Open Project/Solution ... Abra o projeto csproj salvo anteriormente. Note que nenhuma alteração precisa ser feita para mudarmos de ambiente. Abra a paleta Solution Explorer e dê dois cliques nos arquivos Scene1.xaml e Scene1.xaml.cs .

No XAML, adicione aos atributos do label o atributo MouseDown=“lblAloMundo_MouseDown” :

<Label ... x:Name="lblAloMundo" Content="WPF é muito fácil" MouseDown="lblAloMundo_MouseDown"/>

Isto adiciona à label um manipulador para o evento MouseDown , que criaremos a seguir.

Abra o arquivo xaml.cs e digite o seguinte código:

public void lblAloMundo_MouseDown(object sender, System.Windows.Input.MouseEventArgs e)

{

System.Windows.MessageBox.Show("Você clicou no label");

}

Execute o programa novamente pressionando F5 . Ao clicar no label, veja que o código C# está sendo executado, como mostra a Figura 5.

Figura 5 – Aplicação executando o manipulador do evento MouseDown do label

Adicionar o manipulador do evento diretamente no XAML não é a maneira mais simples de se trabalhar com manipuladores de eventos. Nos próximos artigos, abordaremos outras maneiras de se trabalhar com manipuladores de eventos no WPF.

Conclusões

Neste artigo, mostramos uma breve introdução ao WPF e desenvolvemos um pequeno programa usando o Expression Interface Designer e o Visual Studio. Nos próximos artigos, iremos aprofundar esse conceito, apresentando alguns dos recursos mais avançados que podem ser obtidos com esta nova tecnologia. Até lá!

Links Interessantes

MSDN Library: Windows SDK - http://windowssdk.msdn.microsoft.com/en-us/library/default.aspx

Seção sobre WPF do Windows SDK - http://windowssdk.msdn.microsoft.com/en-us/library/ms754130.aspx

Site do MS Expression – https://www.microsoft.com/expression/

Site do .net 3.0 - https://www.netfx3.com

MSDN - .net 3.0 - https://msdn.microsoft.com/winfx/