Title Bar
A title bar and window border, as the decorations Avalonia draws itself.
<!--
The theme draws the title bar as part of the window's decorations
(WindowDrawnDecorations), which a page cannot host; this is the same bar
built from the theme's resources: the gradient, the rule, the caption buttons.
-->
<Border Width="480" Height="140" HorizontalAlignment="Left" BorderThickness="1"
BorderBrush="{DynamicResource UIKit.WindowFrame}" Background="{DynamicResource UIKit.Background}">
<DockPanel>
<Border DockPanel.Dock="Top" Height="34" BackgroundSizing="OuterBorderEdge" BorderThickness="0,0,0,1"
BorderBrush="{DynamicResource UIKit.TitleBarBorder}">
<Border.Background>
<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
<GradientStop Offset="0" Color="{DynamicResource UIKit.TitleBar.GradientTop.Color}" />
<GradientStop Offset="1" Color="{DynamicResource UIKit.TitleBar.Color}" />
</LinearGradientBrush>
</Border.Background>
<DockPanel>
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
<Button Theme="{StaticResource UIKitCaptionButton}">
<PathIcon Width="14" Height="14" Data="{StaticResource UIKit.Icon.WindowMinimize}" />
</Button>
<Button Theme="{StaticResource UIKitCaptionButton}">
<PathIcon Width="14" Height="14" Data="{StaticResource UIKit.Icon.WindowMaximize}" />
</Button>
<Button Theme="{StaticResource UIKitCaptionButton}" Classes="close">
<PathIcon Width="14" Height="14" Data="{StaticResource UIKit.Icon.WindowClose}" />
</Button>
</StackPanel>
<TextBlock Text="My Application" Margin="{DynamicResource UIKit.TitleBar.Padding}" VerticalAlignment="Center"
FontSize="14" FontWeight="Medium" LineHeight="22.5" />
</DockPanel>
</Border>
<TextBlock Text="Window content" Margin="16" Foreground="{DynamicResource UIKit.MutedForeground}" />
</DockPanel>
</Border>Usage
The demo is a mock: WindowDrawnDecorations only renders inside a real window, so the page builds the same bar from the theme's pieces (the gradient, the rule, UIKitCaptionButton with its close class, and the UIKit.TitleBar.* resources). In an app nothing is composed by hand: the theme applies to the window chrome itself.
Set ExtendClientAreaToDecorationsHint="True" on the Window. The theme covers WindowDrawnDecorations, the decorations Avalonia draws itself: a 34px title bar with a 1px rule at its bottom, filled with a gradient from the title bar color mixed with 45% of the background down to the title bar color; the window's Title at 14px medium, inset by the UIKit.TitleBar.Padding resource (12px by default); and the caption buttons, 34 by 33 with 14px icons, secondary on hover and press, danger for close, the maximize button showing restore while maximized. The frame is 1px of the UIKit.WindowFrame gray inside a 20px shadow area with two shadows. Avalonia draws these on Windows (with the extended client area), X11 and Wayland with client-side decorations, never on macOS.
Not covered
- Arbitrary content in the title bar.
- Decorations drawn by the OS.