Customize Template10 HamburgerMenu (Hamburger Icon Size & PaneOpen Width)

Question

I have read their documentation on GitHub and still have not found a way to change the hamburger icon height which matches the height of my own page header (Template10 Pageheader has fixed size that can't be changed that's why I made my own)

Furthermore I want the pane to completely open like any other UWP app.

I want the pane to be wide open like this:Pane is open, page title/header shifting to the right

Too bad it looks like this Page title not shifting to the right and only the 'bottom' pane is open

The XAML of the Shell:

<Page x:Class="Template10.Samples.VoiceAndInkSample.Views.Shell"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:Controls="using:Template10.Controls"
  xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
  xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:local="using:Template10.Samples.VoiceAndInkSample.Views"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:views="using:Template10.Samples.VoiceAndInkSample.Views" mc:Ignorable="d">

<Controls:ModalDialog IsModal="{x:Bind IsBusy, Mode=OneWay}">
    <Controls:ModalDialog.Content>
        <Controls:HamburgerMenu x:Name="MyHamburgerMenu" IsFullScreen="False"
            HamburgerBackground="#EB690B"
            HamburgerForeground="White"
            NavAreaBackground="#EB690B"
            NavButtonBackground="#EB690B"
            SecondarySeparator="#EB690B"  
            NavButtonForeground="White" 
            NavButtonCheckedForeground="Black"
            NavButtonCheckedBackground="#EB690B"
            NavButtonCheckedIndicatorBrush="Black"
            VisualStateNormalDisplayMode="CompactOverlay"
            VisualStateNarrowDisplayMode="CompactOverlay"
            VisualStateWideDisplayMode="CompactOverlay">

            <Controls:HamburgerMenu.PrimaryButtons>
                <Controls:HamburgerButtonInfo ClearHistory="True" PageType="views:MainPage">
                    <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.SecondaryButtons>
                <Controls:HamburgerButtonInfo PageType="views:SettingsPage">
                    <StackPanel Orientation="Horizontal">
                        <SymbolIcon Width="48" Height="48" Symbol="Setting" />
                        <TextBlock Margin="12,0,0,0" VerticalAlignment="Center" Text="Settings" />
                    </StackPanel>
                </Controls:HamburgerButtonInfo>
            </Controls:HamburgerMenu.SecondaryButtons>

        </Controls:HamburgerMenu>

    </Controls:ModalDialog.Content>
    <Controls:ModalDialog.ModalContent>

        <Viewbox Height="32">
            <StackPanel Orientation="Horizontal">
                <ProgressRing Width="16" Height="16"
                              Margin="12,0" Foreground="White"
                              IsActive="{x:Bind IsBusy, Mode=OneWay}" />
                <TextBlock VerticalAlignment="Center" Foreground="White" Text="{x:Bind BusyText, Mode=OneWay}" />
            </StackPanel>
        </Viewbox>

    </Controls:ModalDialog.ModalContent>
</Controls:ModalDialog>

Answer 1

You can't change the height of the HamburgerButton with the current version of Template10 as it is hardcoded. Height definition in the source

You could either fork and define your own height or (if you can target the latest Windows 10 release) use the new NavigationView instead.

As for making it look "completely open", first you'd have to use the Inline DisplayMode instead of the CompactOverlay you're currently using. Then you'd have to set the HamburgerBackground color of the HamburgerMenu to the same color set for NavAreaBackground. This way you'd get the effect of full height. On how to apply those colors, please see my answer here.