Adding a border thickness(1) to the Page that has NavigationView removes TogglePaneTopPadding.How to fix it?

Question

Adding a border of thickness to a page that has NavigationView removes the TogglePaneTopPadding value. Due to this, the Hamburger pane out is not working. How can I set or change the value for TogglePaneTopPadding?

Answer 1

Hello, Welcome to Microsoft Q&A,

The problem is related with TitleBar. you set ExtendViewIntoTitleBar as true, then the navigationview will fill the full window, but you have not specific the custom title bar, so the system 32 height titlebar will hover the Toggle button.

For this scenario, please refer to Title bar customization doc. set the custom titlebar margin left as 50 to make sure it will not hover navigationview toggle button.

<Grid  
    x:Name="AppTitleBar"  
    Margin="50,0,0,0"  
    VerticalAlignment="Top"  
    Background="Transparent">  
    <Grid.ColumnDefinitions>  
        <ColumnDefinition x:Name="LeftPaddingColumn" Width="0" />  
        <ColumnDefinition />  
        <ColumnDefinition x:Name="RightPaddingColumn" Width="0" />  
    </Grid.ColumnDefinitions>  
  
    <Image  
        Grid.Column="1"  
        Width="20"  
        Height="20"  
        Margin="12,0"  
        HorizontalAlignment="Left"  
        Source="Assets/Square44x44Logo.png" />  
    <TextBlock  
        Grid.Column="1"  
        Margin="50,8,0,0"  
        Style="{StaticResource CaptionTextBlockStyle}"  
        Text="Custom Title Bar" />  
</Grid>  

 

Please note, you need to set the title bar z-index top of current window.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

@Nico Zhu (Shanghai Wicresoft Co,.Ltd.) , Thank you for your response.
Along with your code, I set the Visibility of AppTitleBar to collapsed.
Below is my working code:

<Page
x:Class="NavBarTestOldversion.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:NavBarTestOldversion"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="Gray">

<Border BorderBrush="Red" BorderThickness="1">  
    <Grid>  
        <Grid.RowDefinitions>  
            <RowDefinition  Height="Auto"/>  
            <RowDefinition />  
        </Grid.RowDefinitions>  

        <Grid x:Name="AppTitleBar" Background="Transparent"  Visibility="Collapsed"/>  
        <NavigationView Grid.Row="1" Name="NaveView"  Canvas.ZIndex="1"  
                    CompactModeThresholdWidth="200"  
                    ExpandedModeThresholdWidth="10000"  
                    IsSettingsVisible="True" IsPaneToggleButtonVisible="True" />  
    </Grid>  
</Border>  

</Page>

CodeBehind:
public MainPage()
{
this.InitializeComponent();
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;
// Set XAML element as a draggable region.
Window.Current.SetTitleBar(AppTitleBar);
}

    private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)  
    {  
        AppTitleBar.Height = sender.Height;  
    }