customizable title bar

[louweijia]

How to implement a cross-platform (windows/MacOS/Linux) customizable title bar in a PC application? Such as adding a search bar to the title bar, a theme toggle button, or merging the menu bar with the title bar (on non-MacOS systems).

[timunie]

well, for Windows this is possible. On Mac, I'm not sure and on Linux, it depends heavily on the window manager the user has isntalled. So it's not possible everywhere. Basically you can try to follow this: https://docs.avaloniaui.net/docs/next/tutorials/music-store-app/creating-a-modern-looking-window

Note: Some adjustments may be needed as the samples were ported from 0.10.x

[louweijia]

I want to the title bar like this on Mac, How can i do it?

[louweijia]

I found that workspace extend to titlebar when set ExtendClientAreaToDecorationsHint = true in MainWindow(). Next , i will use StackPanel fill title bar to implement custom titlebar.

[NickRimmer]

Hi, do you know how to add padding for window controls? With ExtendClientAreaToDecorationHint I can put my controls to the title, but my title height is bigger, and I want to put window controls like vertical centred. For example Safari title height bigger then by default in Avalonia Window

[djeikyb]

This is a bit less than what you asked for, and I've only tested it on macos, but I think this is the basic concept?

<Window 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"
        xmlns:vm="clr-namespace:Fnord.ViewModels;assembly=Fnord.Core"
        xmlns:views="clr-namespace:Fnord.Views"
        mc:Ignorable="d" d:DesignWidth="450" d:DesignHeight="740"
        x:Class="Fnord.Views.MainWindow"
        Title="Fnord"
        Background="{x:Null}"
        TransparencyLevelHint="AcrylicBlur"
        ExtendClientAreaToDecorationsHint="True"
        ExtendClientAreaChromeHints="PreferSystemChrome"
        ExtendClientAreaTitleBarHeightHint="-1"
        SystemDecorations="Full"
        Position="50,0"
        Width="1620"
        Height="850"
        WindowState="Normal"
        WindowStartupLocation="Manual"
        Topmost="{Binding Topmost}"
        x:Name="Main"
        x:CompileBindings="True" x:DataType="vm:MainViewModel">
  <Panel>
    <ExperimentalAcrylicBorder Name="AcrylicBorder"
                               IsHitTestVisible="False"
                               IsVisible="True">
      <ExperimentalAcrylicBorder.Material>
        <ExperimentalAcrylicMaterial BackgroundSource="Digger"
                                     TintColor="{DynamicResource AcrylicColor}"
                                     TintOpacity="{Binding TintOpacity}"
                                     FallbackColor="{DynamicResource AcrylicColor}"
                                     MaterialOpacity="{Binding MaterialOpacity}" />
      </ExperimentalAcrylicBorder.Material>
      <TextBlock Margin="75 5 0 0"
                 FontWeight="DemiBold"
                 Foreground="#F1F1F1"
                 Text="I'm in ur title bar"
                 IsHitTestVisible="False" />
    </ExperimentalAcrylicBorder>
    <Panel Margin="{Binding #Main.OffScreenMargin}">
      <StackPanel Margin="{Binding #Main.WindowDecorationMargin}">
        <TextBlock DockPanel.Dock="Top"
                   Text="hello world" />
      </StackPanel>
    </Panel>
  </Panel>
</Window>

Title="Fnord"

Ignored.

ExtendClientAreaToDecorationsHint="True"
ExtendClientAreaTitleBarHeightHint="-1"

Now you can draw in the title bar!

ExtendClientAreaChromeHints="PreferSystemChrome"

But you still want the default window decorations. Like nice looking borders, the standard close, minify, maximize buttons.

SystemDecorations="Full"

Prolly similar to the ExtendClientAreaChromeHints instruction? Not sure.

<TextBlock IsHitTestVisible="False" Text="I'm in ur title bar" />

The hit test is so you pass pointer interactions thru to the title bar. You don't want to implement grab-to-move yourself, right?

[Rekkonnect]

Works on Windows too.

You don't want to implement grab-to-move yourself, right?

Even if you wanted to, on Windows at least you won't achieve snapping the window borders to the screen that easily. It also won't be smooth after restoring window from full screen. Things are basically hitting the rails.

Quick note though, you can always play with hit test visibility. Dynamically changing it when the user presses Ctrl for example, after listening to the KeyDown event from the top level, you can effectively disable the native top bar functionality for as long as you want.