How do I make the TitleBar transparent?

[eduardobragaxz]

I'm trying to mimic what I see in the WinUI Gallery and Clock apps, which is the titlebar showing in all DisplayModes and transparent. I got to make it to kind of work by copying some code from the WinUI Gallery repo, but the TitleBar does not become transparent.

Here's the MainPage.xaml file
And here's the code behind.
The only thing in the MainWindow files are a Page in XAML setting its content to MainPage in the code behind.

In App.xaml.cs I have a static property
Window MWindow = {get => m_window; set => m_window = value; }

Please ignore the MainWindow files in the repo from the links I put here. It's for another issue.

I can make the TitleBar transparent if I set the AppWindow.ExtendsContentIntoTitleBar to true, but then I don't know how to put anything in it.

Here are some screenshots of what I'm trying to accomplish

Here's my failed attempt

Any help is appreciated.

[TRadigk]

Hi @eduardobragaxz

to achieve this result:

please add this line in app.xaml to the key ResourceDictionary:
<SolidColorBrush x:Key="WindowCaptionBackground">Transparent</SolidColorBrush>

On your xaml for the page set Background to Transparent.

[eduardobragaxz]

Thanks @TRadigk. It does work when the window has focus, but if I focus somewhere else it looks like it does in my screenshot, not sure why.

(It looks like you tagged the wrong person hahaha)

[TRadigk]

Oh, I assumed github was smart enough to pick the correct "eduardo".

If you haven't figured it out yourself, add this line to the app.xaml resource dictionary:
<SolidColorBrush x:Key="WindowCaptionBackgroundDisabled">Transparent</SolidColorBrush>

[eduardobragaxz]

That's it. Thank you!