How to leave a certain distance between the right page content of the NavigationView and the Titlebar

Question

This is my winui3 application's NavigationView

And this is the winui3 application created by Temlate Studio's NavigationView

Answer 1

Hello @studio XFE ,

Welcome to Microsoft Q&A!

According to the code in the WinUI3 Template Project, it is achieved by customizing the title bar. You can refer to the following code.

<Grid>
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition/>
     </Grid.RowDefinitions>
     <Grid x:Name="AppTitleBar"
   Height="48">
         <Grid.ColumnDefinitions>
             <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
             <ColumnDefinition x:Name="IconColumn" Width="Auto"/>
             <ColumnDefinition x:Name="TitleColumn" Width="Auto"/>
         </Grid.ColumnDefinitions>
         <Image x:Name="TitleBarIcon" 
        Source="ms-appx:///Assets/WindowIcon.ico"
        Grid.Column="1"
        Width="16" Height="16"
        Margin="8,0,4,0"/>
         <TextBlock x:Name="TitleBarTextBlock"
                    Text="App title" 
                    Style="{StaticResource CaptionTextBlockStyle}"
                    Grid.Column="2"
                    VerticalAlignment="Center">
         </TextBlock>
     </Grid>
     
     <NavigationView
     Grid.Row="1"
     x:Name="NavigationViewControl"    
     IsBackButtonVisible="Visible"
     IsSettingsVisible="False"
     Header="Main">
         <NavigationView.MenuItems>
             <NavigationViewItem Content="Nav Item A"/>
             <NavigationViewItem Content="Nav Item B"/>
             <NavigationViewItem Content="Nav Item C"/>
         </NavigationView.MenuItems>
         <Grid>
             <Frame x:Name="ContentFrame" />
         </Grid>
     </NavigationView>
     
 </Grid>

 public MainWindow()
 {
     this.InitializeComponent();
     this.ExtendsContentIntoTitleBar = true;
     this.SetTitleBar(AppTitleBar);
 }

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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

Just need to add following code:

<Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>