Nous avons déjà utilisé des contrôles bouton dans les leçons précédentes, le plus basique est le Button. Nous allons maintenant découvrir les autres types de boutons. Les boutons sont des composants d’interaction avec l’application : un clic déclenche l’exécution d’une logique correspondante.
Voici la liste des principaux contrôles bouton fournis par WinUI 3 C++ :
- Button:Bouton de clic standard
- ToggleButton:Bouton à état basculant coché / décoché
- RepeatButton:Déclenche des clics continus si maintenu enfoncé
- HyperlinkButton:Bouton de style hyperlien
- SplitButton:Composant combinant un bouton principal et un menu déroulant
- DropDownButton:Bouton équipé uniquement d’un menu déroulant
- CommandBarButton / AppBarButton:Boutons icône pour barres d’outils
- MenuFlyoutItem / ToggleMenuFlyoutItem:Éléments de menu contextuel ou déroulant
Voici une démonstration XAML pour déclarer tous ces contrôles. La liaison des événements en backend fonctionne exactement comme vu précédemment : placez le curseur sur le nom de l’événement Click et appuyez sur F12 pour générer automatiquement la fonction de gestion. Nous modifions MainWindow.xaml comme suit.
<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>Langage du code : HTML, XML (xml)
Placez le curseur sur Click="NormalBtn_Click" et Click="RepeatBtn_Click" puis appuyez sur F12 pour créer les deux fonctions vides. Aucune implémentation n’est requise pour cette démonstration ; les lecteurs intéressés peuvent ajouter leur propre logique fonctionnelle.
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)
{
}
Langage du code : C++ (cpp)