question

Ela-7028 avatar image
0 Votes"
Ela-7028 asked NicoZhu-MSFT commented

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

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?

windows-uwp
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

What's the mean of Adding a border of thickness to a page that has NavigationView removes the TogglePaneTopPadding value., could you mind share your code ?

0 Votes 0 ·

Sure. Below are my code details.
When there is no border, the TogglePaneTopPadding is there.as shown in First image. But when I add border, that padding is removed - as in image 2.

My page xaml
<Page x:Class="WinUITestApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="using:Microsoft.UI.Xaml.Controls"> <Border BorderBrush="Red" BorderThickness="1><controls:NavigationView IsPaneToggleButtonVisible="True"/></Border> </Page>

My code for the title bar

var coreTitleBar = CoreApplication.GetCurrentView().TitleBar; coreTitleBar.ExtendViewIntoTitleBar = true;

First image : without border with TogglePaneTopPadding
<img width="601" alt="2" src="https://user-images.githubusercontent.com/91984487/136085746-4f64bfef-f6bf-43d8-bdd5-036d6be08b35.PNG">;
g.
Second Image: with border but no top padding
<img width="602" alt="1" src="https://user-images.githubusercontent.com/91984487/136086495-80112f31-cf17-4a6b-8ade-530350d4508a.PNG">;
g!

0 Votes 0 ·
NicoZhu-MSFT avatar image
0 Votes"
NicoZhu-MSFT answered NicoZhu-MSFT rolled back

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.











5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Ela-7028 avatar image
0 Votes"
Ela-7028 answered NicoZhu-MSFT commented

@NicoZhu-MSFT , 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;
     }
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Do you have any updates for this problem?

0 Votes 0 ·