Já usamos controles de botão nas aulas anteriores, o mais básico é o Button. Em seguida, aprenderemos os outros tipos de botões. Botões são controles de interação com o aplicativo; ao clicar, uma lógica correspondente é executada.
Os principais controles de botão disponíveis no WinUI 3 C++ são os seguintes:
- Button:Botão de clique padrão
- ToggleButton:Botão que alterna estado selecionado / não selecionado
- RepeatButton:Dispara cliques contínuos ao segurar pressionado
- HyperlinkButton:Botão com estilo de hiperlink
- SplitButton:Controle combinado de botão principal + menu suspenso
- DropDownButton:Botão apenas com menu suspenso
- CommandBarButton / AppBarButton:Botões de ícone para barras de ferramentas
- MenuFlyoutItem / ToggleMenuFlyoutItem:Itens de menu de clique direito ou suspenso
Abaixo demonstramos o XAML para criar todos esses controles. A vinculação de eventos no back-end funciona da mesma forma que antes: posicione o cursor sobre o nome do evento Click e pressione F12 para gerar automaticamente a função de tratamento. Vamos editar o MainWindow.xaml.
<StackPanel Spacing="15" Padding="20" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<!-- 1. Button: Standard click button -->
<Button x:Name="NormalBtn" Content="Standard Button (Button)" Click="NormalBtn_Click"/>
<!-- 2. ToggleButton: Switchable checked/unchecked state button -->
<ToggleButton x:Name="ToggleBtn" Content="Toggle Button (ToggleButton)"/>
<!-- 3. RepeatButton: Trigger click continuously when holding down -->
<RepeatButton x:Name="RepeatBtn" Content="Repeat Button (RepeatButton)" Click="RepeatBtn_Click"/>
<!-- 4. HyperlinkButton: Hyperlink style button -->
<HyperlinkButton Content="Hyperlink Button (HyperlinkButton)" NavigateUri="https://learn.microsoft.com/windows/apps/winui"/>
<!-- 5. SplitButton: Combined main button + dropdown menu -->
<SplitButton Content="Split Button (SplitButton)">
<SplitButton.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="Option A"/>
<MenuFlyoutItem Text="Option B"/>
</MenuFlyout>
</SplitButton.Flyout>
</SplitButton>
<!-- 6. DropDownButton: Button with dropdown menu only -->
<DropDownButton Content="Dropdown Button (DropDownButton)">
<DropDownButton.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="Function 1"/>
<ToggleMenuFlyoutItem Text="Enable Mode"/>
</MenuFlyout>
</DropDownButton.Flyout>
</DropDownButton>
<!-- 8. MenuFlyoutItem / ToggleMenuFlyoutItem: Right-click / dropdown menu items -->
<Button Content="Right-click to open menu" Width="220">
<Button.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="Normal Menu Item (MenuFlyoutItem)"/>
<ToggleMenuFlyoutItem Text="Checkable Menu Item (ToggleMenuFlyoutItem)"/>
<MenuFlyoutSeparator/>
<MenuFlyoutItem Text="Exit"/>
</MenuFlyout>
</Button.Flyout>
</Button>
</StackPanel>Code language: HTML, XML (xml)
Posicione o cursor sobre Click="NormalBtn_Click" e Click="RepeatBtn_Click" e pressione F12 para criar duas funções vazias. Não é necessário implementar lógica para esta demonstração; leitores interessados podem adicionar funcionalidades próprias.
void winrt::App6::implementation::MainWindow::NormalBtn_Click(winrt::Windows::Foundation::IInspectable const& sender,
winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
}
void winrt::App6::implementation::MainWindow::RepeatBtn_Click(winrt::Windows::Foundation::IInspectable const& sender,
winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
}
Code language: C++ (cpp)