Botões

Artigo
2025-03-24

Um botão dá ao usuário uma maneira de acionar uma ação imediata. Alguns botões são especializados para tarefas específicas, como navegação, ações repetidas ou apresentação de menus.

A estrutura Extensible Application Markup Language (XAML) fornece um controle de botão padrão, bem como vários controles de botão especializados.

Controlo	Descrição
Botão	Um botão que inicia uma ação imediata. Pode ser usado com um evento Click ou uma ligação Command.
BotãoRepetir	Um botão que ativa um evento Click continuamente enquanto pressionado.
Botão de Hiperligação (HyperlinkButton)	Um botão com estilo de hiperlink e usado para navegação. Para saber mais sobre hiperlinks, veja Hiperlinks.
Botão de lista pendente	Um botão com uma divisa para abrir um submenu anexado.
BotãoDividido	Um botão com dois lados. Um lado inicia uma ação e o outro lado abre um menu.
BotãoDividirAlternar	Um botão de alternância com dois lados. Um lado liga/desliga, e o outro lado abre um menu.
Botão de Alternância	Um botão que pode estar ligado ou desligado.

Será este o controlo correto?

Use um Button controle para permitir que o usuário inicie uma ação imediata, como enviar um formulário.

Não use um controlo Button quando a ação for navegar para outra página; em vez disso, use um controlo HyperlinkButton. Para saber mais sobre hiperlinks, veja Hiperlinks.

Importante

Para navegação do assistente, use os botões rotulados Voltar e Avançar. Para outros tipos de navegação para trás ou navegação para um nível superior, use um botão Voltar.

Use um controle de RepeatButton quando o usuário quiser acionar uma ação repetidamente. Por exemplo, use um controle de RepeatButton para incrementar ou diminuir um valor em um contador.

Use um DropDownButton controle quando o botão tiver um submenu que contenha mais opções. A seta padrão fornece uma indicação visual de que o botão inclui um menu suspenso.

Use um controlo SplitButton quando quiser que o utilizador possa iniciar uma ação imediata ou escolher entre opções adicionais por si só.

Use um controlo ToggleButton quando quiser que o utilizador possa alternar de forma imediata entre dois estados mutuamente exclusivos, e um botão é a melhor adequação para as suas necessidades de interface do utilizador. A menos que a sua interface de utilizador se beneficie de um botão, pode ser uma escolha melhor usar um AppBarToggleButton, CheckBox, RadioButtonou ToggleSwitch.

Recomendações

Certifique-se de que a finalidade e o estado de um botão estão claros para o utilizador.
Quando houver vários botões para a mesma decisão (como em uma caixa de diálogo de confirmação), apresente os botões de confirmação nesta ordem, onde [Fazer] e [Não fazer] são respostas específicas para a instrução principal:
- OK/[Executar]/Sim
  - [Não faça]/Não
  - Cancelar
Exponha apenas um ou dois botões ao usuário de cada vez, por exemplo, Aceitar e Cancelar. Se você precisar expor mais ações ao usuário, considere usar caixas de seleção ou botões de opção a partir dos quais o usuário pode selecionar ações, com um único botão de comando para disparar essas ações.
Para uma ação que precisa estar disponível em várias páginas da sua aplicação, em vez de duplicar um botão em várias páginas, considere usar uma barra inferior da aplicação .

Texto do botão

O conteúdo de um botão geralmente é texto. Ao criar esse texto, use as seguintes recomendações:

Use um texto conciso, específico e autoexplicativo que descreva claramente a ação executada pelo botão. Normalmente, o texto do botão é uma única palavra que é um verbo.
Use a fonte padrão, a menos que as diretrizes da sua marca digam para você usar algo diferente.
Para textos mais curtos, evite botões de comando estreitos usando uma largura mínima de 120px.
Para textos mais longos, evite botões de comando largos limitando o texto a um comprimento máximo de 26 caracteres.
Se o conteúdo de texto do botão for dinâmico (ou seja, estiver localizado), considere como o botão será redimensionado e o que acontecerá com os controles ao seu redor.

Precisa corrigir: Botões com texto transbordante.
Opção 1: Aumente a largura dos botões, empilhe os botões e ajuste a disposição se o comprimento do texto for superior a 26 caracteres.
Opção 2: Aumente a altura do botão e molde o texto.

Layout de botão único recomendado

Se o layout exigir apenas um botão, ele deverá ser alinhado à esquerda ou à direita com base no contexto do contêiner.

As caixas de diálogo com apenas um botão devem ser alinhado à direita o botão. Se a caixa de diálogo contiver apenas um botão, certifique-se de que o botão execute a ação segura e não destrutiva. Se utilizar ContentDialog e especificar um único botão, ele será automaticamente alinhado à direita.
Se o botão aparecer em uma interface do usuário de contêiner (por exemplo, em uma notificação do sistema, um submenu ou um item de exibição de lista), você deverá alinhar à direita botão dentro do contêiner.
Em páginas que contêm um único botão (por exemplo, um botão Aplicar na parte inferior de uma página de configurações), você deve alinhar à esquerda o botão. Isso garante que o botão esteja alinhado com o restante do conteúdo da página.

Botões Voltar

O botão Voltar é um elemento da interface do usuário fornecido pelo sistema que permite a navegação para trás através da pilha traseira ou do histórico de navegação do usuário. Você não precisa criar o seu próprio botão Voltar, mas pode precisar fazer algum trabalho para permitir uma boa experiência de navegação retroativa. Para obter informações adicionais, consulte Histórico de navegação e navegação anterior para aplicações do Windows.

Exemplos

Este exemplo usa três botões, Salvar, Não salvare Cancelar, em uma caixa de diálogo que pergunta aos usuários se eles desejam salvar seu trabalho.

Criar um botão

pt-PT: APIs importantes:classe Button, evento Click, propriedade Command, propriedade Content

Abra o aplicativo WinUI 3 Gallery e veja os botões em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Este exemplo mostra um botão que responde a um clique.

Crie o botão em XAML.

<Button Content="Subscribe" Click="SubscribeButton_Click"/>

Ou crie o botão no código.

Button subscribeButton = new Button();
subscribeButton.Content = "Subscribe";
subscribeButton.Click += SubscribeButton_Click;

// Add the button to a parent container in the visual tree.
stackPanel1.Children.Add(subscribeButton);

Manipule o evento Click.

private async void SubscribeButton_Click(object sender, RoutedEventArgs e)
{
    // Call app specific code to subscribe to the service. For example:
    ContentDialog subscribeDialog = new ContentDialog
    {
        Title = "Subscribe to App Service?",
        Content = "Listen, watch, and play in high definition for only $9.99/month. Free to try, cancel anytime.",
        CloseButtonText = "Not Now",
        PrimaryButtonText = "Subscribe",
        SecondaryButtonText = "Try it"
    };

    ContentDialogResult result = await subscribeDialog.ShowAsync();
}

Interação com botões

Quando tocares num controlo Button com um dedo ou uma caneta, ou pressionares o botão esquerdo do rato enquanto o ponteiro estiver sobre ele, o botão aciona o evento Clique. Se um botão tiver o foco do teclado, pressionar a tecla Enter ou a Barra de espaço também aumenta o evento Clique.

Geralmente, não é possível manipular eventos PointerPressed de baixo nível em um objeto Button porque ele tem o comportamento Click em vez disso. Para obter mais informações, consulte Visão geral de eventos e eventos roteados.

Você pode alterar a forma como um botão gera o evento Click alterando a propriedade ClickMode. O valor padrão de ClickMode é Release, mas também pode definir o valor ClickMode de um botão para Hover ou Press. Se ClickMode estiver Hover, o evento Click não poderá ser gerado usando o teclado ou o toque.

Conteúdo do botão

Button é um controle de conteúdo da classe ContentControl. Sua propriedade de conteúdo XAML é Content, que habilita uma sintaxe como esta para XAML: <Button>A button's content</Button>. Você pode definir qualquer objeto como o conteúdo do botão. Se o conteúdo for um objeto UIElement, ele será renderizado no botão. Se o conteúdo for outro tipo de objeto, sua representação de cadeia de caracteres será mostrada no botão.

O conteúdo de um botão geralmente é texto. Ao criar esse texto, siga as recomendações de texto do botão listadas anteriormente.

Você também pode personalizar visuais que compõem a aparência do botão. Por exemplo, você pode substituir o texto por um ícone ou usar um ícone além do texto.

Aqui, um StackPanel que contém uma imagem e texto é definido como o conteúdo de um botão.

<Button x:Name="Button2" Click="Button_Click" Width="80" Height="90">
    <StackPanel>
        <Image Source="/Assets/Slices.png" Height="52"/>
        <TextBlock Text="Slices" Foreground="Black" HorizontalAlignment="Center"/> 
    </StackPanel>
</Button>

O botão tem esta aparência.

Criar um botão de repetição

APIs importantes:classe RepeatButton, evento Click, propriedade Content

Abra o aplicativo WinUI 3 Gallery e veja o RepeatButton em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Um controle de RepeatButton é um botão que gera eventos Click repetidamente desde o momento em que é pressionado até ser liberado. Defina a propriedade Delay para especificar o tempo que o controle RepeatButton aguarda depois de ser pressionado antes de começar a repetir a ação de clique. Defina a propriedade Interval para especificar o tempo entre as repetições da ação de clique. Os tempos para ambas as propriedades são especificados em milissegundos.

O exemplo a seguir mostra dois controlos RepeatButton cujos respetivos eventos Click são usados para aumentar e diminuir o valor mostrado num bloco de texto.

<StackPanel>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Increase_Click">Increase</RepeatButton>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Decrease_Click">Decrease</RepeatButton>
    <TextBlock x:Name="clickTextBlock" Text="Number of Clicks:" />
</StackPanel>

private static int _clicks = 0;
private void Increase_Click(object sender, RoutedEventArgs e)
{
    _clicks += 1;
    clickTextBlock.Text = "Number of Clicks: " + _clicks;
}

private void Decrease_Click(object sender, RoutedEventArgs e)
{
    if(_clicks > 0)
    {
        _clicks -= 1;
        clickTextBlock.Text = "Number of Clicks: " + _clicks;
    }
}

Criar um botão suspenso

APIs importantes: classe DropDownButton, propriedade Flyout

Abra o aplicativo WinUI 3 Gallery e veja o DropdownButton em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Um DropDownButton é um botão que mostra uma divisa como um indicador visual de que ele tem um menu suspenso anexado que contém mais opções. Ele tem o mesmo comportamento que um controle padrão Button com um flyout; apenas a aparência é diferente.

O botão suspenso herda o evento Clique, mas normalmente você não o usa. Em vez disso, use a propriedade Flyout para anexar um flyout e invocar ações usando as opções de menu no flyout. O submenu abre automaticamente quando o botão é clicado. Certifique-se de especificar a propriedade Placement do submenu para garantir o posicionamento desejado em relação ao botão. O algoritmo de posicionamento padrão pode não produzir o posicionamento pretendido em todas as situações. Para saber mais sobre flyouts, veja Flyouts e flyout de menu e barra de menu.

Exemplo - Botão suspenso

Este exemplo mostra como criar um botão suspenso com um submenu que contém comandos para alinhamento de parágrafo em um controle de RichEditBox. (Para obter mais informações e código, consulte caixa de edição Rich).

<DropDownButton ToolTipService.ToolTip="Alignment">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8E4;"/>
    <DropDownButton.Flyout>
        <MenuFlyout Placement="BottomEdgeAlignedLeft">
            <MenuFlyoutItem Text="Left" Icon="AlignLeft" Tag="left"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Center" Icon="AlignCenter" Tag="center"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Right" Icon="AlignRight" Tag="right"
                            Click="AlignmentMenuFlyoutItem_Click"/>
        </MenuFlyout>
    </DropDownButton.Flyout>
</DropDownButton>

private void AlignmentMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    var option = ((MenuFlyoutItem)sender).Tag.ToString();

    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the alignment to the selected paragraphs.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (option == "left")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Left;
        }
        else if (option == "center")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Center;
        }
        else if (option == "right")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Right;
        }
    }
}

Criar um botão de divisão

APIs importantes: classe SplitButton, evento Click, propriedade Flyout

Abra o aplicativo WinUI 3 Gallery e veja o SplitButton em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Um controlo SplitButton tem duas partes que podem ser ativadas separadamente. Uma parte se comporta como um botão padrão e invoca uma ação imediata. A outra parte invoca um submenu que contém opções adicionais que o usuário pode escolher.

Observação

Quando tocado, o botão de divisão funciona como um botão dropdown; ambas as partes do botão invocam o painel deslizante. Com outros métodos de entrada, um usuário pode invocar qualquer metade do botão separadamente.

O comportamento típico de um botão de divisão é:

Quando o usuário clica na parte do botão, manipule o evento Click para invocar a opção atualmente selecionada na lista suspensa.
Quando a lista suspensa estiver aberta, manipule a invocação dos itens na lista suspensa para alterar qual opção está selecionada e, em seguida, invoque-a. É importante invocar o item do flyout porque o evento Click do botão não ocorre ao usar o toque.

Dica

Há muitas maneiras de colocar itens no menu suspenso e lidar com sua invocação. Se você usar um ListView ou GridView, uma maneira é manipular o SelectionChanged evento. Se fizeres isso, define SingleSelectionFollowsFocus como false. Isso permite que os usuários naveguem pelas opções usando um teclado sem invocar o item em cada alteração.

Exemplo - Botão Dividir

Este exemplo mostra como criar um botão de divisão que é usado para alterar a cor do primeiro plano do texto selecionado em um controle RichEditBox. (Para obter mais informações e código, consulte caixa de edição Rich). O flyout do botão de divisão utiliza BottomEdgeAlignedLeft como o valor padrão para sua propriedade de posicionamento . Não é possível substituir esse valor.

<SplitButton ToolTipService.ToolTip="Foreground color"
             Click="BrushButtonClick">
    <Border x:Name="SelectedColorBorder" Width="20" Height="20"/>
    <SplitButton.Flyout>
        <Flyout x:Name="BrushFlyout">
            <!-- Set SingleSelectionFollowsFocus="False"
                 so that keyboard navigation works correctly. -->
            <GridView ItemsSource="{x:Bind ColorOptions}"
                      SelectionChanged="BrushSelectionChanged"
                      SingleSelectionFollowsFocus="False"
                      SelectedIndex="0" Padding="0">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding}" Width="20" Height="20"/>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Margin" Value="2"/>
                        <Setter Property="MinWidth" Value="0"/>
                        <Setter Property="MinHeight" Value="0"/>
                    </Style>
                </GridView.ItemContainerStyle>
            </GridView>
        </Flyout>
    </SplitButton.Flyout>
</SplitButton>

public sealed partial class MainPage : Page
{
    // Color options that are bound to the grid in the split button flyout.
    private List<SolidColorBrush> ColorOptions = new List<SolidColorBrush>();
    private SolidColorBrush CurrentColorBrush = null;

    public MainPage()
    {
        this.InitializeComponent();

        // Add color brushes to the collection.
        ColorOptions.Add(new SolidColorBrush(Colors.Black));
        ColorOptions.Add(new SolidColorBrush(Colors.Red));
        ColorOptions.Add(new SolidColorBrush(Colors.Orange));
        ColorOptions.Add(new SolidColorBrush(Colors.Yellow));
        ColorOptions.Add(new SolidColorBrush(Colors.Green));
        ColorOptions.Add(new SolidColorBrush(Colors.Blue));
        ColorOptions.Add(new SolidColorBrush(Colors.Indigo));
        ColorOptions.Add(new SolidColorBrush(Colors.Violet));
        ColorOptions.Add(new SolidColorBrush(Colors.White));
    }

    private void BrushButtonClick(object sender, object e)
    {
        // When the button part of the split button is clicked,
        // apply the selected color.
        ChangeColor();
    }

    private void BrushSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // When the flyout part of the split button is opened and the user selects
        // an option, set their choice as the current color, apply it, then close the flyout.
        CurrentColorBrush = (SolidColorBrush)e.AddedItems[0];
        SelectedColorBorder.Background = CurrentColorBrush;
        ChangeColor();
        BrushFlyout.Hide();
    }

    private void ChangeColor()
    {
        // Apply the color to the selected text in a RichEditBox.
        Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
        if (selectedText != null)
        {
            Windows.UI.Text.ITextCharacterFormat charFormatting = selectedText.CharacterFormat;
            charFormatting.ForegroundColor = CurrentColorBrush.Color;
            selectedText.CharacterFormat = charFormatting;
        }
    }
}

Criar um botão de seleção dividido

APIs importantes: classe ToggleSplitButton, evento IsCheckedChanged, propriedade IsChecked

Abra o aplicativo WinUI 3 Gallery e veja o ToggleSplitButton em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Um controlo ToggleSplitButton tem duas partes que podem ser invocadas separadamente. Uma parte comporta-se como um botão de alternância que pode estar ligado ou desligado. A outra parte invoca um submenu que contém opções adicionais que o usuário pode escolher.

Um botão alternador de divisão é normalmente usado para ativar ou desativar uma funcionalidade quando esta tem várias opções entre as quais o utilizador pode escolher. Por exemplo, em um editor de documentos, ele pode ser usado para ativar ou desativar listas, enquanto a lista suspensa é usada para escolher o estilo da lista.

Observação

Quando invocado com toque, o botão de divisão de alternância se comporta como um botão suspenso. Com outros métodos de entrada, um usuário pode alternar e invocar as duas metades do botão separadamente. Com o toque, ambas as metades do botão invocam o submenu. Portanto, deve incluir uma opção no conteúdo do flyout para ativar ou desativar o botão.

Diferenças com o ToggleButton

Ao contrário do ToggleButton, o ToggleSplitButton não tem um estado indeterminado. Como resultado, você deve ter em mente estas diferenças:

ToggleSplitButton não tem a propriedade IsThreeState nem o evento Indeterminate.
A propriedade ToggleSplitButton.IsChecked é apenas um valor booleano, não um Nullable<bool>.
ToggleSplitButton tem apenas o evento IsCheckedChanged; ele não tem eventos separados Verificado e Não Verificado.

Exemplo - Alternar botão de divisão

O exemplo a seguir mostra como um botão de alternância pode ser usado para ligar ou desligar a formatação da lista e alterar o estilo da lista, num controlo RichEditBox. (Para obter mais informações e código, consulte caixa de edição Rich). O submenu do botão de alternância dividido utiliza BottomEdgeAlignedLeft como valor padrão para a sua propriedade de localização Placement. Não é possível substituir esse valor.

<ToggleSplitButton x:Name="ListButton"
                   ToolTipService.ToolTip="List style"
                   Click="ListButton_Click"
                   IsCheckedChanged="ListStyleButton_IsCheckedChanged">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8FD;"/>
    <ToggleSplitButton.Flyout>
        <Flyout>
            <ListView x:Name="ListStylesListView"
                      SelectionChanged="ListStylesListView_SelectionChanged"
                      SingleSelectionFollowsFocus="False">
                <StackPanel Tag="bullet" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE7C8;"/>
                    <TextBlock Text="Bullet" Margin="8,0"/>
                </StackPanel>
                <StackPanel Tag="alpha" Orientation="Horizontal">
                    <TextBlock Text="A" FontSize="24" Margin="2,0"/>
                    <TextBlock Text="Alpha" Margin="8"/>
                </StackPanel>
                <StackPanel Tag="numeric" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF146;"/>
                    <TextBlock Text="Numeric" Margin="8,0"/>
                </StackPanel>
                <TextBlock Tag="none" Text="None" Margin="28,0"/>
            </ListView>
        </Flyout>
    </ToggleSplitButton.Flyout>
</ToggleSplitButton>

private void ListStyleButton_IsCheckedChanged(ToggleSplitButton sender, ToggleSplitButtonIsCheckedChangedEventArgs args)
{
    // Use the toggle button to turn the selected list style on or off.
    if (((ToggleSplitButton)sender).IsChecked == true)
    {
        // On. Apply the list style selected in the drop down to the selected text.
        var listStyle = ((FrameworkElement)(ListStylesListView.SelectedItem)).Tag.ToString();
        ApplyListStyle(listStyle);
    }
    else
    {
        // Off. Make the selected text not a list,
        // but don't change the list style selected in the drop down.
        ApplyListStyle("none");
    }
}

private void ListStylesListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var listStyle = ((FrameworkElement)(e.AddedItems[0])).Tag.ToString();

    if (ListButton.IsChecked == true)
    {
        // Toggle button is on. Turn it off...
        if (listStyle == "none")
        {
            ListButton.IsChecked = false;
        }
        else
        {
            // or apply the new selection.
            ApplyListStyle(listStyle);
        }
    }
    else
    {
        // Toggle button is off. Turn it on, which will apply the selection
        // in the IsCheckedChanged event handler.
        ListButton.IsChecked = true;
    }
}

private void ApplyListStyle(string listStyle)
{
    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the list style to the selected text.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (listStyle == "none")
        {  
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.None;
        }
        else if (listStyle == "bullet")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Bullet;
        }
        else if (listStyle == "numeric")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Arabic;
        }
        else if (listStyle == "alpha")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.UppercaseEnglishLetter;
        }
        selectedText.ParagraphFormat = paragraphFormatting;
    }
}

UWP e WinUI 2

Importante

As informações e os exemplos neste artigo são otimizados para aplicativos que usam o SDK de Aplicativo Windows e WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam WinUI 2. Consulte a referência da API UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações que você precisa para usar o controle em um aplicativo UWP ou WinUI 2.

Os controles DropDownButton, SplitButton e ToggleSplitButton para aplicativos UWP estão incluídos como parte da WinUI 2. Para obter mais informações, incluindo instruções de instalação, consulte WinUI 2. As APIs para esses controlos existem nos namespaces Windows.UI.Xaml.Controls e Microsoft.UI.Xaml.Controls.

APIs UWP:classe Button, classe RepeatButton, classe HyperlinkButton, classe DropDownButton, classe SplitButton, classe ToggleSplitButton, classe ToggleButton, evento Click, propriedade Command, propriedade Content
WinUI 2 Apis:DropDownButton, SplitButton, ToggleSplitButton
Abra o aplicativo WinUI 2 Gallery e veja o botão em ação. O aplicativo WinUI 2 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 2. Obtenha o aplicativo no Microsoft Store ou obtenha o código-fonte em GitHub.

Recomendamos usar o mais recente WinUI 2 para obter os estilos e modelos mais atuais para todos os controles. WinUI 2.2 ou posterior inclui um novo modelo para esses controles que usa cantos arredondados. Para obter mais informações, consulte Raio de canto.

Para usar o código neste artigo com WinUI 2, use um alias em XAML (usamos muxc) para representar as APIs da Biblioteca da Interface do Usuário do Windows incluídas em seu projeto. Consulte Introdução ao WinUI 2 para obter mais informações.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:DropDownButton />
<muxc:SplitButton />
<muxc:ToggleSplitButton />

Partilhar via

Botões

Será este o controlo correto?

Recomendações

Texto do botão

Layout de botão único recomendado

Botões Voltar

Exemplos

Criar um botão

Interação com botões

Conteúdo do botão

Criar um botão de repetição

Criar um botão suspenso

Exemplo - Botão suspenso

Criar um botão de divisão

Exemplo - Botão Dividir

Criar um botão de seleção dividido

Diferenças com o ToggleButton

Exemplo - Alternar botão de divisão

UWP e WinUI 2

Artigos relacionados

Recursos adicionais