Le contrôle Menu

Une des parties les plus courantes dans une application Windows est le menu, parfois appelé le menu principal parce qu'il n'en existe qu'un seul dans l'application la plupart du temps. Le menu est utile car il offre beaucoup d'options, utilise très peu d'espace, et même si Microsoft promeut le Ruban pour remplacer les supers mais vieux menu et barre d'outils, ils ont toujours toute leur place dans toute bonne boite à outils de développeur.

WPF est livré avec un contrôle idoine appelé.... Menu. Il est très simple de lui ajouter des éléments - vous ajouter tout simplement MenuItem dedans, et chaque MenuItem peut avoir un nombre de sous-éléments, vous permettant ainsi de créer des menus hiérarchiques comme vous en trouvez dans beaucoup d'applications. Passons tout de suite à un exemple d'utilisation de Menu :

<Window x:Class="WpfTutorialSamples.Common_interface_controls.MenuSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MenuSample" Height="200" Width="200">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_New" />
                <MenuItem Header="_Open" />
                <MenuItem Header="_Save" />
                <Separator />
                <MenuItem Header="_Exit" />
            </MenuItem>
        </Menu>
        <TextBox AcceptsReturn="True" />
    </DockPanel>
</Window>

Comme dans la plupart des applications Windows, mon menu est placé en haut de la fenêtre, mais avec la flexibilité qu'offre WPF, nous pouvons placé le menu n'importe où dans la fenêtre, à la hauteur ou largeur de votre souhait.

J'ai défini un seul menu parent, avec 4 sous-menus et un séparateur. J'utilise la propriété Header (En-tête) pour définir le titre de ce menu, et vous pouvez également remarquer que chaque titre commence par le caractère souligné ("_"). WPF utilise ce symbole comme une touche de raccourci, ce qui signifie que l'utilisateur peut, en appuyant sur la touche "Alt" puis la lettre préfixée par le "_" d'un menu , activer ce menu. Cela fonctionne pour tous les niveaux de menu, par exemple vous pouvez appuyer sur la touche Alt, puis F et enfin N pour activer le menu New .

Icônes et Cases à cocher

Deux fonctions communes d'un élément de menu sont l'icône, utilisé pour identifier plus facilement l'élément et son action, et la possibilité d'avoir des éléments cochés, qui peuvent ainsi activer/désactiver une fonction spécifique. L'élément WPF MenuItem supporte les deux, et c'est très facile à utiliser :

<Window x:Class="WpfTutorialSamples.Common_interface_controls.MenuIconCheckableSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MenuIconCheckableSample" Height="150" Width="300">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_Exit" />
            </MenuItem>
            <MenuItem Header="_Tools">
                <MenuItem Header="_Manage users">
                    <MenuItem.Icon>
                        <Image Source="/WpfTutorialSamples;component/Images/user.png" />
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Header="_Show groups" IsCheckable="True" IsChecked="True" />
            </MenuItem>
        </Menu>
        <TextBox AcceptsReturn="True" />
    </DockPanel>
</Window>

Pour cet exemple, j'ai créé un second MenuItem, auquel j'ai ajouté deux éléments. L'un avec une icône, en utilisant la propriété Icon avec un contrôle standard Image à l'intérieur de celui-ci, et l'autre où nous utilisons la propriété IsCheckable qui permet à l'utilisateur de cocher et / ou décocher l'élément. J'ai aussi utilisé la propriété IsChecked pour que le MenuItem soit coché par défaut. Depuis le Code-Behind, c'est cette même propriété que vous devez lire pour savoir si le MenuItem est coché ou non.

Gérer les clics

Lorsqu'un utilisateur clique sur un élément du menu, vous voulez généralement que quelque chose se passe. La façon la plus simple est d'ajouter un gestionnaire d'événement Click au MenuItem, comme ça:

<MenuItem Header="_New" Click="mnuNew_Click" />

Dans le Code-Behind, vous devrez ensuite implanter la méthode mnuNew_Click, comme cela:

private void mnuNew_Click(object sender, RoutedEventArgs e)
{
	MessageBox.Show("New");
}

Cela suffit pour les applications les plus simples, ou lors du prototypage, mais la façon WPF est d'utiliser une Command pour cela.

Raccourcis clavier et commandes

Vous pouvez gérer l’événement Click d'un élément de menu comme nous l'avons plus haut, mais l'approche la plus ordinaire est d'utiliser les commandes WPF. Il y a beaucoup de théories sur la création et l'usage des commandes, c'est pourquoi elles ont leur propre catégories d'articles sur le site, mais pour le moment, je peux vous dire qu'il y a une série d'avantages lorsqu'on les utilise dans WPF, particulièrement en combinaison avec un Menu ou une barre d'outils.

Tout d'abord, elles assurent que vous pourrez avoir la même action depuis une barre d'outils, un menu et même depuis un menu contextuel, sans avoir à implanter le même code dans plusieurs places différentes. Elles rendent aussi la gestion des raccourcis clavier beaucoup plus simple, car à la différence de WinForms, WPF n'écoute pas les raccourcis clavier automatiquement, si vous les assignez à un élément de menu par exemple. Vous devrez le faire manuellement.

Bien qu'en utilisant les commandes, WPF est à l’écoute et répondra aux raccourcis clavier automatiquement. Le texte (l'entête) de l'élément du menu est aussi défini automatiquement ( mais vous pouvez le réécrire si nécessaire), et c'est la même chose pour l'InputGestureText, qui montre à l'utilisateur quel raccourci clavier peut être utiliser pour invoquer l'élément du menu spécifique. Faisons un exemple tout de suite afin de commander le menu avec des commandes WPF:

<Window x:Class="WpfTutorialSamples.Common_interface_controls.MenuWithCommandsSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MenuWithCommandsSample" Height="200" Width="300">
    <Window.CommandBindings>
        <CommandBinding Command="New" CanExecute="NewCommand_CanExecute" Executed="NewCommand_Executed" />
    </Window.CommandBindings>
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Command="New" />
                <Separator />
                <MenuItem Header="_Exit" />
            </MenuItem>
            <MenuItem Header="_Edit">
                <MenuItem Command="Cut" />
                <MenuItem Command="Copy" />
                <MenuItem Command="Paste" />
            </MenuItem>
        </Menu>

        <TextBox AcceptsReturn="True" Name="txtEditor" />
    </DockPanel>
</Window>

using System;
using System.Windows;
using System.Windows.Input;

namespace WpfTutorialSamples.Common_interface_controls
{
	public partial class MenuWithCommandsSample : Window
	{
		public MenuWithCommandsSample()
		{
			InitializeComponent();
		}

		private void NewCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e)
		{
			e.CanExecute = true;
		}

		private void NewCommand_Executed(object sender, ExecutedRoutedEventArgs e)
		{
			txtEditor.Text = "";
		}
	}
}

Cela ne paraît pas évident, mais par l'utilisation de commandes, nous accédons ainsi à un panel de fonctionnalités: les raccourcis clavier, le texte et l'InputGestureText sur les éléments concernés, que WPF active ou désactive automatiquement en fonction de leur état et possibilité d'utilisation. Dans le cas présent, Couper et Copier sont désactivés car aucun texte n'est sélectionné alors que Coller l'est car le presse-papier n'est pas vide!

Et parce que WPF sait comment gérer certaines commandes en combinaison avec certains contrôles, dans ce cas les commandes Copier Couper Coller associées aux contrôles Champs de saisie de texte, nous n'avons pas à gérer leurs événements Execute - ils fonctionnent de façon masquée! Nous devons cependant le gérer pour la commande New, puisque WPF n'a pas la possibilité de deviner ce dont nous avons besoin de créer en l'activant. Cela est effectué avec la liaison de commandes CommandBindings de la fenêtre Window, dont les explications sont détaillées dans le chapitre sur les commandes.

Résumé

Travailler avec le contrôle Menu WPF est à la fois facile et rapide, rendant cela même simple de créer des hiérarchies de menu complexes, et, en les associant à des commandes WPF, vous accéder également à beaucoup de fonctionnalités déjà implémentées.