UWP XAML NavigationView - CornerRadius on Content Panel-CodePudding

I am new to XAML and I am implementing a NavigationView control in my UWP application.

Some details:

Visual Studio 2019
Microsoft.UI.Xaml version 2.6.2 (Nuget Package Installed)

UWP Targets:

Target: Universal Windows
Target Version: Windows 10, version 2004 (10.0; Build 19041)
Min Version: Windows 10 Fall Creators Update (10.0; Build 16299)

I am trying to find the property or style that controls the top left corner radius of the "content" section. I would like to not have a rounded corner there, and just to flow directly to the top but I can't seem to find the correct way to do this. Attached is a picture of the rounded corner I am talking about: content frame.

Here is the XAML for my main page with the navigation menu:

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

Does anyone know how I can control the top left corner radius of the navigation menu content item to make it not rounded? Is there a style property I can override or set? Just directly setting the "CornerRadius" property on the NavigationView doesn't seem to make any difference.

Thanks

CodePudding user response：

To change the CornerRadius you have to create your own Style for the control:

1: In Visual Studio rightclick your project and go to "Design in Blend..."

2: After Blend is opened, you go to "Objects and Timeline" and rightclick on your NavigationView, which shows up in the list. In the rightclick menu you go to "Edit template" and from there to "Edit a copy".

3: A little window pops up and you can now enter the name of the style.

4: Visual studio will now create a custom style for your NavigationView and you can customise every little thing of the control.

5: You should be done. And if it doesn't work, write me a comment!