From d6d03133b492d4f593b80cfc77d8320c2aca8296 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sun, 15 Mar 2026 03:39:24 +0800
Subject: [PATCH] feat: refactor WindowDrawnDecorations with new styling and
 structure. (#768)

---
 .../Controls/WindowDrawnDecorations.axaml     | 171 +++++++++---------
 ...ons.axaml => WindowDrawnDecorations.axaml} |   3 +
 src/Semi.Avalonia/Themes/Dark/_index.axaml    |   2 +-
 ...ons.axaml => WindowDrawnDecorations.axaml} |   2 +
 .../Themes/HighContrast/_index.axaml          |   2 +-
 ...ons.axaml => WindowDrawnDecorations.axaml} |   3 +
 src/Semi.Avalonia/Themes/Light/_index.axaml   |   2 +-
 ...ons.axaml => WindowDrawnDecorations.axaml} |   0
 src/Semi.Avalonia/Themes/Shared/_index.axaml  |   2 +-
 9 files changed, 96 insertions(+), 91 deletions(-)
 rename src/Semi.Avalonia/Themes/Dark/{CaptionButtons.axaml => WindowDrawnDecorations.axaml} (80%)
 rename src/Semi.Avalonia/Themes/HighContrast/{CaptionButtons.axaml => WindowDrawnDecorations.axaml} (89%)
 rename src/Semi.Avalonia/Themes/Light/{CaptionButtons.axaml => WindowDrawnDecorations.axaml} (80%)
 rename src/Semi.Avalonia/Themes/Shared/{CaptionButtons.axaml => WindowDrawnDecorations.axaml} (100%)

diff --git a/src/Semi.Avalonia/Controls/WindowDrawnDecorations.axaml b/src/Semi.Avalonia/Controls/WindowDrawnDecorations.axaml
index 8b0ed6f..820fec8 100644
--- a/src/Semi.Avalonia/Controls/WindowDrawnDecorations.axaml
+++ b/src/Semi.Avalonia/Controls/WindowDrawnDecorations.axaml
@@ -8,7 +8,7 @@
         <Setter Property="Width" Value="{StaticResource CaptionButtonWidth}" />
         <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
@@ -20,7 +20,15 @@
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
-                    Foreground="{TemplateBinding Foreground}" />
+                    Foreground="{TemplateBinding Foreground}">
+                    <ContentPresenter.DataTemplates>
+                        <DataTemplate DataType="Geometry">
+                            <PathIcon
+                                Theme="{StaticResource InnerPathIcon}"
+                                Data="{Binding}" />
+                        </DataTemplate>
+                    </ContentPresenter.DataTemplates>
+                </ContentPresenter>
             </ControlTemplate>
         </Setter>
 
@@ -36,7 +44,7 @@
     <ControlTheme x:Key="{x:Type WindowDrawnDecorations}" TargetType="WindowDrawnDecorations">
         <Setter Property="DefaultTitleBarHeight" Value="32" />
         <Setter Property="DefaultFrameThickness" Value="1" />
-        <Setter Property="DefaultShadowThickness" Value="16" />
+        <Setter Property="DefaultShadowThickness" Value="8" />
         <Setter Property="Template">
             <WindowDrawnDecorationsTemplate>
                 <WindowDrawnDecorationsContent>
@@ -44,16 +52,17 @@
                         <!--  Full-size: covers shadow area + frame + behind client area  -->
                         <Panel>
                             <Border
-                                x:Name="PART_WindowBorder"
+                                Name="PART_WindowBorder"
                                 Margin="{TemplateBinding ShadowThickness}"
                                 Background="{DynamicResource WindowBackground}"
                                 BorderBrush="{DynamicResource WindowBorderBrush}"
                                 BorderThickness="1"
-                                BoxShadow="0 8 32 0 #40000000" />
+                                BoxShadow="{DynamicResource WindowBorderShadow}" />
                             <!-- Titlebar: background, title text, and drag area live in underlay -->
-                            <Panel x:Name="PART_TitleBar" VerticalAlignment="Top"
+                            <Panel Name="PART_TitleBar"
+                                   VerticalAlignment="Top"
                                    Height="{TemplateBinding TitleBarHeight}"
-                                   Background="{DynamicResource SystemControlBackgroundAltHighBrush}"
+                                   Background="{DynamicResource TitleBarBackground}"
                                    IsVisible="{TemplateBinding HasTitleBar}"
                                    WindowDecorationProperties.ElementRole="TitleBar" />
                         </Panel>
@@ -61,10 +70,10 @@
 
                     <WindowDrawnDecorationsContent.Overlay>
                         <!--  Positioned over the titlebar area  -->
-                        <Panel x:Name="PART_OverlayWrapper">
+                        <Panel Name="PART_OverlayWrapper">
                             <!--  Title text lives in overlay so it renders above client content  -->
                             <Panel
-                                x:Name="PART_TitleTextPanel"
+                                Name="PART_TitleTextPanel"
                                 Height="{TemplateBinding TitleBarHeight}"
                                 VerticalAlignment="Top"
                                 IsHitTestVisible="False"
@@ -76,7 +85,7 @@
                                     Text="{TemplateBinding Title}" />
                             </Panel>
                             <StackPanel
-                                x:Name="PART_OverlayPanel"
+                                Name="PART_OverlayPanel"
                                 Height="{TemplateBinding TitleBarHeight}"
                                 HorizontalAlignment="Right"
                                 VerticalAlignment="Top"
@@ -87,120 +96,108 @@
                                 <Button
                                     Name="PART_FullScreenButton"
                                     Theme="{StaticResource CaptionButton}"
-                                    WindowDecorationProperties.ElementRole="FullScreenButton">
-                                    <PathIcon
-                                        Name="PART_FullScreenButtonIcon"
-                                        Data="{StaticResource WindowExpandGlyph}"
-                                        Foreground="{Binding $parent[Button].Foreground}"
-                                        Theme="{StaticResource InnerPathIcon}" />
-                                </Button>
+                                    Content="{StaticResource WindowExpandGlyph}"
+                                    WindowDecorationProperties.ElementRole="FullScreenButton" />
                                 <Button
                                     Name="PART_MinimizeButton"
-                                    AutomationProperties.Name="Minimize"
                                     Theme="{StaticResource CaptionButton}"
-                                    WindowDecorationProperties.ElementRole="MinimizeButton">
-                                    <PathIcon
-                                        Name="PART_MinimizeButtonIcon"
-                                        Data="{StaticResource WindowMinimizeGlyph}"
-                                        Foreground="{Binding $parent[Button].Foreground}"
-                                        Theme="{StaticResource InnerPathIcon}" />
-                                </Button>
+                                    Content="{StaticResource WindowMinimizeGlyph}"
+                                    WindowDecorationProperties.ElementRole="MinimizeButton" />
                                 <Button
                                     Name="PART_MaximizeButton"
-                                    AutomationProperties.Name="Maximize"
                                     Theme="{StaticResource CaptionButton}"
-                                    WindowDecorationProperties.ElementRole="MaximizeButton">
-                                    <PathIcon
-                                        Name="PART_MaximizeButtonIcon"
-                                        Data="{StaticResource WindowMaximizeGlyph}"
-                                        Foreground="{Binding $parent[Button].Foreground}"
-                                        Theme="{StaticResource InnerPathIcon}" />
-                                </Button>
+                                    Content="{StaticResource WindowMaximizeGlyph}"
+                                    WindowDecorationProperties.ElementRole="MaximizeButton" />
                                 <Button
                                     Name="PART_CloseButton"
-                                    AutomationProperties.Name="Close"
                                     Theme="{StaticResource CaptionButton}"
-                                    WindowDecorationProperties.ElementRole="CloseButton">
-                                    <PathIcon
-                                        Name="PART_CloseButtonIcon"
-                                        Data="{StaticResource WindowCloseIconGlyph}"
-                                        Foreground="{Binding $parent[Button].Foreground}"
-                                        Theme="{StaticResource InnerPathIcon}" />
-                                </Button>
+                                    Content="{StaticResource WindowCloseIconGlyph}"
+                                    WindowDecorationProperties.ElementRole="CloseButton" />
                             </StackPanel>
                         </Panel>
                     </WindowDrawnDecorationsContent.Overlay>
 
                     <WindowDrawnDecorationsContent.FullscreenPopover>
                         <!--  Shown on hover at top edge in fullscreen  -->
-                        <DockPanel Height="{TemplateBinding TitleBarHeight}" Background="#E0000000">
+                        <DockPanel
+                            Height="{TemplateBinding TitleBarHeight}"
+                            Background="{DynamicResource TitleBarBackground}"
+                            WindowDecorationProperties.ElementRole="TitleBar">
                             <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
                                 <Button
-                                    x:Name="PART_PopoverFullScreenButton"
+                                    Name="PART_PopoverFullScreenButton"
                                     Theme="{StaticResource CaptionButton}"
-                                    WindowDecorationProperties.ElementRole="FullScreenButton">
-                                    <PathIcon
-                                        Data="{StaticResource WindowCollapseGlyph}"
-                                        Foreground="{Binding $parent[Button].Foreground}"
-                                        Theme="{StaticResource InnerPathIcon}" />
-                                </Button>
+                                    Content="{StaticResource WindowCollapseGlyph}"
+                                    WindowDecorationProperties.ElementRole="FullScreenButton" />
+                                <Button
+                                    Name="PART_PopoverCloseButton"
+                                    Theme="{StaticResource CaptionButton}"
+                                    Content="{StaticResource WindowCloseIconGlyph}"
+                                    WindowDecorationProperties.ElementRole="CloseButton" />
                             </StackPanel>
                             <TextBlock
                                 Margin="12,0"
                                 VerticalAlignment="Center"
-                                Foreground="White"
                                 Text="{TemplateBinding Title}" />
                         </DockPanel>
                     </WindowDrawnDecorationsContent.FullscreenPopover>
                 </WindowDrawnDecorationsContent>
             </WindowDrawnDecorationsTemplate>
         </Setter>
-        
-        <Style Selector="^ /template/ Button#PART_CloseButton:pointerover">
-            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" />
+
+        <Style Selector="^ /template/ Button#PART_CloseButton,^ /template/ Button#PART_PopoverCloseButton">
+            <Style Selector="^:pointerover">
+                <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
+                <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
+                <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" />
+            </Style>
         </Style>
-        <Style Selector="^ /template/ Button#PART_CloseButton:pressed">
-            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" />
-        </Style>
-        
+
         <!--  Shadow: inset border and add drop shadow  -->
-        <Style Selector="^:has-shadow /template/ Panel#PART_UnderlayWrapper">
-            <Setter Property="Margin" Value="{TemplateBinding ShadowThickness}" />
+        <Style Selector="^:has-shadow">
+            <Style Selector="^ /template/ Panel#PART_UnderlayWrapper">
+                <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="^:has-shadow /template/ Border#PART_WindowBorder">
-            <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 Selector="^:maximized /template/ Button#PART_MaximizeButton">
+            <Setter Property="Content" Value="{StaticResource WindowRestoreGlyph}" />
         </Style>
 
         <!--  Border: inset titlebar and buttons inside frame  -->
-        <Style Selector="^:has-border /template/ Panel#PART_TitleTextPanel">
-            <Setter Property="Margin" Value="1,1,1,0" />
+        <Style Selector="^:has-border">
+            <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>
-        <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 Selector="^:fullscreen">
+            <Style Selector="^ /template/ Panel#PART_TitleTextPanel">
+                <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>
     </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Dark/CaptionButtons.axaml b/src/Semi.Avalonia/Themes/Dark/WindowDrawnDecorations.axaml
similarity index 80%
rename from src/Semi.Avalonia/Themes/Dark/CaptionButtons.axaml
rename to src/Semi.Avalonia/Themes/Dark/WindowDrawnDecorations.axaml
index 766d849..2173028 100644
--- a/src/Semi.Avalonia/Themes/Dark/CaptionButtons.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/WindowDrawnDecorations.axaml
@@ -1,4 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="WindowBorderShadow" ResourceKey="SemiShadowElevated" />
+    <StaticResource x:Key="TitleBarBackground" ResourceKey="SemiColorBackground0" />
+
     <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />
diff --git a/src/Semi.Avalonia/Themes/Dark/_index.axaml b/src/Semi.Avalonia/Themes/Dark/_index.axaml
index 46fdce6..c74719b 100644
--- a/src/Semi.Avalonia/Themes/Dark/_index.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/_index.axaml
@@ -8,7 +8,6 @@
         <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" />
@@ -48,5 +47,6 @@
         <ResourceInclude Source="Tooltip.axaml" />
         <ResourceInclude Source="TreeView.axaml" />
         <ResourceInclude Source="Window.axaml" />
+        <ResourceInclude Source="WindowDrawnDecorations.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/HighContrast/CaptionButtons.axaml b/src/Semi.Avalonia/Themes/HighContrast/WindowDrawnDecorations.axaml
similarity index 89%
rename from src/Semi.Avalonia/Themes/HighContrast/CaptionButtons.axaml
rename to src/Semi.Avalonia/Themes/HighContrast/WindowDrawnDecorations.axaml
index f99e0df..2dcce3e 100644
--- a/src/Semi.Avalonia/Themes/HighContrast/CaptionButtons.axaml
+++ b/src/Semi.Avalonia/Themes/HighContrast/WindowDrawnDecorations.axaml
@@ -1,4 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="TitleBarBackground" ResourceKey="SemiColorWindow" />
+
     <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorHotlight" />
     <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorHotlight" />
     <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />
diff --git a/src/Semi.Avalonia/Themes/HighContrast/_index.axaml b/src/Semi.Avalonia/Themes/HighContrast/_index.axaml
index ea9e375..04ed1ec 100644
--- a/src/Semi.Avalonia/Themes/HighContrast/_index.axaml
+++ b/src/Semi.Avalonia/Themes/HighContrast/_index.axaml
@@ -7,7 +7,6 @@
         <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" />
@@ -48,5 +47,6 @@
         <ResourceInclude Source="Tooltip.axaml" />
         <ResourceInclude Source="TreeView.axaml" />
         <ResourceInclude Source="Window.axaml" />
+        <ResourceInclude Source="WindowDrawnDecorations.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/CaptionButtons.axaml b/src/Semi.Avalonia/Themes/Light/WindowDrawnDecorations.axaml
similarity index 80%
rename from src/Semi.Avalonia/Themes/Light/CaptionButtons.axaml
rename to src/Semi.Avalonia/Themes/Light/WindowDrawnDecorations.axaml
index 766d849..2173028 100644
--- a/src/Semi.Avalonia/Themes/Light/CaptionButtons.axaml
+++ b/src/Semi.Avalonia/Themes/Light/WindowDrawnDecorations.axaml
@@ -1,4 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <StaticResource x:Key="WindowBorderShadow" ResourceKey="SemiShadowElevated" />
+    <StaticResource x:Key="TitleBarBackground" ResourceKey="SemiColorBackground0" />
+
     <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" />
     <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />
diff --git a/src/Semi.Avalonia/Themes/Light/_index.axaml b/src/Semi.Avalonia/Themes/Light/_index.axaml
index 46fdce6..c74719b 100644
--- a/src/Semi.Avalonia/Themes/Light/_index.axaml
+++ b/src/Semi.Avalonia/Themes/Light/_index.axaml
@@ -8,7 +8,6 @@
         <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" />
@@ -48,5 +47,6 @@
         <ResourceInclude Source="Tooltip.axaml" />
         <ResourceInclude Source="TreeView.axaml" />
         <ResourceInclude Source="Window.axaml" />
+        <ResourceInclude Source="WindowDrawnDecorations.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Shared/CaptionButtons.axaml b/src/Semi.Avalonia/Themes/Shared/WindowDrawnDecorations.axaml
similarity index 100%
rename from src/Semi.Avalonia/Themes/Shared/CaptionButtons.axaml
rename to src/Semi.Avalonia/Themes/Shared/WindowDrawnDecorations.axaml
diff --git a/src/Semi.Avalonia/Themes/Shared/_index.axaml b/src/Semi.Avalonia/Themes/Shared/_index.axaml
index 46fdce6..c74719b 100644
--- a/src/Semi.Avalonia/Themes/Shared/_index.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/_index.axaml
@@ -8,7 +8,6 @@
         <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" />
@@ -48,5 +47,6 @@
         <ResourceInclude Source="Tooltip.axaml" />
         <ResourceInclude Source="TreeView.axaml" />
         <ResourceInclude Source="Window.axaml" />
+        <ResourceInclude Source="WindowDrawnDecorations.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
\ No newline at end of file