UWP XAML NavigationView控件内容面板左上角CornerRadius设置问题

你直接给NavigationView设置CornerRadius不生效，是因为NavigationView的内容区域圆角是由内部独立的背景层样式控制的，不需要重写整个控件模板，直接重写对应的内置资源即可实现需求。

实现步骤 #

1. 在你的Page的资源节点中添加NavigationViewContentBackgroundCornerRadius资源的重写，将左上角圆角值设为0即可，其余角可以保留默认的4px圆角，也可以根据你的需求调整：

<Page.Resources>
    <CornerRadius x:Key="NavigationViewContentBackgroundCornerRadius">0,4,4,4</CornerRadius>
</Page.Resources>

2. 上述资源是WinUI 2.6.2内置的NavigationView样式资源，重写后会自动覆盖默认值，无需修改其他属性，编译运行后就能看到内容区域左上角变为直角贴合顶部。

修改后完整代码示例 #

<Page
x:Class="NavTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:local="using:NavTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
    <CornerRadius x:Key="NavigationViewContentBackgroundCornerRadius">0,4,4,4</CornerRadius>
</Page.Resources>
<Grid>
    <muxc:NavigationView x:Name="NavView" Background="Gray">
        <muxc:NavigationView.MenuItems>
            <muxc:NavigationViewItem Tag="home" Icon="Home" Content="Home"/>
            <muxc:NavigationViewItemSeparator/>
            <muxc:NavigationViewItemHeader x:Name="MainPagesHeader" Content="Main pages"/>
            <muxc:NavigationViewItem Tag="apps" Content="Apps">
                <muxc:NavigationViewItem.Icon>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEB3C;"/>
                </muxc:NavigationViewItem.Icon>
            </muxc:NavigationViewItem>
            <muxc:NavigationViewItem Tag="games" Content="Games">
                <muxc:NavigationViewItem.Icon>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE7FC;"/>
                </muxc:NavigationViewItem.Icon>
            </muxc:NavigationViewItem>
            <muxc:NavigationViewItem Tag="music" Icon="Audio" Content="Music"/>
        </muxc:NavigationView.MenuItems>
    </muxc:NavigationView>
</Grid>
</Page>

补充说明 #

如果后续需要调整其他角的圆角，直接修改CornerRadius的四个值即可，顺序依次为左上角,右上角,右下角,左下角。如果需要全局生效，把资源写到App.xaml的Resources节点中即可。

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