Introdução aos controles e padrões

No desenvolvimento de aplicativos do Windows, um controlo é um elemento da interface do utilizador que exibe conteúdo ou permite interação. Você cria a interface do usuário para seu aplicativo usando controles como botões, caixas de texto e caixas de combinação para exibir dados e obter entrada do usuário.

APIs importantes: namespace Windows.UI.Xaml.Controls

Um padrão é uma receita para modificar um controle ou combinar vários controles para criar algo novo. Por exemplo, o padrão de lista/detalhes é uma maneira de usar um controle SplitView para a navegação do aplicativo. Da mesma forma, você pode personalizar o modelo de um controle NavigationView para implementar o padrão de guia.

Em muitos casos, pode-se usar um controlo como está. Mas os controles XAML separam a função da estrutura e da aparência, para que você possa fazer vários níveis de modificação para torná-los adequados às suas necessidades. Na seção Estilo , você pode aprender a usar estilos XAML e modelos de controle para modificar um controle.

Nesta seção, fornecemos orientação para cada um dos controles XAML que você pode usar para criar a interface do usuário do aplicativo. Para começar, este artigo mostra como adicionar controles ao seu aplicativo. Há 3 etapas principais para usar controles em seu aplicativo:

• Adicione um controle à interface do usuário do aplicativo.
• Defina propriedades no controle, como largura, altura ou cor de primeiro plano.
• Adicione código aos manipuladores de eventos do controle para que ele faça algo.

Adicionar um controlo

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

• Use uma ferramenta de design como o Blend for Visual Studio ou o designer XAML (Extensible Application Markup Language) do Microsoft Visual Studio.
• Adicione o controle à marcação XAML no editor XAML do Visual Studio.
• Adicione o controle no código. Os controles que você adiciona no código ficam visíveis quando o aplicativo é executado, mas não são visíveis no designer XAML do Visual Studio.

No Visual Studio, quando você adiciona e manipula controles em seu aplicativo, 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 em seu aplicativo. Para adicionar um controle ao seu aplicativo, clique duas vezes nele na Caixa de Ferramentas. Por exemplo, ao clicar duas vezes no controlo TextBox, este XAML é adicionado à vista XAML.

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

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

Definir o nome de um controle

Para trabalhar com um controle no código, defina seu 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 definir o nome do controle selecionado no momento usando a caixa de texto Nome na parte superior da janela Propriedades.

Para 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.

Veja como definir o nome de um controle no editor XAML adicionando o atributo x:Name.

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

Definir as propriedades de controle

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

Você pode querer deixar o controle ser dimensionado e posicionado automaticamente. Nesse caso, você pode redefinir as propriedades de tamanho e posição que o Visual Studio definiu para você.

Para redefinir uma propriedade

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

Você pode definir propriedades de controle 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 cores na janela Propriedades.

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

Aqui está o XAML resultante depois de definir a propriedade Foreground.

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

Veja como definir a propriedade Foreground no código.

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

Button1().Foreground(Media::SolidColorBrush(Windows::UI::Colors::Beige()));

Criar um manipulador de eventos

Cada controle tem eventos que permitem que você responda a ações do usuário ou outras alterações no aplicativo. Por exemplo, um controle Button tem um evento Click que é gerado quando um usuário clica no Button. Você cria um método, chamado manipulador de eventos, para manipular o evento. Você pode associar o evento de um controle a um método manipulador de eventos na janela Properties, 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. Aqui estão alguns dos eventos para o Botão.

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 manipulador de eventos tem 2 parâmetros. O primeiro é sender, que é uma referência ao objeto onde o manipulador está anexado. O sender parâmetro é um tipo de objeto . Normalmente, você converte sender para um tipo mais preciso se espera verificar ou alterar o estado do próprio objeto sender. Com base em seu próprio design de aplicativo, você espera um tipo que seja seguro para transmitir o sender para, com base em onde o manipulador está anexado. O segundo valor é os dados de evento, que geralmente aparecem nas assinaturas como o parâmetro e ou args.

Aqui está o código que manipula o evento Click de um Button chamado Button1. Quando você clica no botão, a propriedade Primeiro plano do botão clicado é definida como azul.

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

#MainPage.h
struct MainPage : MainPageT<MainPage>
    {
        MainPage();
        ...
        void Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
    };
    
#MainPage.cpp
void MainPage::Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        auto b{ sender.as<winrt::Windows::UI::Xaml::Controls::Button>() };
        b.Foreground(Media::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 você deseja manipular. O Visual Studio mostra uma janela do IntelliSense quando você começa a digitar. Depois de especificar o evento, você pode clicar <New Event Handler> duas vezes 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 do IntelliSense que aparece. Ele ajuda você a criar um novo manipulador de eventos ou selecionar um manipulador de eventos existente.

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

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

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

Button1.Click += new RoutedEventHandler(Button_Click);

Button1().Click({ this, &MainPage::Button1_Click });

Tópicos relacionados

• Índice de controlos por função
• Namespace Windows.UI.Xaml.Controls
• Esquema
• Estilo
• Usabilidade