Search code examples
c#xamluwpwinui

UWP NavigationView changes titlebar background

I'm using WinUI 2.7 on UWP, and on my XAML I have this code:

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}" ColumnSpacing="10.0">

    <muxc:NavigationView
        x:Name="NavigationView"
        HorizontalContentAlignment="Left"
        IsBackButtonVisible="Collapsed"
        PaneDisplayMode="LeftMinimal"
        SelectionChanged="SelectionChanged">
        <muxc:NavigationView.MenuItems>
            <muxc:NavigationViewItem
                Content="Main Page"
                Icon="Home"
                Tag="MainPage" />
        </muxc:NavigationView.MenuItems>

        <Frame x:Name="MainFrame" Margin="0,0,0,0" />

    </muxc:NavigationView>


</Grid>

And on my C#, I have this code to make the Titlebar transparent

public MainPage()
    {
        this.InitializeComponent();

        var coreTitleBar = CoreApplication.GetCurrentView().TitleBar; 
        coreTitleBar.ExtendViewIntoTitleBar = true;

        var view = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView(); 
        view.TitleBar.ButtonBackgroundColor = Windows.UI.Colors.Transparent;
        view.TitleBar.ButtonInactiveBackgroundColor = Windows.UI.Colors.Transparent;

        
    }

The problem here is that if the NavigationView is enabled, the Titlebar and the content of the page have a slightly different color

enter image description here

But if I comment out the NavigationView, this is fixed

enter image description here

The only way I found to change the color of the titlebar is using the Background propriety of the NavigationView, but even by setting {ThemeResource AcrylicBackgroundFillColorDefaultBrush} I can't get it to have the same color as the rest of the page

enter image description here

Is there a way I can have the exact same background color for everything?

Solution

  • Please refer to this document, NavigationView contains IsTitleBarAutoPaddingEnabled property, you could set it as false to extend full NavigationView into title bar. For more detail please refer to this document.

    <muxc:NavigationView IsTitleBarAutoPaddingEnabled="False"/>