WinUI 3 NavigationView底部布局及Header位置调整求助

要实现底部导航菜单且Header在页面顶部，你可以通过拆分布局来解决——将Header与NavigationView的导航区域分开放置，利用Grid控制两者的位置：

1. 用Grid作为根容器，划分出顶部Header区域和底部导航菜单区域
2. 移除NavigationView自带的Header属性，避免它跟着导航菜单一起下移
3. 将NavigationView设为底部对齐，同时保持PaneDisplayMode="Top"让菜单横向排列

修改后的完整XAML代码如下：

<?xml version="1.0" encoding="utf-8"?>
<Page
   x:Class="MyApp.Views.SelectorBarPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:MyApp.Views"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <!-- 顶部独立Header区域 -->
        <Grid Background="{ThemeResource NavigationViewHeaderBackground}" Height="56">
            <TextBlock Text="This is Header Text" 
                       Style="{ThemeResource TitleTextBlockStyle}"
                       Margin="16,0"/>
        </Grid>

        <!-- 底部导航菜单区域 -->
        <NavigationView
            x:Name="myNavigationView"
            PaneDisplayMode="Top"
            VerticalAlignment="Bottom"
            Background="Black">
            <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>
            <!-- 导航内容承载框架，按需添加页面内容 -->
            <Frame x:Name="ContentFrame"/>
        </NavigationView>
    </Grid>
</Page>

关键细节说明： #

• 顶部Header区域模拟了NavigationView原生Header的样式，可根据需求调整背景、字体和边距
• NavigationView通过VerticalAlignment="Bottom"固定在页面底部，PaneDisplayMode="Top"确保菜单横向排列
• 移除NavigationView自带的Header属性，彻底分离Header与导航菜单的位置

内容的提问来源于stack exchange，提问作者Carlos Costa