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

studio XFE 90 Reputation points
2024-10-26T01:09:03.17+00:00

This is my winui3 application's NavigationView

User's image

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

User's image

User's image

Windows App SDK
Windows App SDK
A set of Microsoft open-source libraries, frameworks, components, and tools to be used in apps to access Windows platform functionality on many versions of Windows. Previously known as Project Reunion.
804 questions
0 comments No comments
{count} votes

Accepted answer
  1. Junjie Zhu - MSFT 19,751 Reputation points Microsoft Vendor
    2024-10-28T05:22:16.3233333+00:00

    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.


1 additional answer

Sort by: Most helpful
  1. studio XFE 90 Reputation points
    2024-10-28T05:29:11.8633333+00:00

    Just need to add following code:

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

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.