Guia de início rápido: crie uma interface do usuário com XAML
Recolher sumário
Expandir sumário

Início rápido: criar uma interface do usuário com XAML (XAML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Ao escolher desenvolver o aplicativo em Microsoft Visual Basic, C# ou extensões de componente Visual C++ (C++/CX), você usa XAML para definir a interface do usuário. XAML é uma linguagem declarativa que você pode usar para criar uma interface do usuário do aplicativo, como controles, formas, texto e outros conteúdos apresentados na tela. Se você estiver familiarizado com a programação de Web, pode pensar em XAML como semelhante a HTML. Da mesma forma que HTML, XAML é composto de elementos e atributos. Mas XAML é baseado em XML e portanto precisa seguir regras de XML, que incluem ser bem formado. Você pode se perguntar, “Por que devo me importar com o XAML se só vou usar ferramentas como o Microsoft Visual Studio ou o Blend for Visual Studio para criar a interface do usuário?" Apesar de existirem ferramentas para gerar marcação, invariavelmente você desejará se aprofundar para entender XAML. Além disso, às vezes é simplesmente mais fácil codificar a interface do usuário manualmente quando você quer sintonizar o controle ou quer saber o que está acontecendo.

Mapa: como este tópico está relacionado aos outros? Veja:

Pré-requisitos

Nós supomos que você saiba como criar um aplicativo do Tempo de Execução do Windows básico usando Visual Basic, C#, ou C++. Para instruções sobre como criar seu primeiro aplicativo do Tempo de Execução do Windows, veja Criando seu primeiro aplicativo da Windows Store em C#, C++ ou Visual Basic.

Exemplo de XAML

Veja um exemplo de XAML que cria um botão.


<Grid Margin="12,0,12,0">
    <Button Content="Click Me"/>
</Grid>

Use o elemento <Button> para especificar o controle Button. Deixe o próprio tamanho de botão dinamicamente quando puder, ou usar os atributos Width e Height para especificar um tamanho exato quando necessário. O <Grid> é gerado quando você cria um novo aplicativo do Tempo de Execução do Windows em C++, C# ou Visual Basic no Visual Studio e é usado para dispor objetos. Para saber mais sobre o layout do XAML, veja o guia de início rápido: Definindo layouts.

Você pode usar Visual Studio para gerar o XAML. Por exemplo, você pode arrastar um botão da Caixa de Ferramentas para a superfície de design, ou clicar duas vezes no Botão na Caixa de Ferramentas.

Interface do usuário Caixa de Ferramentas.

Veja o XAML que o Visual Studio poderia gerar.


<Grid>
    <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>

O Visual Studio adiciona atributos extras, como HorizontalAlignment e às vezes Margin , para posicionar o botão. Talvez você não queira esta marcação extra se as suas necessidades forem muito específicas ou se você quiser fazer alguma reformulação posterior. Nesse caso, simplesmente exclua o atributo.

Um aspecto de usar um idioma declarativo como XAML é ter uma alguma separação entre a marcação que compõe a interface do usuário e o código que faz o aplicativo fazer alguma coisa. Por exemplo, um designer em sua equipe poderia projetar uma interface do usuário e passar o XAML para o desenvolvedor para adicionar com o código de procedimentos. Mesmo se o designer e o desenvolvedor forem a mesma pessoal (como frequentemente são), você pode manter os aspectos visuais nos arquivos XAML (.xaml) e o seu código de IU de procedimentos nos arquivos de suporte ao código (.cs e .vb).

O XAML só é código de procedimentos (só mais fácil)

Os elementos XAML, como <Button />, são o equivalente a instanciar os objetos no código de procedimentos. Por exemplo, considere este XAML.


<Grid x:Name="ContentPanel" Margin="12,0,12,0">
    <Button Height="72" Width="160" Content="Click Me" />
</Grid>

A seguir, veja como este XAML poderia ser parcialmente substituído por código escrito em C# ou Visual Basic.


// Initialize the button
Button myButton = new Button();
// Set its properties
myButton.Width = 160;
myButton.Height = 72;
myButton.Content = "Click Me";
// Attach it to the visual tree, specifically as a child of
// a Grid object (named 'ContentPanel') that already exists. In other words, position
// the button in the UI.
ContentPanel.Children.Add(myButton);

Para a interface do usuário, XAML é mais fácil de ler e mais compacto do que código de procedimentos. Mas em situações raras é necessário usar código de procedimentos para criar interface do usuário dinamicamente.

Propriedades

Há dois modos de especificar valores de propriedade em XAML.

  • Sintaxe do atributo
  • Sintaxe de elemento da propriedade

A sintaxe do atributo é a sintaxe attribute="value" que você viu nos exemplos anteriores e que você já deve conhecer do HTML. No exemplo em seguida, criamos um Rectangle vermelho. Nós definimos o atributo Fill para um nome de cor predefinido, que o analisador XAML converte em um SolidColorBrush apropriado para a propriedade Preenchimento.


<Rectangle Fill="Red" />

Alternativamente, você poderia especificar o valor de cor usando a sintaxe do elemento de propriedade.


<Rectangle>
    <Rectangle.Fill>
        <SolidColorBrush Color="Red"/>
    </Rectangle.Fill>
</Rectangle>

Neste caso, você especifica explicitamente o objeto SolidColorBrush que corresponde ao tipo necessário para a propriedade Fill, em vez de simplesmente usar a cadeia de caracteres "Vermelho". Deste exemplo, você poderia deduzir que a sintaxe de elemento da propriedade é simplesmente uma forma prolixa de fazer a mesma coisa. Mas nem todos os valores de propriedade podem ser especificados usando uma cadeia de caracteres de atributo simples. Nem todos os tipos possuem conversores de tipo das cadeias de caracteres. Além disso, se você precisa especificar várias propriedades de um objeto usado como valor de uma propriedade, provavelmente precisará usar sintaxe de elemento da propriedade. Este exemplo cria um Rectangle, mas em vez de um preenchimento vermelho simples, ele usa um gradiente criado por LinearGradientBrush.


<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
        </LinearGradientBrush> 
    </Rectangle.Fill>
</Rectangle>

Gradiente multicolorido.

A propriedade Fill usa um objeto complexo, LinearGradientBrush, para criar o gradiente. Em casos assim, você precisa usar a sintaxe do elemento da propriedade em vez de simplesmente especificar o valor como uma cadeia associada a um atributo.

XAML e a árvore visual

No XAML, você tem elementos, como <Button> e <Grid>, que podem ter outros elementos (nós) abaixo deles (filhos). Esta relação de pai/filho especifica coisas do tipo como os objetos são posicionados na tela e como eles respondem a eventos iniciados pelo usuário. Considere este exemplo.


<Grid x:Name="ContentPanel" Background="Red" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel Margin="20" Background="Blue">
        <TextBlock x:Name="firstTextBlock" FontSize="30">First TextBlock</TextBlock>
        <TextBlock x:Name="secondTextBlock" FontSize="30">Second TextBlock</TextBlock>
        <TextBlock x:Name="thirdTextBlock" FontSize="30">Third TextBlock</TextBlock>
    </StackPanel>
</Grid>

O StackPanel azul está contido em um Grid vermelho. Os elementos TextBlock estão contidos dentro de StackPanel (estes elementos TextBlock são filhos de StackPanel). Além disso, os elementos TextBlock estão empilhados, um no topo do outro, na ordem que são declarados em XAML.

Este diagrama de árvore mostra as relações entre os elementos.

O diagrama de árvore que mostra a hierarquia dos elementos.

Além de determinar como o conteúdo é apresentado, a árvore visual também pode afetar como os eventos são processados. Muitos eventos que estão relacionados à interface do usuário e à entrada lançam eventos para cima na árvore. Por exemplo, você pode anexar um manipulador de evento ao StackPanel que trata quando um usuário pressiona/clica em qualquer um dos objetos TextBlock. Veja como adicionar um manipulador de evento PointerPressed chamado "commonHandler" ao StackPanel do diagrama.


<Grid Background="Red" x:Name="ContentPanel" Margin="12,0,12,0">
    <StackPanel Margin="20" Background="Blue" PointerPressed="commonHandler">
        <TextBlock x:Name="firstTextBlock" FontSize="30" >First TextBlock</TextBlock>
        <TextBlock x:Name="secondTextBlock" FontSize="30" >Second TextBlock</TextBlock>
        <TextBlock x:Name="thirdTextBlock" FontSize="30" >Third TextBlock</TextBlock>
    </StackPanel>
</Grid>

Veja o código de procedimentos para tratar do evento.


private void commonHandler(object sender, PointerRoutedEventArgs e)
{
FrameworkElement feSource = e.OriginalSource as FrameworkElement;
switch (feSource.Name)
{
    case "firstTextBlock":
        firstTextBlock.Text = firstTextBlock.Text + " Click!";
        break;
    case "secondTextBlock":
        secondTextBlock.Text = secondTextBlock.Text + " Click!";
        break;
    case "thirdTextBlock":
        thirdTextBlock.Text = thirdTextBlock.Text + " Click!";
        break;
    }
}

Quando você executa este exemplo e clica/pressiona em um TextBlock, o evento é capturado pelo TextBlock, mas o evento se move para cima para seu elemento pai (o StackPanel), que então trata do evento.

Este diagrama mostra como o evento se move para cima na árvore.

Diagrama de árvore visual mostrando como um evento sobe na árvore.

Como o evento continua a subir na árvore, você poderia ouvir o evento PointerPressed no elemento Grid também.

Para saber mais sobre eventos roteados como escrever manipuladores, veja Visão geral de eventos e eventos roteados.

Um guia rápido para os atributos XAML e extensões de marcação

Se você produz ou examina XAML em um editor após produzi-lo com as ferramentas de design do Visual Studio, frequentemente você usa certos conceitos de marcação que são exclusivos para XAML e não são diretamente representados na linguagem de programação de suporte. Esta é uma lista de alguns destes conceitos.

  • O atributo x:Name Adicione este atributo em qualquer elemento de objeto XAML onde você quer poder referenciar a instância do tempo de execução criada como parte de sua lógica code-behind. A cadeia de caracteres que você especifica para x:Name se torna o nome da instância criada dentro das classes parciais que estão correlatas ao seu XAML e você pode referenciar a instância usando o nome. O Visual Studio ou Blend for Visual Studio frequentemente adiciona x:Name ao XAML automaticamente.
  • O atributo x:Key Adicione este atributo aos elementos do objeto XAML em uma circunstância particular: quando você está definindo os recursos que estão contidos em um XAML ResourceDictionary. Para saber mais, veja Referências a recursos ResourceDictionary e XAML.
  • O x: em x:Key e em x:Name identifica que estas entidades são definidas pelo namespace XAML para a linguagem do XAML. Isso é o que permite que estes atributos sejam aplicados a qualquer elemento de objeto de XAML, incluindo elementos que representam classes que você definiu.
  • {Binding} é uma extensão de marcação XAML que você usa para estabelecer uma referência de associação de dados em XAML. Para saber mais sobre o conceito de vinculação de dados, veja Início rápido: vinculação de dados a controles ou Visão geral da vinculação de dados.
  • {TemplateBinding} é uma forma especializada de uma declaração de associação que conecta as propriedades de um modelo com as propriedades de tempo de execução da classe que aplica esse modelo. RelativeSource é uma extensão de marcação relacionada que pode definir a propriedade {RelativeSource} de uma associação na marcação.
  • {StaticResource} é uma extensão de marcação que você usa para referenciar qualquer um dos recursos definidos por XAML em um XAML ResourceDictionary. {StaticResource} pega um único argumento, que especifica a mesma cadeia de caracteres como x:Key que você usou para identificar o recurso no ResourceDictionary.
  • Se for preciso especificar um valor null em XAML, use a cadeia de caracteres {x:Null}.

Para saber mais, veja Guia de sintaxe XAML básica Recursos de linguagem (x:) de namespace XAML ou Extensões de namespace para XAML do Tempo de Execução do Windows

Tópicos relacionados

Mapa de aplicativos do Tempo de Execução do Windows em C# ou Visual Basic
Referências a recursos ResourceDictionary e XAML
Visão geral do XAML
Guia de sintaxe XAML básica

 

 

Mostrar:
© 2017 Microsoft