c# - Vertical Multi-level Navigation Menu in UWP App -
i m working on uwp app app contain products categories , inside category create product list , 3-level navigation.
for example
i working on uwp app right involves use of such navigation. let me hook basic code , can modify based on needs.
so, xaml looks this:
<grid background="{themeresource applicationpagebackgroundthemebrush}"> <grid.rowdefinitions> <rowdefinition height="50"/> <rowdefinition height="*"/> </grid.rowdefinitions> <relativepanel grid.row="0" background="blue"> <button x:name="button" content="" horizontalalignment="stretch" verticalalignment="stretch" width="50" height="50" foreground="white" borderbrush="{x:null}" background="{x:null}" fontfamily="segoe mdl2 assets" relativepanel.alignleftwithpanel="true" click="button_click"/> <textblock x:name="textblock" textwrapping="wrap" text="your app name" foreground="#fff7f7f7" relativepanel.alignverticalcenterwithpanel="true" relativepanel.alignrightwith="" relativepanel.rightof="button" margin="10,0,0,0" fontsize="22"/> </relativepanel> <splitview x:name="mysplitview" ispaneopen="false" openpanelength="220" grid.column="0" panebackground="skyblue" grid.row="1" d:layoutoverrides="leftmargin, rightmargin, topmargin, bottommargin"> <splitview.pane> <grid> <grid.columndefinitions> <columndefinition width="auto"/> <columndefinition width="auto"/> <columndefinition width="auto"/> </grid.columndefinitions> <listview x:name="_one" margin="10,0"> <listview.itemtemplate> <datatemplate> <textblock tapped="textblock_tapped" text="{binding}" selectionhighlightcolor="{x:null}" foreground="white"/> </datatemplate> </listview.itemtemplate> </listview> <listview x:name="_two" grid.column="1" margin="10,0"> <listview.itemtemplate> <datatemplate> <textblock tapped="textblock_tapped_1" text="{binding}" selectionhighlightcolor="{x:null}" foreground="white"/> </datatemplate> </listview.itemtemplate> </listview> <listview x:name="_three" grid.column="2" margin="10,0"> <listview.itemtemplate> <datatemplate> <textblock text="{binding}" selectionhighlightcolor="{x:null}" foreground="white"/> </datatemplate> </listview.itemtemplate> </listview> </grid> </splitview.pane> <grid> <textblock text="your content" verticalalignment="center" horizontalalignment="center" fontsize="36"/> </grid> </splitview> </grid> as can see have splitview control named 'mysplitview'.
it has pane , grid.
the pane contains navigation while grid contains content of application.
the pane divided 3 columns each column contains listview.
the 3 listview contains simple textblock control display items , click event on textblock control show secondary or third sublist based on item.
the code behind is:
public list<string> mainlist; public list<subitem> secondlist, thirdlist; public blankpage1() { this.initializecomponent(); mainlist = new list<string>(); mainlist.add("main item 1"); mainlist.add("main item 2"); mainlist.add("main item 3"); mainlist.add("main item 4"); mainlist.add("main item 5"); secondlist = new list<subitem>(); secondlist.add(new subitem { mainitem = "main item 1", subitem = "second item 1" }); secondlist.add(new subitem { mainitem = "main item 1", subitem = "second item 2" }); secondlist.add(new subitem { mainitem = "main item 1", subitem = "second item 3" }); secondlist.add(new subitem { mainitem = "main item 2", subitem = "second item 1" }); secondlist.add(new subitem { mainitem = "main item 2", subitem = "second item 2" }); secondlist.add(new subitem { mainitem = "main item 2", subitem = "second item 3" }); secondlist.add(new subitem { mainitem = "main item 3", subitem = "second item 1" }); secondlist.add(new subitem { mainitem = "main item 3", subitem = "second item 2" }); secondlist.add(new subitem { mainitem = "main item 3", subitem = "second item 3" }); secondlist.add(new subitem { mainitem = "main item 4", subitem = "second item 1" }); secondlist.add(new subitem { mainitem = "main item 4", subitem = "second item 2" }); secondlist.add(new subitem { mainitem = "main item 4", subitem = "second item 3" }); secondlist.add(new subitem { mainitem = "main item 5", subitem = "second item 1" }); secondlist.add(new subitem { mainitem = "main item 5", subitem = "second item 2" }); secondlist.add(new subitem { mainitem = "main item 5", subitem = "second item 3" }); thirdlist = new list<subitem>(); thirdlist.add(new subitem { mainitem = "second item 1", subitem = "third item 1" }); thirdlist.add(new subitem { mainitem = "second item 1", subitem = "third item 2" }); thirdlist.add(new subitem { mainitem = "second item 1", subitem = "third item 3" }); thirdlist.add(new subitem { mainitem = "second item 1", subitem = "third item 4" }); thirdlist.add(new subitem { mainitem = "second item 2", subitem = "third item 1" }); thirdlist.add(new subitem { mainitem = "second item 2", subitem = "third item 2" }); thirdlist.add(new subitem { mainitem = "second item 2", subitem = "third item 3" }); thirdlist.add(new subitem { mainitem = "second item 2", subitem = "third item 4" }); thirdlist.add(new subitem { mainitem = "second item 3", subitem = "third item 1" }); thirdlist.add(new subitem { mainitem = "second item 3", subitem = "third item 2" }); thirdlist.add(new subitem { mainitem = "second item 3", subitem = "third item 3" }); thirdlist.add(new subitem { mainitem = "second item 3", subitem = "third item 4" }); _one.itemssource = mainlist; } public class subitem { public string mainitem { get; set; } public string subitem { get; set; } } private void textblock_tapped(object sender, tappedroutedeventargs e) { //main item clicked //to show second item list textblock tb = sender textblock; list<string> seconditems = new list<string>(); foreach(subitem s in secondlist) { if(s.mainitem == tb.text) { seconditems.add(s.subitem); } } this._two.itemssource = seconditems; this._two.updatelayout(); //in case user clicks main item when third list has items _three.itemssource = null; this._three.updatelayout(); //set openpanelength manually items nice mysplitview.openpanelength = _one.width + _two.width + 50; this.mysplitview.updatelayout(); } private void button_click(object sender, routedeventargs e) { //to open close splitview mysplitview.ispaneopen = !mysplitview.ispaneopen; } private void textblock_tapped_1(object sender, tappedroutedeventargs e) { // secondary item clicked // show thirdlist textblock tb = sender textblock; list<string> thirditems = new list<string>(); foreach (subitem s in thirdlist) { if (s.mainitem == tb.text) { thirditems.add(s.subitem); } } this._three.itemssource = thirditems; this._three.updatelayout(); //set openpanelength manually items nice mysplitview.openpanelength = _one.width + _two.width + _three.width+ 50; this.mysplitview.updatelayout(); } hope helps.
have day.
regards,
raunaq patel
Comments
Post a Comment