Introdução a controles e padrões

No desenvolvimento de aplicativos do Windows, um controle é um elemento de interface do usuário 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 a 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 tornar algo novo. Por exemplo, o padrão de lista/detalhes é uma maneira de usar um controle SplitView para 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, você pode usar um controle 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 diretrizes 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á três 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 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 (Linguagem de Marcação extensível) 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, ao adicionar e manipular controles em 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 em seu aplicativo. Para adicionar um controle ao seu aplicativo, clique duas vezes nele na Caixa de Ferramentas. Por exemplo, quando você clica duas vezes no controle TextBox, esse XAML é adicionado à 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.

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 chamado.
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 de controles. Quando você adiciona um controle usando uma ferramenta de design, algumas propriedades que controlam o tamanho, a posição e o 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 no modo design. Esta ilustração mostra algumas das ferramentas de redimensionamento disponíveis no modo Design.

Talvez você queira permitir que o controle seja dimensionado e posicionado automaticamente. Nesse caso, você pode redefinir as propriedades de tamanho e posição definidas pelo Visual Studio 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 no código. Por exemplo, para alterar a cor do primeiro plano de um Botão, 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 IntelliSense do Visual Studio que é aberta para ajudá-lo com a sintaxe.

Aqui está o XAML resultante depois que você define 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 de seu usuário ou outras alterações em seu aplicativo. Por exemplo, um controle Button tem um evento Click que é gerado quando um usuário clica no Botão. Você cria um método, chamado de manipulador de eventos, para lidar com o evento. Você pode associar o evento de um controle a um método de manipulador de eventos na janela Propriedades, no XAML ou no código. Para obter mais informações sobre eventos, consulte Eventos e visão geral de 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 um 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 do manipulador de eventos tem dois parâmetros. A primeira é sender, que é uma referência ao objeto em que o manipulador está anexado. O sender parâmetro é um tipo object . Normalmente, você faz a conversão de sender para um tipo mais preciso se espera verificar ou alterar o estado do próprio objeto sender. Com base no seu próprio design de aplicativo, você espera um tipo que seja seguro para converter sender, com base em onde o manipulador está anexado. O segundo valor é os dados de evento, que geralmente aparecem em assinaturas como o parâmetro e ou args.

Aqui está o código que manipula o evento Click de um botão chamado Button1. Quando você clica no botão, a propriedade Foreground 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 no 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 do 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 no XAML.

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

Você também pode associar um evento ao seu manipulador de eventos no código subjacente (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 controles por função
• Namespace Windows.UI.Xaml.Controls
• Layout
• Estilo
• Usabilidade