UWP XAML NavigationView - 内容面板上的 CornerRadius

Question

我是 XAML 新手，正在我的 UWP 应用程序中实现 NavigationView 控件。

一些细节：

• Visual Studio 2019
• Microsoft.UI.Xaml 版本 2.6.2（已安装 Nuget 包）

UWP 目标：

• 目标：通用Windows

• 目标版本：Windows 10，版本2004（10.0；Build 19041）

• 最低版本： Windows 10 秋季创意者更新（10.0；内部版本 16299）

我正在尝试找到控制“内容”部分的左上角半径的属性或样式。我不想在那里有圆角，而只是直接流向顶部，但我似乎找不到正确的方法来做到这一点。附上我所说的圆角图片：。

这是带有导航菜单的主页的 XAML：

<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">

<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>

有谁知道如何控制导航菜单内容项的左上角半径以使其不圆角？是否有我可以覆盖或设置的样式属性？只是直接在 NavigationView 上设置“CornerRadius”属性似乎没有任何区别。

谢谢

Answer 1

要更改 CornerRadius，您必须为控件创建自己的样式：

1: 在 Visual Studio 中右键单击您的项目并转到“Design in Blend...”

2： 打开 Blend 后，转到“对象和时间轴”并右键单击您的导航视图，该视图显示在列表中。在右键菜单中，转到“编辑模板”，然后从那里转到“编辑副本”。

3: 会弹出一个小窗口，您现在可以输入样式的名称。

4： Visual Studio 现在将为您的 NavigationView 创建自定义样式，您可以自定义控件的每一个细节。

5： 你应该完成了。如果不起作用，请给我留言！

Answer 2

从 Windows App SDK 版本 1.4 开始，最简单的方法是打开

App.xaml

，在

<ResourceDictionary>

内添加以下行：

<CornerRadius x:Key="NavigationViewContentGridCornerRadius">0</CornerRadius>

请注意，如果您将其放入

NavigationView

，这将为您申请中的所有 

App.xaml

省去麻烦