UWP NavigationView菜单图标与菜单项重叠问题求助

阿华AIGC实验室

2026-5-15

解决UWP SDK 16299中NavigationView汉堡按钮重叠与顶部空白问题

我之前在使用SDK 16299的NavigationView时也碰到过一模一样的布局问题——这个版本作为NavigationView的首个正式支持版本，默认样式确实存在一些小瑕疵。你用Margin单独调整第一个菜单项只能解决重叠，没法根除顶部空白，最彻底的方案是修改控件的默认样式，咱们一步步来：

步骤1：生成NavigationView的样式副本

在Visual Studio中右键你的NavigationView控件，选择编辑模板 > 编辑副本，选择要存放样式的位置（比如当前窗口的资源字典），VS会自动生成完整的默认样式代码。

步骤2：修改样式中的核心布局部分

找到样式里名为PaneGrid的网格控件，这是侧边栏的根容器，我们需要调整它的内边距和行定义，同时确保菜单列表和汉堡按钮区域的布局分离：

调整PaneGrid的内边距与行结构

把原有的PaneGrid代码替换成这样：

<Grid x:Name="PaneGrid" Background="{TemplateBinding Background}" Padding="0,0,0,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> <!-- 汉堡按钮所在的头部区域 -->
        <RowDefinition Height="*"/> <!-- 菜单项列表区域 -->
        <RowDefinition Height="Auto"/> <!-- 底部的PaneFooter区域 -->
    </Grid.RowDefinitions>

这里把Padding的顶部值改成0，直接消除侧边栏顶部的空白。
用Auto和*的行定义，让头部、菜单列表、底部区域自动分配空间，避免重叠。

绑定控件到对应行

找到样式里的PaneHeaderContentControl（汉堡按钮所在容器）和MenuItemsPresenter（菜单项列表容器），给它们加上Grid.Row属性，确保布局在正确的行里：

<!-- 汉堡按钮头部区域 -->
<ContentControl x:Name="PaneHeaderContentControl" Grid.Row="0" 
                Content="{TemplateBinding PaneHeader}" 
                HorizontalContentAlignment="Stretch" 
                VerticalContentAlignment="Stretch" 
                Margin="{TemplateBinding PaneHeaderMargin}"/>

<!-- 菜单项列表 -->
<MenuItemsPresenter x:Name="MenuItemsPresenter" Grid.Row="1"
                    ItemContainerTemplate="{TemplateBinding MenuItemTemplate}"
                    ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}"
                    ItemTemplate="{TemplateBinding MenuItemTemplate}"
                    ItemsSource="{TemplateBinding MenuItems}"
                    Margin="0,0,0,0"
                    Padding="{TemplateBinding MenuItemsPanelPadding}"
                    VerticalAlignment="Top"/>

<!-- 底部的PaneFooter -->
<ContentControl x:Name="PaneFooterContentControl" Grid.Row="2"
                Content="{TemplateBinding PaneFooter}"
                HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Stretch"
                Margin="{TemplateBinding PaneFooterMargin}"/>