如何在WinUI3应用中，改变NavigationView的PaneDisplayMode，使其显示在底部？

Question

我使用 WinUI3 控件时，发现NavigationView没有提供底部对齐模式。目前我只发现了 5 种模式： 自动、左对齐、顶对齐、左压缩、左最小。 请问我该如何实现底部菜单项？

此问题由 WinUI3 NavigationView PaneDisplayMode Bottom 总结而来。

Answer 1

你好，

欢迎来到微软问答！

通过修改NavigationView的Top样式即可实现底部显示。

1.在 ...\Microsoft.WinUI\Themes\generic.xaml 文件中找到 NavigationView 样式。

2.将样式复制到您的 xaml 文件。

3.修改顶部样式的显示属性，更改NavigationView所在的网格。 Grid.Row="1" VerticalAlignment="Bottom" 默认样式

<!-- DisplayMode top -->
 <StackPanel x:Name="TopNavArea" Background="{ThemeResource NavigationViewTopPaneBackground}" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Canvas.ZIndex="1" XYFocusKeyboardNavigation="Enabled">

修改后的

<!-- DisplayMode top --> 
<StackPanel x:Name="TopNavArea" Background="Yellow" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Canvas.ZIndex="1" XYFocusKeyboardNavigation="Enabled">

4.使用新的样式

<NavigationView Style="{StaticResource NavigationViewStyle1}" x:Name="myNavigationView"  PaneDisplayMode="Top"  Header="This is Header Text" >  
        <NavigationView.MenuItems>  
            <NavigationViewItem Content="Browse" Tag="SamplePage1" Icon="Library" />  
            <NavigationViewItem Content="Track an Order" Tag="SamplePage2" Icon="Map" />  
            <NavigationViewItem Content="Order History" Tag="SamplePage3" Icon="Tag" />  
        </NavigationView.MenuItems>  
    </NavigationView>  

---如果答案是正确的，请点击“接受答案”并点赞。 如果您对此答案还有其他疑问，请点击“评论”。 注意：如果您想收到该主题的相关电子邮件通知，请按照我们文档中的步骤启用电子邮件通知。