“当窗格显示模式设置为“顶部”时，如何将 UWP NavigationView 控件中的导航视图项居中？”

Question

I am trying to create a navigation menu using the NavigationView control in UWP, and I want to center a navigation item when the pane display mode is set to 'Top'.

I have tried using the HorizontalAlignment and VerticalAlignment properties, but they don't seem to have any effect. Can anyone provide an example of how to center a navigation item in NavigationView control when the pane display mode is set to 'Top'?

<Grid>
    <NavigationView PaneDisplayMode="Top"
                    HorizontalContentAlignment="Center">

        <NavigationView.MenuItems>
            <NavigationViewItem Content="Nav iTem"/>
            <NavigationViewItem Content="Nav iTem"/>
            <NavigationViewItem Content="Nav iTem"/>
        </NavigationView.MenuItems>
       
    </NavigationView>
</Grid>

Answer 1

You will need to modify the default style of the NavigationView to achieve what you want. You could refer to @FrozenAssassine's answer here: https://stackoverflow.com/a/74861708/8443430 to create a copy of the default style of the NavigationView . Then search for x:Name="TopNavGrid" and you will see the part of navigation items when in the top mode.

Part of the default style:

<Grid x:Name="TopNavGrid" .....>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav" Width="{ThemeResource NavigationBackButtonWidth}"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition MinWidth="48" Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                          ... other controls..

                                    <NavigationViewList x:Name="TopNavMenuItemsHost"
                                                        Grid.Column="3"
                                                        HorizontalContentAlignment="Center"
                                                         .... other properties...
                                                         >
                                     
                                    </NavigationViewList>

The items are in a NavigationViewList control called TopNavMenuItemsHost and the TopNavMenuItemsHost is placed in a column of the TopNavGrid . The width of the column is set to Auto which means the width depends on the content. The column will be as big as the TopNavMenuItemsHost . So you can't make the items placed in the center.

To change the beahvior, please modify the ColumnDefinitions to the following:

  <Grid.ColumnDefinitions>
                                        <ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav" Width="{ThemeResource NavigationBackButtonWidth}"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition MinWidth="48" Width="48"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

Make the ColumnDefinition of the TopNavMenuItemsHost bigger and then you will be able to set the HorizontalAlignment="Center" to the TopNavMenuItemsHost .

 <NavigationViewList x:Name="TopNavMenuItemsHost"
                                                        Grid.Column="3" 
                                        .... other properties...
                                                        
                                                        HorizontalAlignment="Center"
                                                        SingleSelectionFollowsFocus="{Binding TemplateSettings.SingleSelectionFollowsFocus, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                                                        ScrollViewer.VerticalScrollBarVisibility="Hidden" 
                                                        ScrollViewer.VerticalScrollMode="Disabled">