"How can I center a navigation view item in the UWP NavigationView control when the pane displa-CodePudding

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>

CodePudding user response：

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">