CODEWITHSUNDEEP
visual-studio-2022winui-3windows-11winuiwindows-app-sdk
Luís
Luís

Reputation: 247

Transparent title bar in WinUI 3 app (Windows 11)

I develop some UWP apps to Windows10 and I want put the tile bar transparent in a new app developed in WinUi3.

If I try this ExtendsContentIntoTitleBar = true; The minimize, maximize and close buttons disappear, and I cannot move the app in my Window.

But in UWP it was more simple. I can put the title bar transparent (or with the same color of my app) without any problem, something like this:

CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Transparent;
titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
titleBar.ButtonForegroundColor = Colors.Black;

It is possible something like that in WinUi3?

Upvotes: 0

Views: 4425

Answers (2)

Andrew KeepCoding
Andrew KeepCoding

Reputation: 13666

The Windows App SDK team offers great samples in GitHub. You should take a look at the Windowing sample app.

https://github.com/microsoft/WindowsAppSDK-Samples/tree/main/Samples/Windowing/cs-winui

You can also check my videos about customizing the TitleBar, if you're interested in.

https://youtu.be/rhYdNuBkqtE

UPDATE

I' so sorry Luís. The sample from the Windows App SDK team on GitHub seems to work only on Windows 11.

Windowing - TitleBar sample - Titlebar always null #116

I'm sure they are working to target windows 10 either, but for the moment, you might need to do the way I suggest on my video.

Upvotes: 0

Jeaninez - MSFT
Jeaninez - MSFT

Reputation: 4040

According to the Doc:

If you set ExtendsContentIntoTitleBar to true but do not call SetTitleBar, the system title bar is restricted to the caption buttons and a small area next to the caption buttons that is reserved for title bar behaviors. However, your custom title bar element does not get title bar behaviors, such as drag and the system menu, until SetTitleBar is called with a valid UIElement.

Set the transparency by setting the value of UIElement.Opacity Property:

The value between 0 and 1.0 that declares the opacity factor, with 1.0 meaning full opacity and 0 meaning transparent. The default value is 1.0.

Upvotes: 2

Related Questions