Das Hamburger Menü hat sich dank Web und Android zum quasi Standard erhoben, vor dem auch UWP Anwendungen nicht halt machen können. Bisher musste man als UWP Developer ein Splitview Control nutzen und per Hamburger Icon erweitern.
In der nun 5ten Windows 10 Version taucht ein neues Steuerelement in der Toolbox von Visual Studio 2017 auf, das NavigationView.
Das UWP Navigation Control ist ein sehr mächtiges Steuerelement, das eine Reihe von Anwendungsfällen abdeckt, wie man im folgenden Screenshot erkennen kann.
Ein und Ausklappbarer Menübereich, mit Abschnitten und Suchbox. Die Menüitems können statisch als NavigationViewItem oder dynamisch als NavigationViewList definiert werden. Letztes mit der MVVM üblichen Bindung per Binding oder x: Bind. Im Headertemplate kann eine modern Appbar mit oder ohne Datenbindung erstellt werden.
1: <NavigationView
2: ItemInvoked="NavigationView_ItemInvoked"
3: SelectionChanged="NavigationView_SelectionChanged">
4: <NavigationView.HeaderTemplate>
5: <DataTemplate>
6: <Grid>
7: <Grid.ColumnDefinitions>
8: <ColumnDefinition Width="Auto"/>
9: <ColumnDefinition/>
10: </Grid.ColumnDefinitions>
11: <TextBlock Style="{StaticResource TitleTextBlockStyle}"
12: FontSize="28"
13: VerticalAlignment="Center"
14: Margin="12,0"
15: Text="Hallo Welt"/>
16: <CommandBar Grid.Column="1"
17: HorizontalAlignment="Right"
18: DefaultLabelPosition="Right"
19: Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
20: <AppBarButton Label="Refresh" Icon="Refresh"/>
21: <AppBarButton Label="Save" Icon="Save"/>
22: </CommandBar>
23: </Grid>
24: </DataTemplate>
25:
26: </NavigationView.HeaderTemplate>
27:
28: <NavigationView.AutoSuggestBox>
29:
30: <AutoSuggestBox x:Name="controlsSearchBox"
31: Margin="0,8,12,0"
32: Width="270"
33: PlaceholderText="Search"
34: QueryIcon="Find"
35: TextChanged="controlsSearchBox_TextChanged"
36: QuerySubmitted="controlsSearchBox_QuerySubmitted"
37: RelativePanel.AlignRightWithPanel="True" />
38:
39:
40: </NavigationView.AutoSuggestBox>
41:
42:
43:
44: <!--NavigationViewList-->
45:
46: <NavigationView.MenuItems>
47: <NavigationViewItemHeader Content="Gruppe">
48: <NavigationViewItemHeader.Foreground>
49: <SolidColorBrush Color="{ThemeResource SystemBaseHighColor}">
50:
51: </SolidColorBrush>
52: </NavigationViewItemHeader.Foreground>
53: </NavigationViewItemHeader>
54: <NavigationViewItem Icon="Pictures" Content="Eins"/>
55: <NavigationViewItem Icon="Camera" Content="Test" Tag="zwei"/>
56: </NavigationView.MenuItems>
57:
58: <NavigationView.PaneFooter>
59: <HyperlinkButton Content="Datenschutz"></HyperlinkButton>
60: </NavigationView.PaneFooter>
61: <Frame x:Name="MainFrame">
62:
63: </Frame>
64:
65: </NavigationView>
Im Frame UI Element wird per Navigation eine weitere Page nachgeladen. Etwas seltsam muten die beiden Event ItemInvoked und dann SelectionChanged des NavigationViews. Beide werden ausgelöst. Ersteres übernimmt die Beschriftung (Content) als args.InvokedItem, das zweite Event den Wert des Tag Attributes args.SelectedItem. Noch seltsamer reagiert das erste Event ItemInvoked auf die Settings Aktion. Das Settings Icon befindet sich unten, wenn das Attribut IsSettingsVisible nicht oder auf true gesetzt wird. Im ItemInvoked Argument kann dies abgefragt werden und auf eine Settings Page navigiert werden.
1: if (args.IsSettingsInvoked)
2: {
3: MainFrame.Navigate(typeof(MySettings));
4: return;
5: }
Die Dokumentation erscheint mir aktuell sehr dünn und es findet sich kein passendes C# Code Beispiel.