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

nr7wwzry 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(134)

我正在尝试使用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>

xaml

来源：https://stackoverflow.com/questions/75256422/how-can-i-center-a-navigation-view-item-in-the-uwp-navigationview-control-when

1条答案

按热度按时间

yc0p9oo01#

你需要修改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的列中。列的宽度设置为Auto，这意味着宽度取决于内容。列将与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的ColumnDefinition设置得更大，然后就可以将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">

赞(0）回复(0）举报 2023-02-01

我来回答

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

1条答案

相关问题

热门标签

最新问答