uwp - How to implement a Template 10 HamburgerMenu in a single page -

i attempting use template 10 hamburgermenu control within single page of uwp application (in conjunction pageheader control), instead of more typical application-wide hamburger menu hosted in shell page.

the documentation doesn't explain how should done, stating "the hamburgermenu xaml control and, such, can placed in page of application".

assuming control works splitview, , using template10 hamburgermenu demo code starting point, have added following minimal implementation page:

<controls:hamburgermenu x:name="menu">     <controls:hamburgermenu.primarybuttons>         <controls:hamburgerbuttoninfo buttontype="command">             <stackpanel orientation="horizontal">                 <symbolicon width="48" height="48" symbol="home" />                 <textblock margin="12,0,0,0" verticalalignment="center" text="home" />             </stackpanel>         </controls:hamburgerbuttoninfo>     </controls:hamburgermenu.primarybuttons>      <controls:hamburgermenu.content>         <textblock>sample text</textblock>     </controls:hamburgermenu.content> </controls:hamburgermenu> 

this renders content textblock, not containing menu. have experimented obvious hamburgermenu properties, including hamburgerbuttonvisibility, displaymode, isopen, isfullscreen, nothing has made menu visible.

can please point me sample includes hamburgermenu , pageheader controls on single page?

from comments, understood that, don't have issue shell based approach of hamburger template. want is,

show hamburger menu @ 1 page , @ others go without hamburger menu avoid user direct navigation.

so coming solution, hamburger control in template10 comes property isfullscreen. set true like:

shell.instance.hamburgermenu.isfullscreen="true"; 

and hide hamburger menu.

there 2 ways can go it. i'll first put solution can done won't recommend it.

1. you can access shell.xaml.cs page (that's beauty) has static, singleton instance. can change isfullscreen="false" property in onnavigatedto , onnavigatingfrom override methods of page want show menu , in shell, keep default true. or vis-ver default set true, , can set false when navigating out , navigating page.
2. the second way (recommended) access settingsservice (another amazing feature) template10 app uses. settingsservice responsible the apptheme, hamburgermenu isfullscreen state, using shell button or page header one along cache duration , hiding hamburgermenu button.

---

the reason: reason why use singleton instance of settings service instead of of shell, because want app settings go intermediate perform operations. tomorrow if plan change functionality based on values, i'll have edit settingsservice , not search entire app update property.

---

how it?

to follow second approach , keeping default false, first start off with:

1. file->new project->hamburger template.
2. clean , build project (just packages restored).
3. (optional if want default hidden hamburger) go shell.xaml , add property isfullscreen="true" code line <controls:hamburgermenu x:name="myhamburgermenu">

4. now go page in want show hamburger menu (assume it's detailspage), go detailspage , in code-behind override onnavigatingfrom , onnavigateto methods below:

   protected override void onnavigatingfrom(navigatingcanceleventargs e) {     services.settingsservices.settingsservice.instance.isfullscreen = true;     base.onnavigatingfrom(e); }  protected override void onnavigatedto(navigationeventargs e) {     services.settingsservices.settingsservice.instance.isfullscreen = false;     base.onnavigatedto(e); } 

5. this job. please note: using second approach. can pick first approach well.

please note: isfullscreen="true" hide hamburgermenu , isfullscreen="false" show hamburgermenu.

the control's documentation

wiki