Tabs in titlebar

[jarno9981]

Please add possibilty to for example add the tabs in to title bar (titlebar extended just like uwp)

[ParkhutRoman]

titlebar extended just like uwp

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

[beeradmoore]

@ParkhutRoman AFAIK that is still broken for WinUI3.

[ParkhutRoman]

@beeradmoore its only have restrictions that did not exist before, like-

Don’t set the background property on a UIElement being used as a custom title bar. The min/max/close buttons will be hidden as the background color gets drawn over them.

The custom title bar works best when it is the top-most child of the parent container of your app. Deep nesting the UIElement within the XAML tree might cause unpredictable layout behaviors.

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

[ParkhutRoman]

For example if we dont need title bar background color, like all new WinUi windows, we can add to our own ResourceDictionary edited WindowChromeStyle

((1.0.0-preview2\lib\net5.0-windows10.0.18362.0) difference only in added Canvas.ZIndex and removed TitleBarMinMaxCloseContainer.Background)

<Style x:Key="WindowChromeStyle" TargetType="ContentControl">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="ContentControl">
					<Grid x:Name="LayoutRoot">
						<Grid
							x:Name="TitleBarMinMaxCloseContainer"
							HorizontalAlignment="Right"
							VerticalAlignment="Top"
							Canvas.ZIndex="1"
							Visibility="{Binding CaptionVisibility, RelativeSource={RelativeSource TemplatedParent}}">
							<Grid
								x:Name="MinMaxCloseContainer"
								HorizontalAlignment="Right"
								VerticalAlignment="Top"
								ColumnDefinitions="Auto,Auto,Auto">
								<Button
									x:Name="MinimizeButton"
									Grid.Column="0"
									AutomationProperties.AutomationId="_MinimizeButton"
									AutomationProperties.Name="Minimize"
									Content="M 0 0 H 10"
									Style="{StaticResource WindowCaptionButton}" />

								<Button
									x:Name="MaximizeButton"
									Grid.Column="1"
									AutomationProperties.AutomationId="_MaximizeButton"
									AutomationProperties.Name="Maximize"
									Content="M 1.516 -0.001 L 7.451 0.009 C 8.751 0.019 9 1 8.981 1.477 L 9.002 7.558 M 9.002 7.547 C 8.929 8.669 8 9 7.43 9.015 L 1.464 9.005 C 0.374 8.973 0 8 -0.004 7.484 L -0.004 1.477 C 0 1 0.415 0.009 1.527 -0.001"
									Style="{StaticResource WindowCaptionButton}" />
								<Button
									x:Name="CloseButton"
									Grid.Column="2"
									AutomationProperties.AutomationId="_CloseButton"
									AutomationProperties.Name="Close"
									Content="M 0 0 L 10 10 M 10 0 L 0 10"
									Style="{StaticResource WindowCaptionButton}">
									<Button.Resources>
										<ResourceDictionary>
											<ResourceDictionary.ThemeDictionaries>
												<ResourceDictionary x:Key="Light">
													<StaticResource x:Key="WindowCaptionButtonBackgroundPointerOver" ResourceKey="CloseButtonBackgroundPointerOver" />
													<StaticResource x:Key="WindowCaptionButtonBackgroundPressed" ResourceKey="CloseButtonBackgroundPressed" />
													<StaticResource x:Key="WindowCaptionButtonStrokePointerOver" ResourceKey="CloseButtonStrokePointerOver" />
													<StaticResource x:Key="WindowCaptionButtonStrokePressed" ResourceKey="CloseButtonStrokePressed" />
												</ResourceDictionary>
												<ResourceDictionary x:Key="Dark">
													<StaticResource x:Key="WindowCaptionButtonBackgroundPointerOver" ResourceKey="CloseButtonBackgroundPointerOver" />
													<StaticResource x:Key="WindowCaptionButtonBackgroundPressed" ResourceKey="CloseButtonBackgroundPressed" />
													<StaticResource x:Key="WindowCaptionButtonStrokePointerOver" ResourceKey="CloseButtonStrokePointerOver" />
													<StaticResource x:Key="WindowCaptionButtonStrokePressed" ResourceKey="CloseButtonStrokePressed" />
												</ResourceDictionary>
												<ResourceDictionary x:Key="HighContrast">
													<StaticResource x:Key="WindowCaptionButtonBackgroundPointerOver" ResourceKey="CloseButtonBackgroundPointerOver" />
													<StaticResource x:Key="WindowCaptionButtonBackgroundPressed" ResourceKey="CloseButtonBackgroundPressed" />
													<StaticResource x:Key="WindowCaptionButtonStrokePointerOver" ResourceKey="CloseButtonStrokePointerOver" />
													<StaticResource x:Key="WindowCaptionButtonStrokePressed" ResourceKey="CloseButtonStrokePressed" />
												</ResourceDictionary>
											</ResourceDictionary.ThemeDictionaries>
										</ResourceDictionary>
									</Button.Resources>
								</Button>
							</Grid>
						</Grid>
						<ContentPresenter
							x:Name="ClientAreaPresenter"
							Canvas.ZIndex="0"
							Content="{TemplateBinding Content}"
							ContentTemplate="{TemplateBinding ContentTemplate}"
							ContentTransitions="{TemplateBinding ContentTransitions}"
							Foreground="{TemplateBinding Foreground}" />
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup x:Name="CommonStates">
								<VisualState x:Name="Normal">
									<VisualState.Setters>

										<Setter Target="MinimizeButton.Foreground" Value="{ThemeResource WindowCaptionForeground}" />
										<Setter Target="MinimizeButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
										<Setter Target="MaximizeButton.Foreground" Value="{ThemeResource WindowCaptionForeground}" />
										<Setter Target="MaximizeButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
										<Setter Target="CloseButton.Foreground" Value="{ThemeResource WindowCaptionForeground}" />
										<Setter Target="CloseButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
									</VisualState.Setters>
								</VisualState>
								<VisualState x:Name="WindowInactive">
									<VisualState.Setters>

										<Setter Target="MinimizeButton.Foreground" Value="{ThemeResource WindowCaptionForegroundDisabled}" />
										<Setter Target="MinimizeButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
										<Setter Target="MaximizeButton.Foreground" Value="{ThemeResource WindowCaptionForegroundDisabled}" />
										<Setter Target="MaximizeButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
										<Setter Target="CloseButton.Foreground" Value="{ThemeResource WindowCaptionForegroundDisabled}" />
										<Setter Target="CloseButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
									</VisualState.Setters>
								</VisualState>
							</VisualStateGroup>
						</VisualStateManager.VisualStateGroups>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

And in page

<Page ...>
...
    <Grid>
        <Border
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Background="{ThemeResource SystemChromeMediumColor}"
            Canvas.ZIndex="0"
            IsHitTestVisible="False" />

        <winui:NavigationView
...
            x:Name="navigationView"
            Padding="32"
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch"
            IsSettingsVisible="True"
            IsTitleBarAutoPaddingEnabled="True"
            PaneDisplayMode="Left" >

            <winui:NavigationView.ContentOverlay>
                <Grid
                    x:Name="appTitleBar"
                    Height="44"
                    Margin="46,0,0,0"
                    Padding="0"
                    VerticalAlignment="Top"
                    Canvas.ZIndex="3"
                    IsHitTestVisible="False">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Image
                        x:Name="AppFontIcon"
                        Width="16"
                        Height="16"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Source="/Images/Square44x44Logo.png" />
                    <TextBlock
                        x:Name="AppTitle"
                        Grid.Column="1"
                        Margin="12,0,0,0"
                        VerticalAlignment="Center"
                        Style="{StaticResource CaptionTextBlockStyle}"
                        Text="..." />
                </Grid>
            </winui:NavigationView.ContentOverlay>
...
            <Grid
                x:Name="grid"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Canvas.ZIndex="0">

                <Frame x:Name="shellFrame" />

            </Grid>
        </winui:NavigationView>
    </Grid>
</Page>

Dont forget ExtendsContentIntoTitleBar = true and SetTitleBar();

[ParkhutRoman]

And if app have ThemeSelector, and you need get rid of wrong colors in WindowCaptionButtons, we can duct tape WindowChromeStyle befor we get normal api.

<Grid x:Name="LayoutRoot" RequestedTheme="{Binding ElementName=ClientAreaPresenter, Path=Content.RequestedTheme}">

var window = App.ActivationService.GetWindow() as MainWindow;
           window.DispatcherQueue.TryEnqueue(() => 
           {
               if (window.Content is ShellPage page)
               {
                   page.RequestedTheme = Theme;
                   window.ExtendsContentIntoTitleBar = true;
                   window.SetTitleBar(page.AppTitleBar);
               }
           });
          

[martibravo]

I recommend you use the new Windowing APIs (Microsoft.UI.Windowing) to do all of these things. To extend client area to the titlebar, use AppWindow.Titlebar.ExtendsContentIntoTitlebar, and AppWindow.Titlebar.Button... properties to set the colors of the titlebar. Also, AppWindow.Titlebar.SetDragRectangles to define the area(s) where the user can drag the app.

[martibravo]

The AppWindow object for the current Window can be obtained by using WindowNative and Win32Interop APIs. Sample in C# below:

      var hwnd = WinRT.Interop.WindowNative.GetWindowHandle(this);
      WindowId myWndId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(hWnd);
     AppWindow apw = AppWindow.GetFromWindowId(myWndId);

More info in the Microsoft Documentation for the Windows App SDK

[martibravo]

Although I think AppWindow should be easier to obtain. The Window class should have a GetAppWindow method of some sort.

[ParkhutRoman]

@martibravo it's hot mess with TitleBar api. Anyway you need app Microsoft.UI.Xaml.Window to set custom TitleBar, and with switching between dark and light in app we just need api for access RequestedTheme of apps root control like <Grid x:Name="LayoutRoot"> or even deeper, because now we only can change Microsoft.UI.Xaml.Window RequestedTheme, while WindowChromeStyle will have system's theme, which will set the same RequestedTheme to Titlebar.Button, and we will have hot mess where apps Titlebar.Buttons Foreground have almost the same Titlebar-App Background. My duct tape metod only for this case.
If app have static colors and no need for custom TitleBar its ok to use AppWindow.TitleBar to set and forget ab it, because you should not use this api with custom TitleBar from Microsoft.UI.Xaml.Window.SetTitleBar.
If im correct when we use Microsoft.UI.Xaml.Window.ExtendsContentIntoTitleBar we geting WindowChromeStyle buttons (you can see system TitleBar buttons when resizing window relay fast). And when you will use AppWindow.TitleBar.ExtendsContentIntoTitleBar window will shrink/hide systems TitleBar and only have buttons left.


For me editing WindowChromeStyle is more useful and less painful then having systems TitleBar buttons even with Windows 11 feachers

[ParkhutRoman]

I know that this is not the place to submit it, but I can't unsee this from now on - explorer.exe Windows 11 22483.1000

[martibravo]

I would like to point out that SetTitlebar is kind of buggy and setting the "Drag" rectangles is better. Calculate them on launch and update them when resizing. It works perfect for me!

[beeradmoore]

@ParkhutRoman , from what I had which was broken turns out it was missing the giant code snippet which was your WindowChromeStyle. From what I understand of what it's doing, its re-drawing the min/max/close buttons from scratch?

The first docs you link says

Extending app content into the title bar does not affect the window buttons (Minimize, Maximize, and Close).

I originally followed the doc but found that my min/max/close buttons disappeared. After some searching I found people who said the same thing and it appeared to be a shortcoming of WinUI3 (also correct me if I am wrong but WinUI3 = WindowsAppSDK?)

Removing WindowChromeStyle, and then setting background to transparent to all views made the original min/max/close buttons appear but non functional. Setting my root grid to have IsHitTestVisible="False" made them functional but broke everything else.

Is there no way to use the OS native min/max/close buttons? Or is by what you are saying with ((1.0.0-preview2\lib\net5.0-windows10.0.18362.0) is that native min/max/close buttons don't exist and are dependent on the framework version? (I am using WinUI3 0.8.5 not 1.0 preview)