CODEWITHSUNDEEP
c#winui-3
RD4
RD4

Reputation: 155

Weird coloring when content extends into title bar

I want to write an app in WinUI 3 + C# 10 with a Navigationview extending into the title bar which works out well.
By putting a TextBlock into NavigationView.ContentOverlay I can set the title and some controls if needed.

To be able to drag the window in the remaining area I just call SetTitleBar(AObjectWithDesiredSize).
The background of the NavigationView panel and the object (which is a Grid) is set to "{ThemeResource ApplicationPageBackgroundThemeBrush}".

However, the resulting image looks something like this using light and dark mode: Light Mode Dark Mode

As you can see the colors don't match the color of the background.

Here's the source code:
MainWindow.xaml:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid x:Name="TitleBarColor" Height="44" Margin="200, 0, 0, 0" VerticalAlignment="Top" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

    <NavigationView Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <NavigationView.ContentOverlay>
            <StackPanel Margin="100, 0, 0, 0" VerticalAlignment="Center" HorizontalAlignment="Left" Height="44" Orientation="Horizontal">
                <Button Content="test"/>
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left" Text="Title" Style="{ThemeResource CaptionTextBlockStyle}"/>
            </StackPanel>
        </NavigationView.ContentOverlay>
        <NavigationView.MenuItems>
            <NavigationViewItem Icon="Play" Content="Test"/>
            <NavigationViewItem Icon="Play" Content="Test2"/>
            <NavigationViewItem Icon="Play" Content="Test3"/>
        </NavigationView.MenuItems>
    </NavigationView>
</Grid>

MainWindow.xaml.cs:

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();

        this.ExtendsContentIntoTitleBar = true;
        this.SetTitleBar(TitleBarColor);
    }
}

If i replace all "{ThemeResource ApplicationPageBackgroundThemeBrush}" with for example "WhiteSmoke", this effect becomes less apparent but is still there.
If i set the transparency of the TitleBarColor element to "Transparent" it's also still there.
When changing the Grid into a TextBlock there's also no change.
I also tried setting the color via ApplicationView.GetForCurrentView().TitleBar but this isn't supported in WinUI 3.

Does someone know why this is happening and how to fix it?
Thank you in advance!

Upvotes: 1

Views: 966

Answers (1)

RD4
RD4

Reputation: 155

I could fix it thanks to McNets comment.

I just had to edit App.xaml to this:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
        </ResourceDictionary.MergedDictionaries>

        <StaticResource x:Key="WindowCaptionBackground" ResourceKey="ApplicationPageBackgroundThemeBrush" />
        <StaticResource x:Key="WindowCaptionBackgroundDisabled" ResourceKey="ApplicationPageBackgroundThemeBrush" />
        <!--<StaticResource x:Key="WindowCaptionForeground" ResourceKey="ButtonForegroundThemeBrush" />
        <StaticResource x:Key="WindowCaptionForegroundDisabled" ResourceKey="ButtonDisabledForegroundThemeBrush" />-->
    </ResourceDictionary>
</Application.Resources>

Upvotes: 3

Related Questions