feat: add basic implementation of window decorations.

demo/Semi.Avalonia.Demo/Views/MainWindow.axaml

@@ -5,10 +5,12 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
-    Title="Semi.Avalonia.Demo"
+    Title="Semi Avalonia Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    ExtendClientAreaToDecorationsHint="True"
+    ExtendClientAreaTitleBarHeightHint="40"
     Icon="/Assets/irihi.ico"
     mc:Ignorable="d">
-    <views:MainView />
+    <views:MainView Margin="{Binding $parent[Window].WindowDecorationMargin}" />
 </Window>

src/Semi.Avalonia/Controls/WindowDrawnDecorations.axaml

@@ -1,5 +1,4 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
     <ControlTheme x:Key="CaptionButton" TargetType="Button">
         <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
@@ -10,19 +9,18 @@
         <Setter Property="Height" Value="{StaticResource CaptionButtonHeight}" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="VerticalAlignment" Value="Stretch" />
-        <Setter Property="WindowDecorationProperties.ElementRole" Value="DecorationsElement" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
                 <ContentPresenter
                     Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
-                    Foreground="{TemplateBinding Foreground}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
-                    CornerRadius="{TemplateBinding CornerRadius}" />
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Foreground="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
 
@@ -38,181 +36,171 @@
     <ControlTheme x:Key="{x:Type WindowDrawnDecorations}" TargetType="WindowDrawnDecorations">
         <Setter Property="DefaultTitleBarHeight" Value="32" />
         <Setter Property="DefaultFrameThickness" Value="1" />
-        <Setter Property="DefaultShadowThickness" Value="8" />
+        <Setter Property="DefaultShadowThickness" Value="16" />
         <Setter Property="Template">
             <WindowDrawnDecorationsTemplate>
                 <WindowDrawnDecorationsContent>
-
                     <WindowDrawnDecorationsContent.Underlay>
-                        <Panel Name="PART_UnderlayWrapper">
+                        <!--  Full-size: covers shadow area + frame + behind client area  -->
-                            <Border Name="PART_WindowBorder"
+                        <Panel>
-                                    Background="{DynamicResource SystemControlBackgroundAltHighBrush}"
+                            <Border
-                                    BorderThickness="{TemplateBinding FrameThickness}"
+                                x:Name="PART_WindowBorder"
-                                    BorderBrush="{DynamicResource SystemControlForegroundBaseMediumBrush}"
+                                Margin="{TemplateBinding ShadowThickness}"
-                                    IsHitTestVisible="False" />
+                                Background="{DynamicResource WindowBackground}"
+                                BorderBrush="{DynamicResource WindowBorderBrush}"
+                                BorderThickness="1"
+                                BoxShadow="0 8 32 0 #40000000" />
                             <!-- Titlebar: background, title text, and drag area live in underlay -->
-                            <Panel Name="PART_TitleBar" VerticalAlignment="Top"
+                            <Panel x:Name="PART_TitleBar" VerticalAlignment="Top"
                                    Height="{TemplateBinding TitleBarHeight}"
                                    Background="{DynamicResource SystemControlBackgroundAltHighBrush}"
                                    IsVisible="{TemplateBinding HasTitleBar}"
                                    WindowDecorationProperties.ElementRole="TitleBar" />
-
                         </Panel>
                     </WindowDrawnDecorationsContent.Underlay>
 
                     <WindowDrawnDecorationsContent.Overlay>
-                        <!-- Overlay: only interactive caption buttons -->
+                        <!--  Positioned over the titlebar area  -->
-                        <Panel Name="PART_OverlayWrapper">
+                        <Panel x:Name="PART_OverlayWrapper">
-                            <!-- Title text lives in overlay so it renders above client content -->
+                            <!--  Title text lives in overlay so it renders above client content  -->
-                            <Panel Name="PART_TitleTextPanel" VerticalAlignment="Top"
+                            <Panel
-                                   Height="{TemplateBinding TitleBarHeight}"
+                                x:Name="PART_TitleTextPanel"
-                                   IsHitTestVisible="False"
+                                Height="{TemplateBinding TitleBarHeight}"
-                                   IsVisible="{TemplateBinding HasTitleBar}">
+                                VerticalAlignment="Top"
-                                <TextBlock Text="{TemplateBinding Title}"
+                                IsHitTestVisible="False"
-                                           VerticalAlignment="Center"
+                                IsVisible="{TemplateBinding HasTitleBar}">
-                                           Margin="12,0,0,0"
+                                <TextBlock
-                                           FontSize="12" />
+                                    Margin="12,0,0,0"
+                                    VerticalAlignment="Center"
+                                    FontSize="12"
+                                    Text="{TemplateBinding Title}" />
                             </Panel>
-                            <StackPanel Name="PART_OverlayPanel"
+                            <StackPanel
-                                        VerticalAlignment="Top"
+                                x:Name="PART_OverlayPanel"
-                                        HorizontalAlignment="Right"
+                                Height="{TemplateBinding TitleBarHeight}"
-                                        Height="{TemplateBinding TitleBarHeight}"
+                                HorizontalAlignment="Right"
-                                        IsVisible="{TemplateBinding HasTitleBar}"
+                                VerticalAlignment="Top"
-                                        Orientation="Horizontal"
+                                IsVisible="{TemplateBinding HasTitleBar}"
-                                        Spacing="2"
+                                Orientation="Horizontal"
-                                        TextElement.FontSize="10">
+                                Spacing="2"
+                                TextElement.FontSize="10">
                                 <Button
                                     Name="PART_FullScreenButton"
                                     Theme="{StaticResource CaptionButton}"
                                     WindowDecorationProperties.ElementRole="FullScreenButton">
                                     <PathIcon
                                         Name="PART_FullScreenButtonIcon"
-                                        Theme="{StaticResource InnerPathIcon}"
                                         Data="{StaticResource WindowExpandGlyph}"
-                                        Foreground="{Binding $parent[Button].Foreground}" />
+                                        Foreground="{Binding $parent[Button].Foreground}"
+                                        Theme="{StaticResource InnerPathIcon}" />
                                 </Button>
                                 <Button
                                     Name="PART_MinimizeButton"
+                                    AutomationProperties.Name="Minimize"
                                     Theme="{StaticResource CaptionButton}"
                                     WindowDecorationProperties.ElementRole="MinimizeButton">
                                     <PathIcon
                                         Name="PART_MinimizeButtonIcon"
-                                        Theme="{StaticResource InnerPathIcon}"
                                         Data="{StaticResource WindowMinimizeGlyph}"
-                                        Foreground="{Binding $parent[Button].Foreground}" />
+                                        Foreground="{Binding $parent[Button].Foreground}"
+                                        Theme="{StaticResource InnerPathIcon}" />
                                 </Button>
                                 <Button
                                     Name="PART_MaximizeButton"
+                                    AutomationProperties.Name="Maximize"
                                     Theme="{StaticResource CaptionButton}"
                                     WindowDecorationProperties.ElementRole="MaximizeButton">
                                     <PathIcon
                                         Name="PART_MaximizeButtonIcon"
-                                        Theme="{StaticResource InnerPathIcon}"
                                         Data="{StaticResource WindowMaximizeGlyph}"
-                                        Foreground="{Binding $parent[Button].Foreground}" />
+                                        Foreground="{Binding $parent[Button].Foreground}"
+                                        Theme="{StaticResource InnerPathIcon}" />
                                 </Button>
                                 <Button
                                     Name="PART_CloseButton"
+                                    AutomationProperties.Name="Close"
                                     Theme="{StaticResource CaptionButton}"
                                     WindowDecorationProperties.ElementRole="CloseButton">
                                     <PathIcon
                                         Name="PART_CloseButtonIcon"
-                                        Theme="{StaticResource InnerPathIcon}"
                                         Data="{StaticResource WindowCloseIconGlyph}"
-                                        Foreground="{Binding $parent[Button].Foreground}" />
+                                        Foreground="{Binding $parent[Button].Foreground}"
+                                        Theme="{StaticResource InnerPathIcon}" />
                                 </Button>
                             </StackPanel>
                         </Panel>
                     </WindowDrawnDecorationsContent.Overlay>
 
                     <WindowDrawnDecorationsContent.FullscreenPopover>
-                        <Panel Height="{TemplateBinding DefaultTitleBarHeight}"
+                        <!--  Shown on hover at top edge in fullscreen  -->
-                               VerticalAlignment="Top"
+                        <DockPanel Height="{TemplateBinding TitleBarHeight}" Background="#E0000000">
-                               Background="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}"
+                            <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
-                               WindowDecorationProperties.ElementRole="TitleBar">
+                                <Button
-                            <TextBlock Text="{TemplateBinding Title}"
+                                    x:Name="PART_PopoverFullScreenButton"
-                                       VerticalAlignment="Center"
+                                    Theme="{StaticResource CaptionButton}"
-                                       Margin="12,0,0,0"
+                                    WindowDecorationProperties.ElementRole="FullScreenButton">
-                                       FontSize="12" />
-                            <StackPanel HorizontalAlignment="Right"
-                                        Orientation="Horizontal"
-                                        Spacing="2"
-                                        TextElement.FontSize="10">
-                                <Button Name="PART_PopoverFullScreenButton"
-                                        Theme="{StaticResource CaptionButton}"
-                                        WindowDecorationProperties.ElementRole="FullScreenButton">
                                     <PathIcon
-                                        Name="PART_PopoverFullScreenButtonIcon"
-                                        Theme="{StaticResource InnerPathIcon}"
                                         Data="{StaticResource WindowCollapseGlyph}"
-                                        Foreground="{Binding $parent[Button].Foreground}" />
+                                        Foreground="{Binding $parent[Button].Foreground}"
-                                </Button>
+                                        Theme="{StaticResource InnerPathIcon}" />
-                                <Button Name="PART_PopoverCloseButton"
-                                        Theme="{StaticResource CaptionButton}"
-                                        WindowDecorationProperties.ElementRole="CloseButton">
-                                    <PathIcon
-                                        Name="PART_PopoverCloseButtonIcon"
-                                        Theme="{StaticResource InnerPathIcon}"
-                                        Data="{StaticResource WindowCloseIconGlyph}"
-                                        Foreground="{Binding $parent[Button].Foreground}" />
                                 </Button>
                             </StackPanel>
-                        </Panel>
+                            <TextBlock
+                                Margin="12,0"
+                                VerticalAlignment="Center"
+                                Foreground="White"
+                                Text="{TemplateBinding Title}" />
+                        </DockPanel>
                     </WindowDrawnDecorationsContent.FullscreenPopover>
-
                 </WindowDrawnDecorationsContent>
             </WindowDrawnDecorationsTemplate>
         </Setter>
-
+        
-        <!-- Shadow: inset border and add drop shadow -->
+        <Style Selector="^ /template/ Button#PART_CloseButton:pointerover">
-        <Style Selector="^:has-shadow">
+            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
-            <Style Selector="^ /template/ Panel#PART_UnderlayWrapper">
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" />
-                <Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" />
-            </Style>
-            <Style Selector="^ /template/ Border#PART_WindowBorder">
-                <Setter Property="BoxShadow" Value="{DynamicResource WindowBorderShadow}" />
-            </Style>
-            <Style Selector="^ /template/ Panel#PART_OverlayWrapper">
-                <Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" />
-            </Style>
         </Style>
-
+        <Style Selector="^ /template/ Button#PART_CloseButton:pressed">
-        <!-- Border: inset titlebar and buttons inside frame -->
+            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
-        <Style Selector="^:has-border">
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" />
-            <Style Selector="^ /template/ Panel#PART_TitleTextPanel">
-                <Setter Property="Margin" Value="1,1,1,0" />
-            </Style>
-            <Style Selector="^ /template/ Panel#PART_TitleBar">
-                <Setter Property="Margin" Value="1,1,1,0" />
-            </Style>
-            <Style Selector="^ /template/ StackPanel#PART_OverlayPanel">
-                <Setter Property="Margin" Value="0,1,1,0" />
-            </Style>
         </Style>
-
+        
-        <!-- Fullscreen: hide overlay and titlebar (popover takes over) -->
+        <!--  Shadow: inset border and add drop shadow  -->
-        <Style Selector="^:fullscreen">
+        <Style Selector="^:has-shadow /template/ Panel#PART_UnderlayWrapper">
-            <Style Selector="^ /template/ Panel#PART_TitleTextPanel">
+            <Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" />
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-            <Style Selector="^ /template/ StackPanel#PART_OverlayPanel">
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-            <Style Selector="^ /template/ Panel#PART_TitleBar">
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-            <Style Selector="^ /template/ PathIcon#PART_FullScreenButtonIcon">
-                <Setter Property="Data" Value="{StaticResource WindowCollapseGlyph}" />
-            </Style>
         </Style>
-
+        <Style Selector="^:has-shadow /template/ Border#PART_WindowBorder">
-        <Style Selector="^:maximized /template/ PathIcon#PART_MaximizeButtonIcon">
+            <Setter Property="BoxShadow" Value="0 2 10 2 #80000000" />
+        </Style>
+        <Style Selector="^:has-shadow /template/ Panel#PART_OverlayWrapper">
+            <Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" />
+        </Style>
+        
+        <!-- Maximized: restore button path changes -->
+        <Style Selector="^:maximized /template/ Path#PART_MaximizeButtonIcon">
             <Setter Property="Data" Value="{StaticResource WindowRestoreGlyph}" />
         </Style>
 
-        <Style Selector="^ /template/ Button:disabled">
+        <!--  Border: inset titlebar and buttons inside frame  -->
-            <Setter Property="Opacity" Value="0.2" />
+        <Style Selector="^:has-border /template/ Panel#PART_TitleTextPanel">
+            <Setter Property="Margin" Value="1,1,1,0" />
+        </Style>
+        <Style Selector="^:has-border /template/ Panel#PART_TitleBar">
+            <Setter Property="Margin" Value="1,1,1,0" />
+        </Style>
+        <Style Selector="^:has-border /template/ StackPanel#PART_OverlayPanel">
+            <Setter Property="Margin" Value="0,1,1,0" />
+        </Style>
+        
+        <!--  Fullscreen: hide overlay and titlebar (popover takes over)  -->
+        <Style Selector="^:fullscreen /template/ Panel#PART_TitleTextPanel">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+        <Style Selector="^:fullscreen /template/ StackPanel#PART_OverlayPanel">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+        <Style Selector="^:fullscreen /template/ Panel#PART_TitleBar">
+            <Setter Property="IsVisible" Value="False" />
         </Style>
-
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/CaptionButtons.axaml

@@ -1,6 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="WindowBorderShadow" ResourceKey="SemiShadowElevated"/>
-
     <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />

src/Semi.Avalonia/Themes/Dark/_index.axaml

@@ -7,6 +7,7 @@
         <ResourceInclude Source="ButtonSpinner.axaml" />
         <ResourceInclude Source="Calendar.axaml" />
         <ResourceInclude Source="CalendarDatePicker.axaml" />
+        <ResourceInclude Source="CaptionButtons.axaml" />
         <ResourceInclude Source="Carousel.axaml" />
         <ResourceInclude Source="CheckBox.axaml" />
         <ResourceInclude Source="ComboBox.axaml" />
@@ -42,6 +43,5 @@
         <ResourceInclude Source="Tooltip.axaml" />
         <ResourceInclude Source="TreeView.axaml" />
         <ResourceInclude Source="Window.axaml" />
-        <ResourceInclude Source="WindowDrawnDecorations.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Semi.Avalonia/Themes/HighContrast/_index.axaml

@@ -7,6 +7,7 @@
         <ResourceInclude Source="ButtonSpinner.axaml" />
         <ResourceInclude Source="Calendar.axaml" />
         <ResourceInclude Source="CalendarDatePicker.axaml" />
+        <ResourceInclude Source="CaptionButtons.axaml" />
         <ResourceInclude Source="Carousel.axaml" />
         <ResourceInclude Source="CheckBox.axaml" />
         <ResourceInclude Source="ComboBox.axaml" />
@@ -42,6 +43,5 @@
         <ResourceInclude Source="Tooltip.axaml" />
         <ResourceInclude Source="TreeView.axaml" />
         <ResourceInclude Source="Window.axaml" />
-        <ResourceInclude Source="WindowDrawnDecorations.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Light/CaptionButtons.axaml

@@ -1,6 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="WindowBorderShadow" ResourceKey="SemiShadowElevated"/>
-
     <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />

src/Semi.Avalonia/Themes/Light/_index.axaml

@@ -7,6 +7,7 @@
         <ResourceInclude Source="ButtonSpinner.axaml" />
         <ResourceInclude Source="Calendar.axaml" />
         <ResourceInclude Source="CalendarDatePicker.axaml" />
+        <ResourceInclude Source="CaptionButtons.axaml" />
         <ResourceInclude Source="Carousel.axaml" />
         <ResourceInclude Source="CheckBox.axaml" />
         <ResourceInclude Source="ComboBox.axaml" />
@@ -42,6 +43,5 @@
         <ResourceInclude Source="Tooltip.axaml" />
         <ResourceInclude Source="TreeView.axaml" />
         <ResourceInclude Source="Window.axaml" />
-        <ResourceInclude Source="WindowDrawnDecorations.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/_index.axaml

@@ -7,6 +7,7 @@
         <ResourceInclude Source="ButtonSpinner.axaml" />
         <ResourceInclude Source="Calendar.axaml" />
         <ResourceInclude Source="CalendarDatePicker.axaml" />
+        <ResourceInclude Source="CaptionButtons.axaml" />
         <ResourceInclude Source="Carousel.axaml" />
         <ResourceInclude Source="CheckBox.axaml" />
         <ResourceInclude Source="ComboBox.axaml" />
@@ -42,6 +43,5 @@
         <ResourceInclude Source="Tooltip.axaml" />
         <ResourceInclude Source="TreeView.axaml" />
         <ResourceInclude Source="Window.axaml" />
-        <ResourceInclude Source="WindowDrawnDecorations.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>