Idioma: HTML | XAML

Início rápido: adicionando controles e manipulando eventos (XAML)

Applies to Windows and Windows Phone

Crie a interface do usuário do seu aplicativo usando controles, como botões, caixas de texto e caixas de combinação. Mostramos aqui como adicionar controles ao seu aplicativo. Geralmente você usa este padrão ao trabalhar com controles:

  • Você adiciona um controle à interface do usuário do seu aplicativo.
  • Você define as propriedades no controle, como largura, altura e cor de primeiro plano.
  • Você aplica algum código ao controle para que ele faça algo.

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

Pré-requisitos

Supomos que você saiba como criar um aplicativo usando Microsoft Visual Basic, C#, C++ e linguagem XAML. Para obter instruções sobre como criar seu primeiro aplicativo, veja Criar seu primeiro aplicativo da Windows Store em C# ou Visual Basic ou Criar seu primeiro aplicativo da Windows Store em C++.

Adicionando um controle

Você pode adicionar um controle a um aplicativo de várias maneiras:

  • Use uma ferramenta de design, como o Blend para Visual Studio ou o designer XAML do Microsoft Visual Studio.
  • Adicione o controle à marcação XAML no editor XAML do Visual Studio.
  • Adicione o controle usando código. Os controles adicionados usando código ficam visíveis quando o aplicativo é executado, mas não no designer XAML do Visual Studio.

A documentação de cada controle inclui um tópico de instruções que descreve como adicionar o controle em XAML, código ou usando uma ferramenta de design. Por exemplo, para adicionar um controle de Button, veja Como adicionar um botão.

Aqui, nós usamos o Visual Studio como a ferramenta de design, mas você pode realizar as mesmas tarefas, além de outras, no Blend para Visual Studio. Para saber mais, veja Criando uma interface do usuário usando o designer XAML.

No Visual Studio, quando você adiciona e manipula controles no seu aplicativo, você pode usar muitos dos recursos do programa, incluindo a Caixa de Ferramentas, o designer XAML, o editor XAML e a janela Propriedades.

A Caixa de Ferramentas do Visual Studio exibe muitos dos controles que você pode usar no seu aplicativo. Para adicionar um controle ao aplicativo, clique duas vezes nele na Caixa de Ferramentas. Por exemplo, quando você clica duas vezes no controle TextBox, a linguagem XAML é adicionada ao modo de exibição XAML.


 <TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>

Você também pode arrastar o controle da Caixa de Ferramentas para o designer XAML.

Definindo o nome de um controle

Para trabalhar com um controle usando código, defina o atributo x:Name e faça referência a ele pelo nome em seu código. Você pode definir o nome na janela Propriedades do Visual Studio ou em XAML. Veja como mudar o nome do controle atualmente selecionado usando a caixa de texto Nome na parte superior da janela Propriedades.

Hh465336.wedge(pt-br,WIN.10).gifPara nomear um controle

  1. Selecione o elemento a ser nomeado.
  2. No painel Propriedades, digite um nome na caixa de texto Nome.
  3. Pressione Enter para confirmar o nome.
Definindo o nome no designer

Veja como você pode mudar o nome de um controle no editor XAML alterando o atributo x:Name.


<Button x:Name="Button1" Content="Button"/>

Definindo propriedades de controle

Use propriedades para especificar a aparência, o conteúdo e outros atributos de controles. Quando você adiciona um controle usando a ferramenta de design, algumas propriedades que controlam o tamanho, a posição e o conteúdo podem ser definidas pelo Visual Studio. Você pode alterar algumas propriedades, como Width, Height ou Margin selecionando e manipulando o controle no modo Design. Esta ilustração mostra algumas das ferramentas de redimensionamento que estão disponíveis no modo Design.

TextBlox no designer

Talvez você queira que o controle seja dimensionado e posicionado automaticamente. Nesse caso, você pode redefinir as propriedades de tamanho e posição que o Visual Studio define.

Hh465336.wedge(pt-br,WIN.10).gifPara redefinir uma propriedade

  1. No painel Propriedades, clique no marcador de propriedade ao lado do valor da propriedade. O menu Propriedade é aberto.
  2. No menu Propriedade, clique em Redefinir.

    Menu Propriedade

Você pode definir as propriedades de controles na janela Propriedades, em XAML ou em código. Por exemplo, para alterar a cor de primeiro plano de um Button, defina a propriedade Foreground do controle. Esta ilustração mostra como definir a propriedade Foreground usando o seletor de cor na janela Propriedades.

Definindo o primeiro plano no designer

Veja como definir a propriedade Foreground no editor XAML. Observe a janela do Visual Studio IntelliSense que é aberta para ajudá-lo com a sintaxe.

Definindo o primeiro plano em XAML

Definindo o primeiro plano em XAML

Aqui está o XAML resultante depois que você define a propriedade Foreground.


<Button x:Name="Button1" Content="Button" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Foreground="Beige"/>

Aqui está como definir a propriedade Foreground em código.


Button1.Foreground = new SolidColorBrush(Windows.UI.Colors.Beige);

Criando um manipulador de eventos

Todos os controles possuem eventos que permitem que você responda a ações de seu usuário ou a outras mudanças em seu aplicativo. Por exemplo, um controle Button possui um evento Click que é gerado quando o usuário clica no Button. Crie um método, chamado manipulador de eventos, para manipular o evento. Você pode associar o evento de um controle a um método de manipulador de eventos na janela Propriedades, em XAML ou em código. Para saber mais sobre eventos, veja Visão geral de eventos e eventos roteados.

Para criar um manipulador de eventos, selecione o controle e clique na guia Eventos, na parte superior da janela Propriedades. A janela Propriedades lista todos os eventos disponíveis para esse controle. Veja alguns dos eventos para um Button.

Eventos TextBox

Para criar um manipulador de eventos com o nome padrão, clique duas vezes na caixa de texto ao lado do nome do evento na janela Propriedades. Para criar um manipulador de eventos com um nome personalizado, digite o nome de sua escolha na caixa de texto e pressione Enter. O manipulador de eventos é criado e o arquivo code-behind é aberto no editor de código. O método de manipulador de eventos tem dois parâmetros. O primeiro é sender, que é uma referência ao objeto ao qual o manipulador está anexado. O parâmetro sender é um tipo de Object. Geralmente, você convertesender em um tipo mais preciso se espera verificar ou alterar o estado no próprio objeto sender. Com base no design do seu próprio aplicativo, você espera um tipo que seja seguro no qual converter sender, com base no local onde o manipulador foi anexado. O segundo valor são dados de evento. Esse valor geralmente aparece em assinaturas como o parâmetro e.

Aqui está o código que manipula o evento Click de um Button nomeado Button1. Quando você clica no botão, a propriedade Foregrounddo Button em que você clicou é definida para a cor a azul.


private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}

Você também pode associar um manipulador de eventos em XAML. No editor XAML, digite o nome do evento que deseja manipular. O Visual Studio mostra uma janela IntelliSense quando você começa a digitar. Depois de especificar o evento, você pode clicar duas vezes em <Novo Manipulador de Eventos> na janela IntelliSense para criar um novo manipulador de eventos com o nome padrão, ou selecionar um manipulador de eventos existente na lista. Aqui está a janela IntelliSense que é exibida para ajudá-lo a criar um novo manipulador de eventos.

Criando o manipulador de eventos TextChanged

Este exemplo mostra como associar um evento Click a um manipulador de eventos nomeado Button_Click em XAML.


<Button Name="Button1" Content="Button" Click="Button_Click"/>

Você também pode associar um evento ao manipulador de eventos no code-behind. Veja como associar um manipulador de eventos em código.


Button1.Click += new RoutedEventHandler(Button_Click);

Novos controles

Se você usa outras plataformas XAML, pode estar interessado nesses controles que são novos para o Windows 8.

Para saber mais sobre eles e outros controles, veja o tópico Lista de controles.

E agora?

Agora você já sabe as noções básicas de como adicionar um controle ao seu aplicativo, configurar propriedades de controle e criar manipulares de eventos. Em seguida, você aprenderá mais sobre quais controles estão disponíveis: Lista de controles ouControles por função. Você também pode ver vários controles da interface de usuário do Windows baixando o Exemplo de controles básicos.

Tópicos relacionados

Visão geral de eventos e eventos roteados
Lista de controles
Criando uma interface do usuário com o Designer XAML
Mapa para criar aplicativos em C#, C++ ou VB

 

 

Mostrar:
© 2014 Microsoft