Windows decoration changes - Is it possible to put a menu in the title bar given changes in v12.0.0?

[anewton]

Is it still possible in AvaloniaUI v12.0.0 to extend the title bar to remove the icon and title on the left, keep the window chrome controls on the right, but overlay custom controls in the top/left area?

(On Windows. For macOS, native menus are used so this may not bean issue but have not tested).

Noting that I've read through the documented AvaloniaUI v12.0.0 breaking changes with Window Decorations. The first pseudocode example, with AvaloniaUI v11.3.13, shows how to achieve this. The second pseudocode example, used with AvaloniaUI v12.0.0, is an attempt at the same layout. But in the screen capture of this in a running app v12.0.0 app (below), the menu is not hit testable and the title overlaps the menu.

Breaking changes in Avalonia 12 - Windows decoration changes

AvaloniaUI v11.3.13 - working pseudo code

 <Window
    x:Class="MyApp.Views.MainWindow"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="1024"
    d:DesignHeight="768"   
	Title="App Title"
    Width="1024"
    Height="768"
    MinWidth="1024"
    MinHeight="768"
    Background="{x:Null}"
    CanResize="True"
    CornerRadius="0"
    ExtendClientAreaChromeHints="PreferSystemChrome"
    ExtendClientAreaTitleBarHeightHint="40"
    ExtendClientAreaToDecorationsHint="True"
    Icon="/Assets/icon.ico"
    WindowStartupLocation="CenterScreen">
    <Panel Margin="{Binding $parent[Window].OffScreenMargin}">
        <Menu
            x:Name="mainMenu"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Cursor="Hand"  />
		[>>MainView here<<]
    </Panel>
</Window>

AvaloniaUI v12.0.0 - attempted pseudo code

<Window
    x:Class="MyApp.Views.MainWindow"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignWidth="1024"
    d:DesignHeight="768"   	
    Title="App Title"
    Width="1024"
    Height="768"
    MinWidth="1024"
    MinHeight="768"
    Background="Transparent"
    CanMaximize="True"
    CanMinimize="True"
    CanResize="True"
    CornerRadius="0"
    ExtendClientAreaTitleBarHeightHint="40"
    ExtendClientAreaToDecorationsHint="True"
    Icon="/Assets/icon.ico"
    WindowDecorations="Full"
    WindowStartupLocation="CenterScreen">
    <Panel Margin="{Binding $parent[Window].OffScreenMargin}">
        <Menu
            x:Name="mainMenu"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Cursor="Hand"  />
		[>>MainView here<<]
    </Panel>
</Window>

Screen capture showing better illustrating the question

Also noticing that AcrylicBlur seems to be broken when ExtendClientAreaToDecorationsHint is true. The image above has that set to True and this image below has that set to False. (I have other code that sets a background layer opacity with AcrylicBlur enabled).

[torum]

I think I got it.

I attached a fully working sample project file.
MenuInTitleBarExample.zip

Note: ExtendClientAreaToDecorationsHint does not work for Linux desktops (until Wayland support?)

[torum]

MainWindow.axaml

Add WindowDecorationProperties.ElementRole="User"

<Window xmlns="https://github.com/avaloniaui"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:vm="using:AvaloniaApplication1.ViewModels"
		xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
		xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
		mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
		x:Class="AvaloniaApplication1.Views.MainWindow"
		x:DataType="vm:MainWindowViewModel"
		Icon="/Assets/avalonia-logo.ico"
		Title="AvaloniaApplication1"
		ExtendClientAreaToDecorationsHint="True"
		WindowDecorations="Full">

	<Window.Styles>
		<Style Selector="WindowDrawnDecorations /template/ Panel#PART_TitleTextPanel > TextBlock">
			<Setter Property="IsVisible" Value="False" />
		</Style>
	</Window.Styles>

	<Grid RowDefinitions="40,*">

		<DockPanel Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left" WindowDecorationProperties.ElementRole="User">
			<Menu DockPanel.Dock="Top">
				<MenuItem Header="_File">
					<MenuItem Header="_Open..."/>
					<Separator/>
					<MenuItem Header="_Exit"/>
				</MenuItem>
				<MenuItem Header="_Edit">
					<MenuItem Header="Copy"/>
					<MenuItem Header="Paste"/>
				</MenuItem>
			</Menu>
		</DockPanel>

		<TextBlock Grid.Row="1" Text="{Binding Greeting}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
	</Grid>

</Window>

[anewton]

From the bug discussion, I was able to use on the Menu (or in your example on the DockPanel), WindowDecorationProperties.ElementRole="DecorationsElement". I'll try "User" and see what each option means to understand that better. But yes! That enables the menu to work and with the Window Style it does in fact hide the TextBlock. So now ExtendClientAreaToDecorationsHint="True" does what I want it to do!! Thanks!

Oh, and I tried pulling in the whole ContentTemplate from the Fluent theme source code (since I'm using Fluent). But that didn't have the effect of setting that TextBlock to IsVisible="False". Not sure why. But putting the style override in the MainWindow works great!

[LarinLive]

@torum could you review your window style in full-screen mode? When a cursor hovers menu in full-screen mode (IMHO at the most top pixel row), the hidden title bar is shown above the menu. I attached a short video.

full_screen_bug.mp4

[torum]

@LarinLive
That is FullscreenPopover/FullscreenOverlay menu bar thingy (not sure how to call it). This was one of the new thing introduced in Avalonia v12. At the time of the release, there was no way to easily disable or hide it. But I think I already mentioned how to do it in another thread.
#21101
However, recently I saw a pull request mentioning about adding a option to toggle its visibility. It may have been release already.

[torum]

As for the

AcrylicBlur seems to be broken when ExtendClientAreaToDecorationsHint is true.

I think that is because the template sets the background other than transparent. See the issue:
#21082

I edited the template to remove the background from PART_WindowBorder and PART_TitleBar, so AcrylicBlur now works as well.

Copy the theme template from
https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/WindowDrawnDecorations.xaml

Edit:

        <WindowDrawnDecorationsContent>
          <!-- Edit: Changed backgrounds to transparent-->
          <!-- PART_WindowBorder and PART_TitleBar Background="Transparent" https://github.com/AvaloniaUI/Avalonia/issues/21082 -->
          <WindowDrawnDecorationsContent.Underlay>
            <Panel x:Name="PART_UnderlayWrapper">
              <Border x:Name="PART_WindowBorder"
                      Background="Transparent"
                      BorderThickness="{TemplateBinding FrameThickness}"
                      BorderBrush="{DynamicResource SystemControlForegroundBaseMediumBrush}"
                      IsHitTestVisible="False" />
              <!-- Titlebar: background, title text, and drag area live in underlay -->
              <Panel x:Name="PART_TitleBar" VerticalAlignment="Top"
                     Height="{TemplateBinding TitleBarHeight}"
                     Background="Transparent"
                     IsVisible="{TemplateBinding HasTitleBar}"
                     WindowDecorationProperties.ElementRole="TitleBar" />
            </Panel>
          </WindowDrawnDecorationsContent.Underlay>

[anewton]

I thought I tried this last night but I guess the key is to make the Backgrounds on the "Underlay" Transparent. It works great!! Thanks again. I will mark this one as answer but both comments put together achieve the desired effect.

[torum]

Looks like things are going to get easier.
#21167 (comment)

With this pull request #21177 along with

<Style Selector="WindowDrawnDecorations /template/ Panel#PART_TitleTextPanel > TextBlock">
  <Setter Property="IsVisible" Value="False" />
</Style>