Il Menu control di WPF

Uno degli elementi più comuni di un'applicazione Windows è il menu, a volte indicato come menu principale perché di solito ne esiste soltanto uno nell'applicazione. Il menu è un elemento pratico perché offre molte opzioni, utilizzando pochissimo spazio, e anche se Microsoft sta promuovendo la barra multifunzione come una buona alternativa, il classico menu con barre degli strumenti occupa indubbiamente un buon posto nella "cassetta degli attrezzi" di ogni bravo sviluppatore.

WPF dispone di un controllo per la creazione di menu chiamato ... Menu. Aggiungere elementi è molto semplice: basta aggiungere al Menu oggetti di tipo MenuItem, inoltre ognuno di questi ultimi può avere una gamma di sotto-elementi, consentendoti di creare menu gerarchici come hai già visto in molte applicazioni Windows. Arriviamo velocemente ad un esempio in cui usiamo il 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>

Come nella maggior parte delle applicazioni Windows, il nostro menu è posizionato nella parte superiore della finestra ma, grazie all'enorme flessibilità di WPF, puoi posizionare un controllo di tipo Menu in qualsiasi punto e con qualsiasi larghezza o altezza preferisci.

Ho definito un singolo elemento di primo livello, con 4 sotto-elementi e un separatore. Io uso la proprietà Header per definire l'etichetta dell'elemento e potrai notare il carattere di sottolineatura prima del primo carattere di ogni etichetta. Indica a WPF di usare quel carattere come chiave di accesso veloce, il che significa che l'utente può premere il tasto Alt seguito dal carattere dato, per attivare la voce di menu. Funziona allo stesso modo dall'elemento di livello massimo fino in basso nella gerarchia, ciò implica che in questo esempio potrei premere Alt, quindi F e poi N, per attivare l'elemento New.

Icone e checkbox

Due caratteristiche comuni di una voce di menu sono l'icona, utilizzata per identificare più facilmente la voce di menu e cosa fa, e la possibilità di avere voci di menu confermabili, con cui abilitare o disattivare una funzione specifica. L'oggetto MenuItem di WPF supporta entrambi, ed è molto facile da usare:

<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>

Per questo esempio ho creato un secondo elemento di livello superiore, a cui ho aggiunto due elementi: uno con un'icona definita, usando la proprietà Icon con un controllo standard di tipo Image al suo interno e uno in cui utilizziamo la proprietà IsCheckable per consentire all'utente di selezionare e deselezionare l'elemento. Ho anche impostato la proprietà IsChecked come attiva per impostazione predefinita. Da Code-behind, questa è la stessa proprietà che puoi leggere per sapere se una determinata voce di menu è selezionata o meno.

Gestione dei click

Quando l'utente fa clic su una voce di menu, di solito vuoi che succeda qualcosa. Il modo più rapido è semplicemente aggiungere un gestore per l'evento click all'oggetto MenuItem, come segue:

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

Nel Code-behind dovrai quindi implementare il metodo mnuNew_Click, in questo modo:

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

Ciò sarà sufficiente per le applicazioni più semplici o quando si sta generando un prototipo, ma il modo di WPF è quello di usare un Comando per fare ciò.

Comandi e scorciatoie da tastiera

Puoi facilmente gestire l'evento Click di una voce di menu come abbiamo fatto sopra, ma l'approccio più comune è usare i comandi WPF. C'è molta teoria su utilizzo e creazione di comandi, quindi hanno la loro categoria di articoli qui sul sito, ma per ora, posso dirti che hanno un paio di vantaggi quando sono utilizzati in WPF, specialmente in combinazione con un Menu o una barra degli strumenti (Toolbar).

Prima di tutto, i comandi assicurano che tu possa avere la stessa azione su una barra degli strumenti, su un menu e persino un menu contestuale, senza dover implementare lo stesso codice in più posti. Inoltre rendono molto più semplice la gestione delle scorciatoie da tastiera, perché diversamente da WinForms, WPF non intercetta automaticamente le scorciatoie della tastiera se sono assegnate ad es. a una voce di menu - dovrai gestire la cosa manualmente.

Comunque, quando si usano i comandi, WPF è tutto orecchie e risponderà automaticamente alle scorciatoie da tastiera. Anche il testo (Header) della voce di menu viene anche impostato automaticamente (anche se è possibile sovrascriverlo se necessario), così come InputGestureText, che mostra all'utente quale scorciatoia da tastiera può essere usata per richiamare la voce di menu specifica. Passiamo direttamente a un esempio in cui si combinano menu e comandi 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 = "";
		}
	}
}

Potrebbe non essere del tutto ovvio, ma usando i comandi, abbiamo solo un sacco di cose gratis: scorciatoie da tastiera, testo e InputGestureText sugli elementi ecd inoltre WPF abilita/disabilita automaticamente gli elementi in base al controllo attivo e il suo stato. In questo caso, Cut e Copy sono disabilitati perché non è selezionato alcun testo, ma Paste è abilitato, perché i miei appunti non sono vuoti!

E poiché WPF sa come gestire determinati comandi in combinazione con determinati controlli, in questo caso i comandi Taglia/Copia/Incolla in combinazione con un controllo di input del testo, non dobbiamo nemmeno gestire i loro eventi Execute: funzionano subito senza aggiungere altro! Dobbiamo invece gestire l'Execute per il comando Nuovo, poiché WPF non ha modo di indovinare cosa vogliamo che succeda quando l'utente lo attiva. Questo avviene con i CommandBindings della finestra, tutti spiegati in dettaglio nel capitolo sui comandi.

Sommario

Lavorare con il controllo Menu di WPF è facile e veloce, semplificando la creazione di gerarchie di menu anche complesse e combinandolo con i comandi WPF, ottenendo così molte funzionalità gratuitamente.