如何在Microsoft.UI.Xaml.Controls的NavigationView顶部添加图片标题（UWP应用）

要实现将图片标题放在NavigationView的汉堡菜单按钮上方，需要自定义NavigationView的控件模板，调整PaneHeader在面板中的位置顺序。

步骤说明 #

1. 提取默认控件模板：在Visual Studio中右键点击NavigationView控件 → 选择「编辑模板」→「编辑副本」，生成完整的ControlTemplate代码。
2. 调整元素顺序：找到模板中的PaneRoot网格，将PaneHeaderContentPresenter（承载PaneHeader内容的容器）移至TogglePaneButton（汉堡菜单按钮）之前，并调整布局参数确保显示位置正确。

修改后的核心代码示例 #

<muxc:NavigationView>
    <!-- 自定义NavigationView模板 -->
    <muxc:NavigationView.Template>
        <ControlTemplate TargetType="muxc:NavigationView">
            <!-- 保留模板其他原有内容，仅修改PaneRoot部分 -->
            <Grid x:Name="PaneRoot">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <!-- 1. 先放置PaneHeader内容 -->
                <ContentPresenter x:Name="PaneHeaderContentPresenter"
                                  Content="{TemplateBinding PaneHeader}"
                                  HorizontalAlignment="Stretch"
                                  VerticalAlignment="Center"
                                  Margin="0,12,0,8"/>

                <!-- 2. 再放置汉堡菜单按钮 -->
                <muxc:NavigationViewToggleButton x:Name="TogglePaneButton"
                                                Grid.Row="0"
                                                Margin="12,0,0,8"
                                                HorizontalAlignment="Left"
                                                VerticalAlignment="Bottom"/>

                <!-- 保留原有菜单列表等元素 -->
                <muxc:NavigationViewList x:Name="MenuItemsHost" Grid.Row="1"
                                        ItemTemplate="{TemplateBinding MenuItemTemplate}"
                                        ItemsSource="{TemplateBinding MenuItems}"/>
                <!-- 模板其他内容省略 -->
            </Grid>
        </ControlTemplate>
    </muxc:NavigationView.Template>

    <!-- 你的图片标题 -->
    <muxc:NavigationView.PaneHeader>
        <Image Source="Resources/header.png" HorizontalAlignment="Center" Height="45"/>
    </muxc:NavigationView.PaneHeader>

    <!-- 菜单项示例 -->
    <muxc:NavigationView.MenuItems>
        <muxc:NavigationViewItem Content="首页"/>
        <muxc:NavigationViewItem Content="设置"/>
    </muxc:NavigationView.MenuItems>
</muxc:NavigationView>

关键调整点 #

• 将PaneHeaderContentPresenter放在TogglePaneButton之前，确保渲染顺序优先
• 通过Margin和VerticalAlignment调整元素间距，保证布局美观
• 保留模板其他原有逻辑，避免破坏NavigationView的默认交互行为

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