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

Question

我正在尝试使用 UWP 中的 NavigationView 控件创建导航菜单，当窗格显示模式设置为“顶部”时，我想将导航项居中。

我试过使用 HorizontalAlignment 和 VerticalAlignment 属性，但它们似乎没有任何效果。 谁能提供一个示例，说明当窗格显示模式设置为“顶部”时如何在 NavigationView 控件中居中导航项？

<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

您将需要修改NavigationView的默认样式以实现您想要的效果。 您可以在此处参考@FrozenAssassine 的回答： https://stackoverflow.com/a/74861708/8443430以创建NavigationView默认样式的副本。 然后搜索x:Name="TopNavGrid" ，您将在顶部模式下看到导航项的部分。

部分默认样式：

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

这些项目位于名为TopNavMenuItemsHost的NavigationViewList控件中， TopNavMenuItemsHost位于TopNavGrid的列中。 列的宽度设置为自动，这意味着宽度取决于内容。 该列将与TopNavMenuItemsHost一样大。 所以你不能把物品放在中央。

要更改行为，请将 ColumnDefinitions 修改为以下内容：

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

使 TopNavMenuItemsHost 的TopNavMenuItemsHost更大，然后您就可以将 HorizontalAlignment HorizontalAlignment="Center"设置为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">