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

Mahdi Hosseini 135 Reputation points
2023-11-10T14:50:42.9966667+00:00

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

Windows App SDK
Windows App SDK
A set of Microsoft open-source libraries, frameworks, components, and tools to be used in apps to access Windows platform functionality on many versions of Windows. Previously known as Project Reunion.
737 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
778 questions
0 comments No comments
{count} votes

Accepted answer
  1. Jeanine Zhang-MSFT 9,346 Reputation points Microsoft Vendor
    2023-11-13T02:13:50.3166667+00:00

    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.


1 additional answer

Sort by: Most helpful
  1. Deleted

    This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.


    Comments have been turned off. Learn more