如何在UWP应用中将NavigationView返回按钮整合到自定义标题栏？

你当前的实现把NavigationView放在独立的标题栏下方，导致返回按钮无法和标题栏对齐，同时没有正确配置NavigationView与系统标题栏的集成属性。下面是修正后的实现方案：

修正后的XAML代码 #

<Page
    x:Class="testuwpnavigation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:testuwpnavigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <controls:NavigationView x:Name="NavView"
                             IsTitleBarAutoPaddingEnabled="False"
                             ExtendViewIntoTitleBar="True"
                             IsBackButtonVisible="Visible">
        <!-- 自定义标题栏区域 -->
        <controls:NavigationView.HeaderTemplate>
            <DataTemplate>
                <Grid Height="48"
                      Margin="0,0,16,0"
                      Background="Transparent">
                    <!-- 应用标题 -->
                    <TextBlock Text="App title"
                               VerticalAlignment="Center"
                               FontSize="20"
                               Margin="12,0,0,0"/>
                </Grid>
            </DataTemplate>
        </controls:NavigationView.HeaderTemplate>

        <!-- 导航菜单 -->
        <controls:NavigationView.MenuItems>
            <controls:NavigationViewItem Content="Item1" Icon="Home"/>
            <controls:NavigationViewItem Content="Item2" Icon="Home"/>
            <controls:NavigationViewItem Content="Item3" Icon="Home"/>
            <controls:NavigationViewItem Content="Item4" Icon="Home"/>
        </controls:NavigationView.MenuItems>

        <!-- 页面内容区域 -->
        <Frame x:Name="ContentFrame"/>
    </controls:NavigationView>
</Page>

修正后的后台代码 #

using Windows.ApplicationModel.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace testuwpnavigation
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // 扩展系统标题栏到应用区域
            var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
            coreTitleBar.ExtendViewIntoTitleBar = true;

            // 将NavigationView的标题栏区域设置为系统拖拽区域
            Window.Current.SetTitleBar(NavView.TitleBar);
        }
    }
}

关键说明 #

• 布局结构调整：移除原有的独立标题栏Grid，让NavigationView占据整个页面，利用其内置的标题栏集成功能。
• 核心属性配置：
  • 设置ExtendViewIntoTitleBar="True"让NavigationView与系统标题栏融合。
  • IsTitleBarAutoPaddingEnabled="False"关闭自动内边距，确保返回按钮紧贴标题栏左侧。
• 拖拽区域设置：通过Window.Current.SetTitleBar(NavView.TitleBar)将NavigationView的标题栏部分设为系统可拖拽区域，保留窗口拖拽功能。
• 自定义Header：通过HeaderTemplate自定义应用标题位置，确保和返回按钮在同一水平线上，对齐方式匹配Windows 11设计规范。

修改后，返回按钮会紧贴系统标题栏左侧，与应用标题在同一行，完全匹配Windows 11设置或应用商店的样式。

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