Περιεχόμενο
Ο Nick παίζει πολλά επιτραπέζια RPG και βιντεοπαιχνίδια, καθώς και γράφει φανταστική φαντασία.
Με την επίσημη κυκλοφορία των Windows 10, αποφάσισα ότι θα έπρεπε να κάνω τη βουτιά και να προσπαθήσω να αρχίσω να γράφω "σύγχρονες" εφαρμογές. Είμαι σταθερά ριζωμένος στην ανάπτυξη winforms, οπότε το XAML υπήρξε μια τεράστια πηγή απογοήτευσης επειδή χρειάζεται μια εντελώς διαφορετική νοοτροπία για το σχεδιασμό της διεπαφής χρήστη. Αναζήτησα παραδείγματα για τη δημιουργία ενός μενού πλοήγησης για μια εφαρμογή UWP (Universal Windows Platform) και ό, τι βρήκα ήταν εντελώς πολύπλοκο για αυτό που ήθελα να κάνω.
Τελικά βρήκα έναν τρόπο να κάνω αυτό που ήθελα με έναν αρκετά απλό τρόπο, αλλά επειδή είμαι ακόμα νέος στα UWP και XAML, εάν κάποιος έχει προτάσεις για βελτίωση, φροντίστε να τα δημοσιεύσετε στα σχόλια!
Βήμα 1: Το μοντέλο μενού
Στην εφαρμογή σας (μπορείτε να δημιουργήσετε μια κενή εφαρμογή UWP εάν δεν την έχετε ήδη), προσθέστε ένα φάκελο μοντέλων (εάν δεν υπάρχει ήδη). Σε αυτόν τον φάκελο θα δημιουργήσετε δύο τάξεις NavItem και NavMenu. Επίσης, προχωρήστε και δημιουργήστε ένα φάκελο Προβολές, καθώς αυτό θα κρατήσει τις σελίδες για την εφαρμογή σας.
Το NavItem είναι το σημείο όπου θα κρατήσουμε τα δεδομένα για κάθε στοιχείο στο μενού μας. Είναι αρκετά βασικό, λαμβάνοντας τρεις παραμέτρους για τη διατήρηση του χαρακτήρα unicode για ένα γλύφο μενού, το κείμενο για το στοιχείο μενού και τη σελίδα που θα φορτώσει το μενού.
χρησιμοποιώντας το MyApp.Views; χρησιμοποιώντας το Σύστημα; namespace MyApp.Models {δημόσια κλάση NavItem {δημόσιο αντικείμενο Glyph {get; σειρά; } δημόσιο κείμενο συμβολοσειράς {get; σειρά; } δημόσια σελίδα τύπου {get; σειρά; } δημόσιο NavItem (αντικείμενο glyph = null, string text = "", Type page = null) {Glyph = glyph; Κείμενο = κείμενο; Σελίδα = (σελίδα == null? Typeof (BlankPage): σελίδα); }}}
Το NavMenu είναι εκεί όπου συμβαίνει πολλή μαγεία, όπως είναι εκεί όπου καθορίζετε το χρώμα φόντου για το μενού σας (προστίθενται χρώματα προσκηνίου και επισήμανσης, αν θέλετε), καθώς και τα στοιχεία μενού που θα εμφανίζονται.
χρησιμοποιώντας το MyApp.Views; χρησιμοποιώντας System.Collections.Generic; namespace MyApp.Models {δημόσια κλάση NavMenu {δημόσια συμβολοσειρά BackgroundColor {get; σειρά; } Δημόσια λίστα μενού στοιχείων {get; σειρά; } δημόσιο NavMenu () {Color = "# FF2B2B2B"; MenuItems = new List () {new NavItem (" uE1CE", "Item1", typeof (Page1)), new NavItem (" uE1CF", "Item2", typeof (Page2)), νέο NavItem (" uE104" , "Item3", typeof (Page3)), νέο NavItem (" uE104", "Item4", typeof (Page4))}; }}}
Σημειώστε ότι οι Σελίδες1, Σελίδα2, Σελίδα3 και Σελίδα4 είναι Σελίδες (όχι Προβολές!) Στο φάκελο Προβολές. Θα μπορούσατε να τον αλλάξετε να είναι ο φάκελος Pages αντί να χρησιμοποιήσετε το χώρο ονομάτων MyApp.Pages αντ 'αυτού.
Βήμα 2: Εμφάνιση του μενού
Ο τρόπος με τον οποίο έχω ρυθμίσει το μενού, καταλαμβάνει την αριστερή πλευρά της εφαρμογής χρησιμοποιώντας ένα στοιχείο ελέγχου SplitView. Η περιοχή περιεχομένου SplitView περιέχει ένα πλαίσιο που θα εμφανίζει την επιλεγμένη σελίδα μόλις επιλεγεί ένα στοιχείο μενού.
Το SplitView Pane περιέχει τα στοιχεία μενού που βρίσκονται μέσα σε μερικά StackPanels. Το παράθυρο ευθυγραμμίζεται στο επάνω και το αριστερό μέρος των παραθύρων και καταρρέει από προεπιλογή. Όταν ανοίξει το μενού, θα ανοίξει στην κορυφή του περιεχομένου της σελίδας (αντί να ωθεί τα πάντα στο πλάι).
Το πρώτο (Κάθετο) StackPanel έχει το DataContext που έχει αντιστοιχιστεί στην κλάση NavMenu που δημιουργήσαμε στο Βήμα 1. Αυτό μας επιτρέπει να ορίσουμε ιδιότητες θυγατρικών ελέγχων χρησιμοποιώντας τη σύνταξη {Binding}.
Στη συνέχεια, έχουμε ένα (Οριζόντιο) StackPanel που περιέχει το κουμπί που θα ανοίξει και θα κλείσει το μενού μας. Υπάρχει επίσης ένα TextBlock για να καθορίσετε μια κεφαλίδα μενού.
Κάτω από αυτό είναι το ListBox μας που θα εμφανίζει τα στοιχεία μενού που καθορίζονται στην τάξη NavMenu. Η ItemSource συνδέεται με την ιδιότητα NavMenu.MenuItems, η οποία είναι μια λίστα αντικειμένων NavItem. Τα στοιχεία ListBox αποδίδονται ως (Οριζόντια) StackPanel που περιέχει ένα TextBlock για το γλύφο μας και ένα TextBlock για το κείμενο του μενού.
Σελίδα 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 = "Vertical" Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> StackPanel.DataContext> vm: NavMenu /> /StackPanel.DataContext> StackPanel Orientation = "Horizontal" Background = "{Binding BackgroundCol x: Όνομα = "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: Όνομα =" NavMenu "Horizont alAlignment = "Left" VerticalAlignment = "Top" SelectionChanged = "NavMenu_SelectionChanged" Background = "{Binding BackgroundColor}" ItemsSource = "{Binding MenuItems}"> ListBox.IemTemplate> DataTemplate> StackPanel Orientation = "Οριζόντιο όνομα>> "Glyph" Text = "{Binding Glyph}" FontFamily = "Segoe MDL2 Assets". Πλάτος = "48" Margin = "5,0,0,0" /> TextBlock Text = "{Binding Text}" /> / StackPanel> / DataTemplate> /ListBox.ItTemplate> / ListBox> / StackPanel> /SplitView.Pane > SplitView.Content> Frame> / Frame> /SplitView.Content> / SplitView> / Σελίδα>
Βήμα 3: Εκδηλώσεις
Έχουμε μόνο μερικά συμβάντα για να προσθέσουμε στο MainBage codebehind για να το κάνουμε αυτό πλήρως λειτουργικό.
Το NavButton_Click απλώς αλλάζει και ανοίγει τη σελίδα μενού.
NavMenu_SelectionChanged Παίρνει την επιλεγμένη τιμή NavItem.Page και τη μεταφέρει στο NavStrip.Content Frame ώστε να μπορεί να εμφανιστεί.
ιδιωτικό κενό NavButton_Click (αποστολέας αντικειμένου, RoutedEventArgs e) {NavStrip.IsPaneOpen =! NavStrip.IsPaneOpen; } ιδιωτικό κενό NavMenu_SelectionChanged (αποστολέας αντικειμένου, SelectionChangedEventArgs e) {ListBox list = (ListBox) αποστολέας; if (list.SelectedIndex == -1) {επιστροφή; } Ρεύμα πλαισίου = NavStrip. Περιεχόμενο ως πλαίσιο; current.Navigate (((NavItem) list.SelectedItem). Σελίδα); NavStrip.IsPaneOpen = false; } Αυτό είναι! Παρόλο που μοιάζει ακόμα με πολλή δουλειά, είναι πολύ πιο εύκολο από τα άλλα μαθήματα εκεί έξω. Θα ήθελα να το βελτιώσω αλλάζοντας από {Binding} σε {x: Bind} έτσι ώστε να αποδίδει πιο αποτελεσματικά. Μη διστάσετε να κάνετε ερωτήσεις στα σχόλια και θα τους απαντήσω όσο καλύτερα μπορώ. Αυτό το άρθρο είναι ακριβές και πιστό από ό, τι γνωρίζουν οι συγγραφείς. Το περιεχόμενο προορίζεται μόνο για ενημερωτικούς ή ψυχαγωγικούς σκοπούς και δεν υποκαθιστά προσωπικές συμβουλές ή επαγγελματικές συμβουλές σε επιχειρηματικά, οικονομικά, νομικά ή τεχνικά θέματα.συμπέρασμα
