Сохтани менюи "Гамбургер" барои Windows 10 Apps UWP

Мундариҷа

• Қадами 1: Модели меню
• Қадами 2: Намоиши Меню
• Қадами 3: Чорабиниҳо
• Хулоса

Ник RPGs ва бозиҳои видеоии сершуморро бозӣ мекунад ва инчунин бадеии хаёлӣ менависад.

Бо баровардани расмии Windows 10, ман тасмим гирифтам, ки бояд ба об ғарқ шавам ва кӯшиш мекунам ба навиштани замимаҳои "муосир" шурӯъ кунам. Ман ба рушди шаклҳои winem реша давондаам, аз ин рӯ XAML манбаи бузурги ноумедӣ буд, зеро барои тарроҳии интерфейси тафаккури комилан дигар лозим аст. Ман дар бораи сохтани менюи новбари барномаи UWP (Universal Windows Platform) мисолҳо меҷустам ва ҳама чизҳое, ки ман ёфтам, барои он чизе, ки ман кардан мехостам, хеле душвор буданд.

Ман дар ниҳоят роҳи ба таври оддӣ иҷро кардани он чизе, ки мехостам фаҳмидам, аммо азбаски ман ҳанӯз барои UWP ва XAML нав ҳастам, агар касе барои беҳтар кардани он пешниҳоде дошта бошад, ҳатман онҳоро дар шарҳҳо ҷойгир кунед!

Қадами 1: Модели меню

Дар замимаи худ (шумо метавонед як барномаи холии UWP созед, агар шумо аллакай надошта бошед), ҷузвдони Models -ро илова кунед (агар он аллакай вуҷуд надошта бошад). Дар ин папка шумо ду синф эҷод мекунед NavItem ва NavMenu. Инчунин давом диҳед ва папкаи Views эҷод кунед, зеро ин саҳифаҳои барномаи шуморо нигоҳ медорад.

NavItem ин аст, ки мо маълумотро барои ҳар як ҷузъи менюи худ нигоҳ медорем. Ин хеле оддӣ аст, бо назардошти се параметр барои нигоҳ доштани аломати юникод барои глифи меню, матн барои банди меню ва саҳифае, ки меню бор мекунад.

бо истифода аз MyApp.Views; бо истифода аз система; фазои ном MyApp.Models {синфи ҷамъиятии NavItem {объекти ҷамъиятии Glyph {даст; гузоштан; } сатри ҷамъиятӣ Матн {даст; гузоштан; } саҳифаи Намуди оммавӣ {даст; гузоштан; } public NavItem (object glyph = null, string text = "", Type page = null) {Glyph = glyph; Матн = матн; Page = (page == null? Typeof (BlankPage): page); }}}

NavMenu дар он аст, ки бисёр ҷодугарӣ рӯй медиҳад, ҳамон тавре ки дар он шумо ранги заминаро барои менюи худ муайян мекунед (агар шумо хоҳед, рангҳои пешакӣ ва равшанро низ илова кардан мумкин аст), инчунин ашёи меню, ки намоиш дода мешаванд.

бо истифода аз MyApp.Views; бо истифода аз System.Collections.Generic; фазои ном MyApp.Models {синфи ҷамъиятии NavMenu {сатри ҷамъиятӣ BackgroundColor {даст; гузоштан; } Менюи Рӯйхати оммавӣ {даст; гузоштан; } public NavMenu () {Color = "# FF2B2B2B"; MenuItems = List new () {new NavItem (" uE1CE", "Item1", typeof (Page1)), NavItem new (" uE1CF", "Item2", typeof (Page2)), NavItem new (" uE104") , "Item3", typeof (Page3)), NavItem нав (" uE104", "Item4", typeof (Page4))}; }}}

Аҳамият диҳед, ки Page1, Page2, Page3 ва Page4 дар ҷузвдони Намоишҳо Саҳифаҳо мебошанд (На Намоишҳо!). Шумо метавонед онро ба ҷои папкаи Саҳифаҳо тағир диҳед ва ба ҷои он фазои номии MyApp.Pages -ро истифода баред.

Қадами 2: Намоиши Меню

Тарзи гузоштани меню, он тарафи чапи барномаро бо ёрии идоракунии SplitView ишғол мекунад. Мазмуни SplitView Чорчӯбаеро дар бар мегирад, ки саҳифаи интихобшударо пас аз интихоби ҷузъи меню намоиш медиҳад.

SplitView Pane дорои ҷузъҳои меню мебошад, ки дар якчанд StackPanels ҷойгиранд. Панел ба боло ва чапи тирезаҳо рост меояд ва бо нобаёнӣ хароб мешавад. Вақте ки меню кушода мешавад, он дар болои мундариҷаи саҳифа кушода мешавад (ба ҷои тела додани ҳама чиз ба як тараф).

Аввалин (Vertical) 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 Background 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 = "Horizon = Text> "Glyph" Text = "{Bling 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>

Қадами 3: Чорабиниҳо

Мо танҳо якчанд рӯйдод дорем, ки ба MainPage 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) фиристанда; агар (list.SelectedIndex == -1) {бозгашт; } Чорчӯбаи ҷорӣ = NavStrip.Content ҳамчун Frame; ҳозир.Навигат ((((NavItem) list.SelectedItem) .Саҳифа); NavStrip.IsPaneOpen = бардурӯғ; }

Хулоса

Ана тамом! Гарчанде ки он ҳанӯз ҳам кори зиёде ба назар мерасад, ин нисбат ба дигар дарсӣ дар он ҷо хеле осонтар аст. Ман мехоҳам инро беҳтар кунам ва аз {Binding} ба {x: Bind} гузаред, то он самараноктар иҷро шавад.

Озод ҳис кунед, ки дар шарҳ саволҳо диҳед ва ман ба онҳо ҳарчи беҳтар ҷавоб диҳам.

Ин мақола дақиқ ва ба беҳтарин дониши муаллиф рост аст. Мундариҷа танҳо барои мақсадҳои иттилоотӣ ё фароғатӣ пешбинӣ шудааст ва маслиҳати шахсӣ ё машварати касбиро дар масъалаҳои тиҷорӣ, молиявӣ, ҳуқуқӣ ва техникӣ иваз намекунад.