What is the best way for customizing TitleBar in WinUI 3?

Question

What is the best way for customizing TitleBar in WinUI 3?

I used to customize in this way:

1.using window.Extend... and window.SetTitlebar(element);

2.using window.AppWindow.Extend...

now there is a new way for customizing titlebar (InputNonClientPointerSource), I'm a bit confused, please someone guide me. Before, we were using method 1, then the app window method came and we were told to use it.

Now a new method has been introduced with version 1.4. Do we have to use both the first method and the new method to use it?

there is a sample code:

https://github.com/microsoft/WinUI-Gallery/blob/main/WinUIGallery/ControlPagesSampleCode/Window/TitleBar/TitleBarSample3.txt

but docs is not clear, here they say we should not use window.SetTitlebar() but they used it in sample code!

https://github.com/microsoft/WinUI-Gallery/blob/ce7f31ecd2e0778faddc824086c7b35439f07bce/WinUIGallery/ControlPages/TitleBarPage.xaml#L152C1-L156C108

Answer 1

Hello,

Welcome to Microsoft Q&A!

When you opt-in to full title bar customization, you need to set the Window.ExtendsContentIntoTitleBar property to true in code instead, and then you could specify the drag region by calling the Window.SetTitleBar method and passing in a UIElement that defines the drag region.

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. It is called Fallback Titlebar.

Before 1.4, we can't interact with elements in the title bar area except through keyboard input and focus. With 1.4 changes, WinUI 3 custom titlebar now uses appwindow titlebar + nonclientinputpointersource apis under the hood. This opens up new possibilities like allowing clickable interactive controls like textbox, button in the titlebar area, surrounded by draggable region on both left and the right sides.

For more details, I suggest you could refer to the links:

Title bar customization

Clickable Interactive control sample for custom titlebar

Thank you.

Jeanine

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.