{"id":55000244,"date":"2020-12-01T00:00:00","date_gmt":"2020-12-23T15:46:22","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=244"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Das_MenuSteuerelement","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Das_MenuSteuerelement\/","title":{"rendered":"Das Menu-Steuerelement"},"content":{"rendered":"

Wie Sie einer Anwendung beziehungsweise einem Fenster einer WPF-Anwendung ein Ribbon hinzufügen können, haben wir an anderer Stelle bereits erläutert. Wer nicht auf die eher platzraubenden Ribbons steht, kann sich auch der klassischen Menüs bedienen. Diese lassen sich unter WPF genauso leicht definieren wie Ribbons. Dieser Artikel zeigt, wie Sie einem Fenster ein Menü hinzufügen und welche Steuerelemente sich dort unterbringen lassen. Damit die Optik nicht leidet, bauen wir auch hier passende Icons ein.<\/b><\/p>\n

Grundstruktur des Menüs<\/b><\/p>\n

Normalerweise enthält ein Window<\/b>-Element immer ein Grid<\/b>-Element zur Strukturierung der enthaltenen Steuerelemente. Wenn Sie ein Menü hinzufügen wollen, strukturieren wir den XAML-Code ein wenig um. Als oberstes Element unterhalb des Window<\/b>-Elements verwenden wir dann nämlich ein DockPanel<\/b>-Element. Wenn wir diesem ein Menu<\/b>-Element und ein Grid<\/b>-Element hinzufügen, werden beide untereinander angeordnet und Sie können im Grid<\/b>-Element wie üblich die weiteren Steuerelemente anordnen. Im folgenden Beispiel fügen wir erst einmal ein ganz einfaches Menü hinzu, das Sie im Entwurf in Bild 1 sehen. Das DockPanel<\/b>-Element enthält zuerst ein Menu<\/b>-Element, das Hauptelement eines Menüs. Diesem fügen Sie beliebige MenuItem<\/b>-Elemente zur obersten Ebene hinzu, die alle oben in der Menüleiste erscheinen. Fügen Sie den MenuItem<\/b>-Elementen der obersten Ebene weitere MenuItem<\/b>-Elemente hinzu, werden diese darunter angeordnet. Zur Laufzeit erscheinen diese nur, wenn der Benutzer den MenuItem<\/b>-Eintrag der obersten Ebene öffnet. Die Beschriftung der Menüeinträge stellen wir mit dem Header<\/b>-Attribut ein:<\/p>\n

\"Einfaches<\/p>\n

Bild 1: Einfaches Menü<\/span><\/b><\/p>\n

<Window x:Class=\"MainWindow\" ... Title=\"MainWindow\" Height=\"450\" Width=\"800\">\r\n     <DockPanel>\r\n         <Menu DockPanel.Dock=\"Top\">\r\n             <MenuItem Header=\"Datei\">\r\n                 <MenuItem Header=\"Beenden\"><\/MenuItem>\r\n             <\/MenuItem>\r\n         <\/Menu>\r\n         <Grid>\r\n             \r\n         <\/Grid>\r\n     <\/DockPanel>\r\n<\/Window><\/pre>\n
Starten wir die Anwendung, erscheint das Menü wie in Bild 2.<\/p>\n
\"Einfaches<\/p>\n
Bild 2: Einfaches Menü zur Laufzeit<\/span><\/b><\/p>\n
Menüeinträge per Alt-Tastenkombination steuern<\/b><\/p>\n
Von Windows-Anwendungen, die noch mit dem herkömmlichen Menüsystem arbeiten, kennen Sie sicher die Möglichkeit, ein Menü aufzuklappen oder einen Menüpunkt auszuführen, indem Sie eine bestimmte Tastenkombination betätigen. Diese besteht aus der Taste Alt und dem Buchstaben der Bezeichnung des gewünschten Menüeintrags, der unterstrichen dargestellt wird.<\/p>\n
Solche Menüeinträge mit unterstrichenen Buchstaben lassen sich auch für die WPF-Menüs realisieren. Dazu fügen Sie nur vor dem Buchstaben, der für die Tastenkombination genutzt werden soll, einen Unterstrich ein wie in den folgenden Beispieleinträgen:<\/p>\n
<Menu DockPanel.Dock=\"Top\">\r\n     <MenuItem Header=\"_Datei\">\r\n         <MenuItem Header=\"_Öffnen\"><\/MenuItem>\r\n         <MenuItem Header=\"_Schließen\"><\/MenuItem>\r\n         <MenuItem Header=\"_Beenden\"><\/MenuItem>\r\n     <\/MenuItem>\r\n<\/Menu><\/pre>\n
Die Hauptmenüpunkte sehen danach zunächst wie üblich aus. Wenn Sie jedoch die Alt<\/b>-Taste herunterdrücken und gedrückt halten, werden die Buchstaben mit dem führenden Unterstrich unterstrichen dargestellt. Betätigen Sie also in diesem Fall bei gedrückter Alt<\/b>-Taste noch den Buchstaben D<\/b>, wird das Untermenü wie in Bild 3 geöffnet. Dann können Sie mit dem entsprechenden weiteren Buchstaben einen der Untermenüpunkte auswählen. Drücken Sie im initialen Zustand nur die Alt<\/b>-Taste und lassen diese wieder los, wird der erste Menüpunkt blau markiert und die mit dem Unterstrich versehenen Buchstaben in den Bezeichnungen werden ebenfalls nun unterstrichen dargestellt. Von nun an können Sie mit der Taste Nach unten <\/b>die Untermenüpunkte anzeigen und dann mit den Tasten Nach unten <\/b>und Nach oben <\/b>einen der Menüpunkte auswählen und dann mit der Eingabetaste aufrufen. Wenn das Hauptmenü bereits mehrere Einträge hätte, könnten Sie nach dem Betätigen der Alt<\/b>-Taste mit den Tasten Nach links <\/b>und Nach rechts <\/b>zwischen den Menüpunkten des Hauptmenüs navigieren.<\/p>\n
\"Menü<\/p>\n
Bild 3: Menü mit Tastenkombinationen<\/span><\/b><\/p>\n
Icons zu den Menüeinträgen hinzufügen<\/b><\/p>\n
Ein Menü ist nur halb so hübsch, wenn es keine Icons aufweist. Also fügen wir dem Menü ein paar Icons hinzu. Diese müssen Sie zunächst zum Projekt hinzufügen. Dazu legen wir im Projektmappen-Explorer ein neues Verzeichnis an. Diesem fügen wir dann die benötigten Dateien hinzu.<\/p>\n
Die Icons lassen sich nicht so eben per Attribut zum Menüeintrag hinzufügen. Dazu legen wir zunächst ein Unterelement namens MenuItem.Icon <\/b>an. Dieses enthält ein weiteres Unterelement namens Image<\/b>, für dessen Source<\/b>-Attribut wir schließlich den Verweis auf das zu verwendende Bild angeben. Dazu geben Sie den Pfad zu der Datei an, wie er im Projektmappen-Explorer vorliegt, also zum Beispiel \/Icons\/add.png<\/b>:<\/p>\n
<MenuItem Header=\"Einträge mit Icons\">\r\n     <MenuItem Header=\"_Hinzufügen\">\r\n         <MenuItem.Icon>\r\n             <Image Source=\"\/Icons\/add.png\"><\/Image>\r\n         <\/MenuItem.Icon>\r\n     <\/MenuItem>\r\n     <MenuItem Header=\"_Apfel\">\r\n         <MenuItem.Icon>\r\n             <Image Source=\"\/Icons\/apple.png\"><\/Image>\r\n         <\/MenuItem.Icon>\r\n     <\/MenuItem>\r\n     <MenuItem Header=\"_Ballon\">\r\n         <MenuItem.Icon>\r\n             <Image Source=\"\/Icons\/balloon.png\"><\/Image>\r\n         <\/MenuItem.Icon>\r\n     <\/MenuItem>\r\n<\/MenuItem><\/pre>\n
Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t
\n\n\t\t\n\t\t