How to implement a Template 10 HamburgerMenu in a single page

I am attempting to use the Template 10 HamburgerMenu control within a single page of a UWP application (in conjunction with the PageHeader control), instead of the more typical application-wide hamburger menu that is hosted in a shell page.

The documentation doesn't explain specifically how this should be done, simply stating that "the HamburgerMenu is a XAML control and, as such, can be placed in any page of the application".

Assuming that this control works similarly to a SplitView, and using the Template10 HamburgerMenu demo code as a starting point, I have added the following minimal implementation to a 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 the content TextBlock, but not the containing menu. I have experimented with all the obvious HamburgerMenu properties, including HamburgerButtonVisibility, DisplayMode, IsOpen, IsFullScreen, but nothing has made the menu visible.

Can anyone please point me to a sample that includes the HamburgerMenu and the PageHeader controls together on a single page?

Solution

From the comments, it was understood that, you don't have an issue with the shell based approach of the hamburger template. All you want to do is,

Show the Hamburger menu only at one page and at the others simply go without the hamburger menu to avoid user direct navigation.

So coming to the solution, the Hamburger Control in Template10 comes with a property IsFullScreen. Set it to true like:

Shell.Instance.HamburgerMenu.IsFullScreen="true";

and this will hide your hamburger menu.

There are two ways you can go about it. I'll first put the solution that can be done but I won't recommend it.

You can access the Shell.xaml.cs from any page (that's the beauty) as it has a static, singleton instance. You can change the IsFullScreen="false" property in the OnNavigatedTo and OnNavigatingFrom override methods of the Page where you want to show the menu and in the shell, keep it as default true. or vis-ver default is set to true, and you can set it to false when navigating out and navigating into the page.
The second way (Recommended) would be to access the settingsService (another amazing feature) which the Template10 app uses. The settingsService is responsible for the the AppTheme, the HamburgerMenu IsFullScreen state, using the shell back button or the page header one along with Cache duration and Hiding the HamburgerMenu button.

The Reason: The reason why I would use the singleton instance of the settings service instead of that of the Shell, is because I would want all my app settings to go to an intermediate who would then perform the operations. So tomorrow if I plan to change some functionality based on the values, I'll have to simply edit the settingsService and not search the entire app as to where all do I update this property.

How you do it?

To follow the second approach and keeping default as false, I would first start off with:

File->New project->Hamburger Template.
Clean and Build the project (just to get all packages restored).
(Optional if you want the default as hidden Hamburger) Go to Shell.xaml and add the property IsFullScreen="True" to the code line <Controls:HamburgerMenu x:Name="MyHamburgerMenu">

Now I would go to the page where in I want to show the Hamburger menu (assume it's detailsPage), So I go to detailsPage and in the code-behind I override the OnNavigatingFrom and OnNavigateTo methods as 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);
}

This would do the job. Please Note: I am using the second approach. You can pick the first approach as well.

Please Note: IsFullScreen="true" would hide the HamburgerMenu and IsFullScreen="false" would show the HamburgerMenu.

The control's documentation