Inhalt
Nick spielt mehrere Tabletop-RPGs und Videospiele und schreibt Fantasy-Fiction.
Mit der offiziellen Veröffentlichung von Windows 10 beschloss ich, den Sprung zu wagen und zu versuchen, "moderne" Apps zu schreiben. Ich bin fest in der Entwicklung von Winforms verwurzelt, daher war XAML eine große Quelle der Frustration, da die Gestaltung der Benutzeroberfläche eine völlig andere Denkweise erfordert. Ich suchte nach Beispielen zum Erstellen eines Navigationsmenüs für eine UWP-App (Universal Windows Platform), und alles, was ich fand, war viel zu kompliziert für das, was ich tun wollte.
Ich habe endlich herausgefunden, wie ich auf ziemlich einfache Weise das tun kann, was ich wollte, aber da ich noch neu in UWP und XAML bin, sollten Sie diese in den Kommentaren veröffentlichen, wenn jemand Verbesserungsvorschläge hat!
Schritt 1: Das Menümodell
Fügen Sie in Ihrer App (Sie können eine leere UWP-App erstellen, falls Sie noch keine haben) einen Modellordner hinzu (falls dieser noch nicht vorhanden ist). In diesem Ordner erstellen Sie zwei Klassen NavItem und NavMenu. Erstellen Sie auch einen Ordner "Ansichten", da dieser die Seiten für Ihre App enthält.
In NavItem speichern wir die Daten für jeden Eintrag in unserem Menü. Es ist ziemlich einfach und verwendet drei Parameter, um das Unicode-Zeichen für eine Menü-Glyphe, den Text für den Menüpunkt und die Seite, die das Menü lädt, zu halten.
Verwenden von MyApp.Views; using System; Namespace MyApp.Models {öffentliche Klasse NavItem {öffentliches Objekt Glyph {get; einstellen; } public string Text {get; einstellen; } public Type Page {get; einstellen; } public NavItem (Objekt glyph = null, string text = "", Typ page = null) {Glyph = glyph; Text = Text; Page = (page == null? Typeof (BlankPage): page); }}}
In NavMenu geschieht ein Großteil der Magie, da Sie hier die Hintergrundfarbe für Ihr Menü festlegen (auf Wunsch können auch Vordergrund- und Hervorhebungsfarben hinzugefügt werden) sowie die anzuzeigenden Menüelemente.
Verwenden von MyApp.Views; using System.Collections.Generic; Namespace MyApp.Models {öffentliche Klasse NavMenu {öffentliche Zeichenfolge BackgroundColor {get; einstellen; } public List MenuItems {get; einstellen; } public NavMenu () {Color = "# FF2B2B2B"; MenuItems = new List () {neues NavItem (" uE1CE", "Item1", Typ von (Seite1)), neues NavItem (" uE1CF", "Item2", Typ von (Seite2)), neues NavItem (" uE104") , "Item3", typeof (Seite3)), neues NavItem (" uE104", "Item4", typeof (Seite4))}; }}}
Beachten Sie, dass Seite1, Seite2, Seite3 und Seite4 Seiten (keine Ansichten!) Im Ordner Ansichten sind. Sie können stattdessen den Ordner "Seiten" ändern und stattdessen den Namespace "MyApp.Pages" verwenden.
Schritt 2: Anzeigen des Menüs
So wie ich das Menü eingerichtet habe, belegt es mithilfe eines SplitView-Steuerelements die linke Seite der Anwendung. Der SplitView-Inhaltsbereich enthält einen Rahmen, der die ausgewählte Seite anzeigt, sobald ein Menüelement ausgewählt wird.
Das SplitView-Fenster enthält die Menüelemente, die in einigen StackPanels enthalten sind. Der Bereich ist oben und links neben den Fenstern ausgerichtet und standardmäßig reduziert. Wenn das Menü geöffnet wird, wird es über dem Seiteninhalt geöffnet (anstatt alles zur Seite zu schieben).
Das erste (vertikale) StackPanel hat seinen DataContext der NavMenu-Klasse zugewiesen, die wir in Schritt 1 erstellt haben. Auf diese Weise können wir Eigenschaften von untergeordneten Steuerelementen mithilfe der {Binding} -Syntax festlegen.
Als nächstes haben wir ein (horizontales) StackPanel, das die Schaltfläche enthält, mit der unser Menü geöffnet und geschlossen wird. Es gibt auch einen TextBlock, um eine Menüüberschrift anzugeben.
Darunter befindet sich unsere ListBox, in der die in der NavMenu-Klasse angegebenen Menüelemente angezeigt werden. Die ItemSource ist an die NavMenu.MenuItems-Eigenschaft gebunden, bei der es sich um eine Liste von NavItem-Objekten handelt. Die ListBox-Elemente werden als (horizontales) StackPanel gerendert, das einen TextBlock für unsere Glyphe und einen TextBlock für den Menütext enthält.
Seite x: Class = "MyApp.MainPage" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/ xaml "xmlns: local =" using: MyApp "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility / 2006 "xmlns: vm =" using: MyApp.Models "mc: Ignorable =" d "> SplitView x: Name =" NavStrip "HorizontalAlignment =" Left "VerticalAlignment =" Top "DisplayMode =" CompactOverlay "IsPaneOpen =" False " > SplitView.Pane> StackPanel Orientation = "Vertikaler" Hintergrund = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> StackPanel.DataContext> vm: NavMenu /> /StackPanel.DataContext> StackPanel Orientation = "Horizontaler" Hintergrund> " x: Name = "NavButton" Content = "" FontFamily = "Segoe MDL2 Assets" Width = "48" Height = "36" Click = "NavButton_Click" Background = "Transparent" HorizontalAlignment = "Left" /> TextBlock Text = "MY APP "Margin =" 16,8,0,0 "/> / StackPanel> ListBox x: Name =" NavMenu "Horizont alAlignment = "Left" VerticalAlignment = "Top" SelectionChanged = "NavMenu_SelectionChanged" Background = "{Binding BackgroundColor}" ItemsSource = "{Binding MenuItems}"> ListBox.ItemTemplate> DataTemplate> StackPanel Orientation = "Horizontal> = "Glyph" Text = "{Binding Glyph}" FontFamily = "Segoe MDL2 Assets". Width = "48" Margin = "5,0,0,0" /> TextBlock Text = "{Binding Text}" /> / StackPanel> / DataTemplate> /ListBox.ItemTemplate> / ListBox> / StackPanel> /SplitView.Pane > SplitView.Content> Frame> / Frame> /SplitView.Content> / SplitView> / Page>
Schritt 3: Ereignisse
Wir müssen dem MainPage-Code nur ein paar Ereignisse hinzufügen, um dies voll funktionsfähig zu machen.
NavButton_Click schaltet die Menüseite einfach ein und aus.
NavMenu_SelectionChanged Ruft den ausgewählten NavItem.Page-Wert ab und übergibt ihn an den NavStrip.Content-Frame, damit er angezeigt werden kann.
private void NavButton_Click (Objektabsender, RoutedEventArgs e) {NavStrip.IsPaneOpen =! NavStrip.IsPaneOpen; } private void NavMenu_SelectionChanged (Objektabsender, SelectionChangedEventArgs e) {ListBox list = (ListBox) Absender; if (list.SelectedIndex == -1) {return; } Frame current = NavStrip.Content as Frame; current.Navigate (((NavItem) list.SelectedItem) .Page); NavStrip.IsPaneOpen = false; }} Das ist es! Es scheint immer noch viel Arbeit zu sein, aber es ist viel einfacher als die anderen Tutorials da draußen. Ich möchte dies verbessern, indem ich von {Binding} zu {x: Bind} wechsle, damit es effizienter funktioniert. Fühlen Sie sich frei, Fragen in den Kommentaren zu stellen, und ich werde sie so gut wie möglich beantworten. Dieser Artikel ist genau und nach bestem Wissen des Autors. Der Inhalt dient nur zu Informations- oder Unterhaltungszwecken und ersetzt nicht die persönliche Beratung oder professionelle Beratung in geschäftlichen, finanziellen, rechtlichen oder technischen Angelegenheiten.Fazit
