Conceitos do XAML (zãmeu) - Parte I

Primeiramente gostaria de pedir desculpas pela demora para postar novos artigos, estou tendo muito problema com formatação dos códigos, perco mais tempo formatando do que fazendo o artigo. Desculpas também pelos erros de português.

Neste artigo vou explicar mais detalhadamente alguns conceitos básicos do XAML (lê-se zãmeu, no português ajeitado ;D). Este artigo é composto pelos seguintes itens:

• O XAML;
• Propriedades e Layout;
• Containeres;
• Brushes;
• Desenhos geométricos;

O XAML

Não podemos viver sem a definição concreta do XAML. Então ai está ;D.

O XAML (sigla de eXtensible Application Markup Language) foi criado pelo Microsoft e é a base do WPF (Windows Presentation Foundation) para criar interfaces de usuário (UI) ricas de forma muito simples e rápida. É uma linguagem declarativa baseado em XML. Você pode criar controles, nomeá-los, modificar propriedades de layout, enfim, produzir a UI. Ela separa a UI da lógica da aplicação através dos arquivos code-behind (os .cs, caso use C# como linguagem de programação). O mais importante é que o XAML representa a instanciação dos objetos na lógica da aplicação, isso é, o código conhece os controles criados dentro de um arquivo .xaml (conhecidos como managed objects). Com isso temos facilidades como depuração do projeto e acesso aos objetos da UI. Outra vantagem muito importante é que a estrutura do XAML permite não só separar a lógica do design como as duas profissões, o programador e o designer.

Propriedades e Layout

A maioria dos elementos que fazem parte do layout do Silverlight possui propriedades sendo elas próprias dos controles, herdadas de uma classe pai ou as chamadas "attached properties" que significa propriedades "amarradas". As Attached Properties são propriedades globais, muitas vezes modificam a apresentação de um controle que a utiliza. No exemplo abaixo, temos o XAML do Page.xaml (como criar projetos Silverlight utilizando Visual Studio 2008).

<UserControl x:Class="BlogXamlBasics.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
  <Button Content="Clique aqui!"
          Width="100" Height="50"
          Canvas.Left="100" Canvas.Top="5" />
</Canvas>
</UserControl>

Como pode notar, um caso bem comum de attached properties é a propriedade Canvas.Left ou Canvas.Top que define em que ponto o botão no XAML acima será desenhado. Estas propriedades não pertencem ao botão, ela é uma Attached property, uma variável global. Supondo que o não fosse o Canvas o container de Page.xaml e sim um Grid, por exemplo, esta propriedade não seria considerada, pois o botão não está dentro de um Canvas.

A apresentação dos controles XAML segue o estilo em camadas, o último controle aparece na frente dos outros caso esteja-os sobrepondo/cobrindo. O XAML abaixo mostra este exemplo, a figura 1 mostra a aplicação em execução.

<UserControl x:Class="BlogXamlBasics.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
  <Rectangle Fill="Green" Width="100" Height="100"
             Canvas.Top="50" Canvas.Left="150"/>
  <Rectangle Fill="Red" Width="100" Height="100"
             Canvas.Top="90" Canvas.Left="200"/>
</Canvas>
</UserControl>

Note que o retângulo vermelho esta cobrindo o verde, podemos mudar esta situação com a attached property Canvas.ZIndex, o controle com essa propriedade que possuir maior valor será visível acima de todos os outros. Já esta propriedade, ela pode ser considerada para outros controles containers como o Grid. Para que o retângulo verde sobreponha o vermelho basta definir o XAML de Page.xaml como mostrado abaixo.

<UserControl x:Class="BlogXamlBasics.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
  <Rectangle Fill="Green" Width="100" Height="100"
             Canvas.Top="50" Canvas.Left="150"
             Canvas.ZIndex="1"/>
  <Rectangle Fill="Red" Width="100" Height="100"
             Canvas.Top="90" Canvas.Left="200"/>
</Canvas>
</UserControl>

A figura abaixo mostra a aplicação em execução.

O Silverlight dispõe de inúmeras propriedades, não só attached properties, que constroem e estilizam interfaces de usuário (User Interfaces, UI), abaixo, coloquei algumas das mais utilizadas e para que servem.

Opacity (Opacidade)

Como o próprio nome já diz esta propriedade define a opacidade de um elemento. Seu valor pode ser atribuído de 0 (totalmente transparente) até 1 (totalmente opaco).

Cursor

Esta propriedade define a um determinado elemento qual cursor será visível quando o mouse pairar sobre ele. Supondo que vamos colocar um Cursor no botão do XAML abaixo. A lista de cursores possíveis está abaixo do XAML.

<Button Cursor="Hand" Content="Clique Aqui!" Width="100"
  Height="50" Canvas.Left="50" Canvas.Top="50"/>

• Arrow;
  
  
• Default – Nenhum cursor de preferência, utiliza o cursor do controle pai, se definido;
  
• Hand – Normalmente utilizado em links;
  
  
• IBean – Normalmente utilizado para seleção de texto;
  
  
• None – Sem cursor;
  
  
• Wait – Indica estado de espera e/ou processamento;
  

HorizontalAlignment e VerticalAlignment

Com essas propriedades podemos alinhar os elementos nos seguintes estilos:

Para a propriedade HorizontalAlignment temos:

• Center - Centraliza o elemento em relação ao seu container;
  
• Left - Posiciona o elemento na parte esquerda do container;
  
• Right - Posiciona o elemento na parte direita do container;
  
• Stretch - Faz com que o elemento preencha toda a parte horizontal do container;

e para a propriedade VerticalAlignment temos:

• Bottom - Posiciona o elemento na parte inferior do container;
  
• Center - Posiciona o elemento no centro do container, imagine um plano cartesiano e os eixos X e Y onde, para VerticalAlignment, o posicionamento é feito no eixo Y;
  
• Stretch - Faz com que o elemento preencha toda a parte vertical do container;
  
• Top - Posiciona o elemento na parte superior do container;

OBS.: Quando digo container me refiro ao controle que reside outro(s) controle(s), não sendo obrigatório os controles Canvas, StackPanel ou Grid.

Continua no próximo episódio... ;D