XAML-Tipp: UWP – Das neue MenuBar-Steuerelement

Kolumne: XAML Expertise

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „UWP: Das neue MenuBar-Steuerelement“

Die neue Windows 10 SDK Preview beinhaltet ein neues, vielversprechendes MenuBar-Steuerelement, das beim nächsten großen Windows-10-Update (Build 17738 oder höher) dabei sein soll. Wie auch mit dem Menüsteuerelement aus dem Windows Community Toolkit lassen sich mit ihm in Windows-10-Apps Menüs mit Untermenüs erstellen.

Der XAML-Code aus Listing 1 enthält das neue MenuBar-Steuerelement, das zwei MenuBarItem-Elemente enthält. Jedes MenuBarItem enthält MenuFlyoutItem-, MenuFlyoutSeparator– oder MenuFlyoutSubItem-Elemente. Dem MenuBarItem ist ein AccessKey zugewiesen. ALT + F öffnet das Dateimenü, ALT + H öffnet das Hilfemenü.

Die einzelnen Menüpunkte lassen sich mit Commands oder Click-Events erweitern. Die neue MenuBar wird Ihnen helfen, schönere LOB-Anwendungen zu schreiben (Abb. 1).

<Page x:Class="MenuBarDemo.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:MenuBarDemo"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      RequestedTheme="Light"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid>
    <MenuBar VerticalAlignment="Top">
      <MenuBarItem Title="File"
                   AccessKey="F">
        <MenuFlyoutItem Text="Open"
                        Icon="OpenFile">
            <MenuFlyoutItem.KeyboardAccelerators>
                <KeyboardAccelerator Key="O"
                                    Modifiers="Control" />
            </MenuFlyoutItem.KeyboardAccelerators>
        </MenuFlyoutItem>
        <MenuFlyoutSeparator />
        <MenuFlyoutItem Text="Save"
                        Icon="Save">
            <MenuFlyoutItem.KeyboardAccelerators>
                <KeyboardAccelerator Key="S"
                                    Modifiers="Control" />
            </MenuFlyoutItem.KeyboardAccelerators>
        </MenuFlyoutItem>
        <MenuFlyoutSubItem Text="Demo">
            <MenuFlyoutItem Text="A" />
            <MenuFlyoutItem Text="B" />
            <MenuFlyoutItem Text="C" />
        </MenuFlyoutSubItem>
    </MenuBarItem>
    <MenuBarItem Title="Help"
              AccessKey="H">
        <MenuFlyoutItem Text="About" />
      </MenuBarItem>
    </MenuBar>
  </Grid>
</Page>