XAML Básico

No capítulo anterior, falamos sobe o que é o XAML e para o que você o usa. Mas, como criar um controle em XAML? Como você verá no próximo exemplo, criar um controle em XAML é tão fácil quanto escrever seu nome, cercado por símbolos de menor que (<), e maior que (>). Por exemplo, um botão é criado assim:

<Button>

As tags XAML devem ser finalizadas, seja escrevendo uma tag de finalização ou colocando uma barra no final da tag de abertura:

<Button></Button>

Ou

<Button />

Muitos controles permitem que você coloque conteúdo entre as tags inicial e final, que é então o conteúdo do controle. Por exemplo, um controle Button (botão), permite que você especifique o texto que é mostrado nele, entre as tags inicial e final:

<Button>A button</Button>

Em HTML, escrever com letras maiúsculas ou minúsculas não faz nenhuma diferença, mas em XAML faz. Isso porque o nome do controle deve corresponder a um Tipo (Classe) no .NET Framework. O mesmo vale para nomes de atributos, que devem corresponder às propriedades do controle. Aqui está um exemplo de um botão onde definimos algumas propriedades adicionando atributos à tag:

<Button FontWeight="Bold" Content="A button" />

Definimos a propriedade FontWeight, nos dando um texto em negrito e, em seguida, definimos a propriedade Content, que é o mesmo que escrever o texto entre as tags inicial e final. No entanto, todos os atributos de um controle também podem ser definidos como este do exemplo abaixo, onde eles aparecem como tags filhas do controle principal, usando a notação Controle-Ponto-Propriedade:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

O resultado é exatamente o mesmo que acima, então neste caso, é tudo uma questão de sintaxe e nada mais. No entanto, muitos controles permitem um conteúdo diferente de texto, por exemplo, outros controles. Aqui vai mais um exemplo onde temos texto em cores diferentes no mesmo botão usando vários controles TextBlock dentro dele:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

A propriedade Content só permite um único elemento filho, portanto, usamos um WrapPanel para conter os blocos de texto com cores diferentes. Painéis, como o WrapPanel, desempenham um papel importante no WPF e vamos discuti-los em muito mais detalhes posteriormente - por enquanto, considere-os apenas como contêineres para outros controles.

O mesmo resultado pode ser alcançado com a seguinte marcação, que é simplesmente outra maneira de escrever a mesma coisa:

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

Code vs. XAML

Espero que os exemplos acima mostrem que o XAML é muito fácil de escrever, mas com muitas maneiras diferentes de fazê-lo, e se você acha que o exemplo acima é um monte de marcação para obter um botão com texto em cores diferentes, tente comparando-o a fazer exatamente a mesma coisa em C#:

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

É claro que o exemplo acima poderia ser escrito de forma menos explícita e usar mais syntax-sugar, mas acho você entendeu o que eu quero dizer: XAML é curto e conciso para descrever interfáces gráficas.