question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Extend TabView in title bar in WinUI 3

See original GitHub issue

I’m trying to to show TabView tabs in the title bar in WinUI 3. This could be done quite easily in UWP, but obviously some of these APIs are not available in WinUI. So I tried: this.ExtendsContentIntoTitleBar = true; tabViewFooter.MinWidth = 100; this.SetTitleBar(tabViewFooter); where “this” refers to main Window, but it doesn’t work properly. The window can be dragged and maximized / restored by double clicking but Minimize, Maximize and Close buttons don’t appear and the area where they should be is unresponsive to mouse events. If it worked, it wouldn’t be 100% correct anyway because, unlike the UWP sample, it uses a fixed width and doesn’t consider RTL layouts. Am I missing something?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
pratikonecommented, Sep 23, 2021

If you refer to the docs on custom titlebar, we recommend using simple UI elements like stackpanel or grid for custom titlebar element. Complex elements create ui layout issues. Also, any uielement set as custom titlebar cannot receive input because all the input is taken for titlebar operations like drag.

https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.window.settitlebar?view=winui-3.0

I am closing this issue. If you got follow up question, feel free to re-open it.

1reaction
Sanlorngcommented, Aug 21, 2021

You can try this code (please check your winui version >= 1.0.0 experimental

create helper class

public static class AppWindowHandle
    {

        [DllImport("Microsoft.UI.Windowing.Core.dll", CharSet = CharSet.Unicode)]
        private static extern int GetWindowHandleFromWindowId(WindowId windowId, out IntPtr result);

        [DllImport("Microsoft.UI.Windowing.Core.dll", CharSet = CharSet.Unicode)]
        private static extern int GetWindowIdFromWindowHandle(IntPtr hwnd, out WindowId result);

        public static AppWindow GetAppWindow(this Microsoft.UI.Xaml.Window window)
        {
            IntPtr windowHandle = WinRT.Interop.WindowNative.GetWindowHandle(window);
            _ = GetWindowIdFromWindowHandle(windowHandle, out WindowId windowId);
            return AppWindow.GetFromWindowId(windowId);
        }
    }

using AppWindow.TitleBar.ExtendsContentToTitleBar

    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            AppWindow appWindow = this.GetAppWindow();
            AppWindowTitleBar titleBar = appWindow.TitleBar;
            titleBar.ExtendsContentIntoTitleBar = true;
            titleBar.ButtonBackgroundColor = Colors.Transparent;
            SetTitleBar(CustomDragArea);
        }

    }

Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom Title bar showing up white-ish in WinUI 3
How do you extend the title? Via Window, or via AppWindow? – Nick · I use ExtendsContentIntoTitleBar = true; and SetTitleBar(CustomDragRegion). – ...
Read more >
Title bar customization - Windows apps
This article shows how to customize the title bar for apps that use either the Windows App SDK, WinUI 3, or UWP with...
Read more >
Tab View - Windows apps
Display TabView tabs in a window's titlebar​​ Instead of having tabs occupy their own row below a Window's titlebar, you can merge the...
Read more >
Displaying DataGrid Row Details in a TabView in WinUI 3
Our sample app contains a reusable window that comes with an empty TabView. It overlaps the title bar, like most browser windows.
Read more >
Building Windows Terminal with WinUI
It has proven to be fairly difficult to get our UI into the title bar area. While Terminal now does iconically have its...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found