WPF Menu kontrollen

En af de mest almindelige dele af en Windows applikation er menuen, nogle gange refereret til som hovedmenuen, da der normalt kun eksisterer en i applikationen. Menuen er praktisk, fordi den tilbyder en masse indstillinger, kun bruger meget lidt plads og selvom Microsoft promoverer Ribbon som en erstatning for de gode gamle menuer og værktøjslinjer, har de afgjort stadig deres plads i enhver god udviklers værktøjskasse.

WPF har en fin kontrol til at lave menuer med ved navn... Menu. Tilføjelse af elementer til den er meget nemt - du tilføjer bare MenuItem elementer, og hvert MenuItem kan have en række under-items, hvilket tillader dig at oprette hierarkiske menuer, som du kender dem fra en masse Windows applikationer. Lad os hoppe direkte til et eksempel, hvor vi bruger Menu kontrollen:

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

Som i de fleste Windows applikationer er min menu placeret i toppen af vinduet, men for at bibeholde den enorme fleksibilitet i WPF, kan du faktisk placere Menu kontroller hvor du har lyst, og i en hvilken som helst bredde og højde, du kan ønske.

Jeg har defineret et enkelt topniveau element, med 4 underordnede elementer og en separator. Jeg bruger Header egenskaben til at definere etiketten for elementet, og du bør bemærke underscore tegnet før det første tegn på hver etiket. Det giver WPF besked om at bruge dette tegn som genvejstast, hvilket betyder, at brugeren kan trykke på Alt-tasten efterfulgt af det givne tegn, for at aktivere menuelementet. Dette virker hele vejen fra topniveau elementet og ned i hierarket. Det betyder, at jeg i eksemplet kunne trykke Alt, derefter F og så N for at aktivere New elementet.

Ikoner og afkrydsningsfelter

To generelle funktioner på menuelementer er ikonet, som gør det nemmere at identificere menuelementet og hvad, det gør, samt at have mulighed for at have afkrydsningsklare menuelementer, som kan slå en specifik funktion til eller fra. WPF MenuItem understøtter dem begge, og det er meget nemt at bruge:

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

Til dette eksempel har jeg oprettet et sekundær topniveau element, hvor jeg har tilføjet to elementer: Et med et ikon angivet ved hjælp af Icon egenskaben med en standard Image kontrol indeni, og en, hvor vi bruger IsCheckable egenskaben for at give brugeren mulighed for at markere og afmarkere elementet. Jeg brugte endda IsChecked egenskaben for at have den markeret som standard. Fra code-behind er det den samme egenskab, du skal aflæse for at se, om et givet menuelement er markeret eller ej.

Håndtering af klik

Når brugeren klikker på et menuelement, vil du normalt have noget til at ske. Den nemste måde er helt enkelt at tilføje en klik event handler til MenuItem, som her:

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

I code-behind skal du derefter implementere mnuNew_Click metoden, som her:

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

Dette vil være nok til mere simple applikationer, eller når man laver prototyper på noget, men WPF måden er at bruge en Command til dette.

Tastaturgenveje og Commands

Du kan nemt håndtere Click hændelsen på et menuelement, som vi gjorde ovenfor, men den mere almindelige tilgang er at bruge WPF kommandoer. Der er en masse teori om at bruge og oprette kommandoer, så de har deres egen artikelkategori på siden, men for nu, kan jeg fortælle dig, at de har nogle fordele, når de bruges i WPF, specielt i kombination med en Menu eller en Toolbar.

Først og fremmest sikrer de, at du kan have den samme handling på en værktøjslinje, en menu og endda en kontekstmenu uden at implementere den samme kode flere steder. De gør det også meget nemmere at håndtere tastaturgenveje, fordi i modsætning til WinForms lytter WPF ikke efter tastaturgenveje automatisk, hvis du tildeler dem til f.eks. et menuelement - du er nødt til at gøre dette manuelt.

Men når du bruger kommandoer, lytter WPF og vil reagere på tastaturgenveje automatisk. Teksten (Header) på menuelementet er også sat automatisk (selv om du kan overskrive det efter behov), og det samme er InputGestureText, som viser brugeren hvilken tastaturgenvej, der kan bruges til at aktivere det givne menuelement. Lad os hoppe direkte til et eksempel med at kombinere Menu med WPF kommandoer:

<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 = "";
		}
	}
}

Det er muligvis ikke fuldstændig indlysende, men ved at bruge kommandoer, fik vi en hel bunke ting gratis: Tastaturgenveje, tekst og InputGestureText på elementerne, og WPF aktiverer/deaktiverer automatisk elementerne baseret på den aktive kontrol og dens tilstand. I dette tilfælde, deaktiveres Cut og Copy, fordi ingen tekst er markeret, men Past er aktiveret, fordi min udklipsholder ikke er tom!

Og fordi WPF ved hvordan, bestemte kommandoer skal håndteres i kombination med bestemte kontroller, i dette tilfælde Cut/Copy/Paste kommandoerne i kombination med en tekst inputkontrol, behøver vi ikke håndtere deres Execute hændelser - de virker ud af boksen! Vi er dog nødt til at håndtere det for New kommandoen, eftersom WPF ikke har noget mulighed for at gætte hvad, vi vil gøre, når brugeren aktiverer den. Det er gjort med CommandBindings på Window, alt sammen forklaret i detaljer i afsnittet om kommandoer.

Resume

At arbejde med WPF Menu kontrollen er både nemt or hurtigt og gør det simpelt at oprette endda komplekse menuhierarkier og når den kombineres med WPF kommandoer, får du også en masse funktionalitet gratis.