Iniciando com WPF e XAML

A partir de hoje vou deixar aqui as minhas impressões e experiências com o WPF e XAML.

O meu objetivo é anotar os principais pontos desta linguagem de marcação do Framework .NET usada para definir a interface dos programas construídos sobre a plataforma WPF (Windows Presentation Foundation).

XAML – O ponto principal

Um ponto fundamental da linguagem XAML é que cada elemento mapeia uma classe do Framework .NET, logo, ao definir a tag Button você está criando uma instância da classe Button. Cada propriedade é configurada a partir dos atributos sendo que, para configurações de interface mais complexas, provavelmente você precisará definir os controle usando as tags aninhadas.

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox Height="178"
HorizontalAlignment="Left"
Margin="12,12,0,0"
x:Name="listBox1"
VerticalAlignment="Top"
Width="335" />
<Button Content="Carregar"
Height="23"
HorizontalAlignment="Left"
Margin="362,12,0,0"
Name="button1"
VerticalAlignment="Top"
Width="75"
Click="button1_Click" />
</Grid>
</Window>










O código acima serve de exemplo ao que foi dito. Note que existe um elemento de nível mais alto: Window, que é usado para definir a janela principal da aplicação. Dentro deste, existe um elemento Grid (que é um elemento usado para controlar o leiaute da janela) e dentro destes mais dois controles como um controle ListBox e um Button.



Agora, observe a primeira linha do código:



<Window x:Class="WpfApplication1.MainWindow"



Neste ponto do código o atributo x:Class indica que o compilador deve gerar uma classe para maior controle do programa.



Graças ao recurso de Partial Classes do Framework .NET, C# e do Visual Studio 2010, em um projeto WPF esta classe é gerada automaticamente. Note que os nomes do Namespace e da Class correspondem ao declarado no XAML:




   14 namespace WpfApplication1



   15 {



   16   /// <summary>



   17   /// Interaction logic for MainWindow.xaml



   18   /// </summary>



   19   public partial class MainWindow : Window



   20   {



   21 




Acessando os atributos programaticamente



Ao definir o atributo x:Name no XAML, é possível acessar estes controles no código C#:




   26     private void button1_Click(object sender, RoutedEventArgs e)



   27     {



   28       // carrega os dados



   29       string[] lista = new string[] { "Um", "Dois", "Três", "Quatro", "Cinco" };



   30       foreach (var item in lista)



   31       {



   32         listBox1.Items.Add(item);



   33       }



   34     }




Este código preenche o controle ListBox respondendo ao evento Click do Button.



Observe que estes nomes foram definidos no XAML.



Não há diferença ao definir o nome dos controles no XAML pelo atributo Name ou x:Name e, caso o elemento não precise ser acessado pelo código C#, pode ser deixado sem um nome.



Propriedades mais complexas



Considere casos onde você precise criar interfaces mais complexas.



Por exemplo, se quiser mudar as caracteríscas de um button criando um efeito para o fundo. É possível usar um recurso chamado property-element sintax que consiste em definir uma tag secundária, aninhada dentro do elemento principal para definir outras propriedades:




<Button Content="Carregar" 
Height="23"
HorizontalAlignment="Left"
Margin="362,12,0,0"
Name="button1"
VerticalAlignment="Top"
Width="75"
Click="button1_Click">
<Button.Foreground>
<DrawingBrush>

</DrawingBrush>
</Button.Foreground>
</Button>





É necessário conhecer um pouco mais dos elementos da classe Button para poder fazer as devidas formatações, mas, este é o princípio do funcionamento da linguagem.



Attached Properties – propriedades anexadas



Quando os elementos estão aninhados dentro de outros, estes herdam algumas propriedades do elemento principal. Um exemplo disto acontece com os controles que estão dentro do container Grid. Estes herdam elementos como Grid.Row e Grid.Column.




<Button Content="Carregar" 
Height="23"
HorizontalAlignment="Left"
Margin="362,12,0,0"
Name="button1"
VerticalAlignment="Top"
Width="75"
Grid.Row="0"
Click="button1_Click" />





Considerações sobre a linguagem Xml



Como XAML é baseado nesta linguagem, os caracteres especiais que devem ser evitados como “<>&”, por exemplo, devem também ser evitados em XAML.



Logo, uma marcação como a que segue abaixo, não vai funcionar.




<TextBox>
<Texto>
</TextBox>





sendo que se desejar usar os símbolos especiais para maior e menor, você precisa substituir por






<TextBox>
&lt;Texto&gt;
</TextBox>







Há outros pontos a serem considerados. Permaneça de olho no blog que em breve coloco mais coisas por aqui.



Abraço.