From 2514d919f101a44bcad6df3d6aa522dd811e5506 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:44:33 +0800
Subject: [PATCH] feat: redesign CaptionButtons.

---
 .../Controls/CaptionButtons.axaml             | 82 +++++++++----------
 .../Themes/Dark/CaptionButtons.axaml          |  1 +
 .../Themes/HighContrast/CaptionButtons.axaml  |  3 +-
 .../Themes/Light/CaptionButtons.axaml         |  1 +
 .../Themes/Shared/CaptionButtons.axaml        |  5 ++
 5 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/CaptionButtons.axaml b/src/Semi.Avalonia/Controls/CaptionButtons.axaml
index 3389656..d39d855 100644
--- a/src/Semi.Avalonia/Controls/CaptionButtons.axaml
+++ b/src/Semi.Avalonia/Controls/CaptionButtons.axaml
@@ -5,15 +5,14 @@
     <Design.PreviewWith>
         <CaptionButtons />
     </Design.PreviewWith>
+
     <ControlTheme x:Key="CaptionButton" TargetType="Button">
-        <Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource CaptionButtonPressedBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
-        <Setter Property="CornerRadius" Value="6" />
-        <Setter Property="Margin" Value="0, 4" />
-        <Setter Property="Padding" Value="4" />
-        <Setter Property="Height" Value="28" />
-        <Setter Property="Width" Value="28" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="CornerRadius" Value="{StaticResource CaptionButtonCornerRadius}" />
+        <Setter Property="Padding" Value="{StaticResource CaptionButtonPadding}" />
+        <Setter Property="Width" Value="{StaticResource CaptionButtonWidth}" />
+        <Setter Property="Height" Value="{StaticResource CaptionButtonHeight}" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="Template">
@@ -21,77 +20,76 @@
                 <ContentPresenter
                     Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
-                    Background="Transparent"
+                    Foreground="{TemplateBinding Foreground}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
                     Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}" />
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^:pointerover /template/ ContentPresenter">
-            <Setter Property="Background" Value="{TemplateBinding Background}" />
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
         </Style>
 
-        <Style Selector="^:pressed /template/ ContentPresenter">
-            <Setter Property="Background" Value="{TemplateBinding BorderBrush}" />
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonPressedBackground}" />
         </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type CaptionButtons}" TargetType="CaptionButtons">
         <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
-        <Setter Property="Margin" Value="0 0 4 0" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CaptionButtons">
-                <StackPanel
-                    VerticalAlignment="Stretch"
-                    Orientation="Horizontal"
-                    Spacing="2"
-                    TextElement.FontSize="10">
+                <StackPanel Orientation="Horizontal">
                     <Button Name="PART_FullScreenButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Name="PART_FullScreenButtonIcon"
-                            Theme="{DynamicResource InnerPathIcon}"
-                            Data="{DynamicResource WindowExpandGlyph}"
+                            Theme="{StaticResource InnerPathIcon}"
+                            Data="{StaticResource WindowExpandGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
                     <Button Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
-                            Theme="{DynamicResource InnerPathIcon}"
-                            Data="{DynamicResource WindowMinimizeGlyph}"
+                            Name="PART_MinimizeButtonIcon"
+                            Theme="{StaticResource InnerPathIcon}"
+                            Data="{StaticResource WindowMinimizeGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
                     <Button Name="PART_RestoreButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Name="PART_RestoreButtonIcon"
-                            Theme="{DynamicResource InnerPathIcon}"
-                            Data="{DynamicResource WindowMaximizeGlyph}"
+                            Theme="{StaticResource InnerPathIcon}"
+                            Data="{StaticResource WindowMaximizeGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
-                    <Button
-                        Name="PART_CloseButton"
-                        Background="{DynamicResource CaptionButtonClosePointeroverBackground}"
-                        BorderBrush="{DynamicResource CaptionButtonClosePressedBackground}"
-                        Theme="{StaticResource CaptionButton}">
-                        <Button.Styles>
-                            <Style Selector="Button:pointerover">
-                                <Setter Property="Foreground" Value="White" />
-                            </Style>
-                            <Style Selector="Button:pressed">
-                                <Setter Property="Foreground" Value="White" />
-                            </Style>
-                        </Button.Styles>
+                    <Button Name="PART_CloseButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
-                            Theme="{DynamicResource InnerPathIcon}"
-                            Data="{DynamicResource WindowCloseIconGlyph}"
+                            Name="PART_CloseButtonIcon"
+                            Theme="{StaticResource InnerPathIcon}"
+                            Data="{StaticResource WindowCloseIconGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
                 </StackPanel>
             </ControlTemplate>
         </Setter>
+
+        <Style Selector="^ /template/ Button#PART_CloseButton:pointerover">
+            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" />
+        </Style>
+        <Style Selector="^ /template/ Button#PART_CloseButton:pressed">
+            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
+            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" />
+        </Style>
+
         <Style Selector="^:maximized /template/ PathIcon#PART_RestoreButtonIcon">
-            <Setter Property="Data" Value="{DynamicResource WindowRestoreGlyph}" />
+            <Setter Property="Data" Value="{StaticResource WindowRestoreGlyph}" />
         </Style>
         <Style Selector="^:fullscreen /template/ PathIcon#PART_FullScreenButtonIcon">
-            <Setter Property="Data" Value="{DynamicResource WindowCollapseGlyph}" />
+            <Setter Property="Data" Value="{StaticResource WindowCollapseGlyph}" />
         </Style>
         <Style Selector="^:fullscreen /template/ Button#PART_RestoreButton">
             <Setter Property="IsVisible" Value="False" />
@@ -100,4 +98,4 @@
             <Setter Property="IsVisible" Value="False" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Dark/CaptionButtons.axaml b/src/Semi.Avalonia/Themes/Dark/CaptionButtons.axaml
index 77f474d..766d849 100644
--- a/src/Semi.Avalonia/Themes/Dark/CaptionButtons.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/CaptionButtons.axaml
@@ -1,6 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" />
+    <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />
     <StaticResource x:Key="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorDangerPointerover" />
     <StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorDangerActive" />
     <StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorText2" />
diff --git a/src/Semi.Avalonia/Themes/HighContrast/CaptionButtons.axaml b/src/Semi.Avalonia/Themes/HighContrast/CaptionButtons.axaml
index cc1f77a..f99e0df 100644
--- a/src/Semi.Avalonia/Themes/HighContrast/CaptionButtons.axaml
+++ b/src/Semi.Avalonia/Themes/HighContrast/CaptionButtons.axaml
@@ -1,7 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorHotlight" />
     <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorHotlight" />
+    <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />
     <StaticResource x:Key="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorHotlight" />
     <StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorHotlight" />
-    <StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorButtonText" />
+    <StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorWindowText" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/CaptionButtons.axaml b/src/Semi.Avalonia/Themes/Light/CaptionButtons.axaml
index 77f474d..766d849 100644
--- a/src/Semi.Avalonia/Themes/Light/CaptionButtons.axaml
+++ b/src/Semi.Avalonia/Themes/Light/CaptionButtons.axaml
@@ -1,6 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StaticResource x:Key="CaptionButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
     <StaticResource x:Key="CaptionButtonPressedBackground" ResourceKey="SemiColorFill2" />
+    <StaticResource x:Key="CaptionButtonCloseForeground" ResourceKey="SemiColorWhite" />
     <StaticResource x:Key="CaptionButtonClosePointeroverBackground" ResourceKey="SemiColorDangerPointerover" />
     <StaticResource x:Key="CaptionButtonClosePressedBackground" ResourceKey="SemiColorDangerActive" />
     <StaticResource x:Key="CaptionButtonForeground" ResourceKey="SemiColorText2" />
diff --git a/src/Semi.Avalonia/Themes/Shared/CaptionButtons.axaml b/src/Semi.Avalonia/Themes/Shared/CaptionButtons.axaml
index 728fcdc..af0364d 100644
--- a/src/Semi.Avalonia/Themes/Shared/CaptionButtons.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/CaptionButtons.axaml
@@ -5,4 +5,9 @@
     <StreamGeometry x:Key="WindowRestoreGlyph">M4,8H8V4H20V16H16V20H4V8M16,8V14H18V6H10V8H16M6,12V18H14V12H6Z</StreamGeometry>
     <StreamGeometry x:Key="WindowExpandGlyph">M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z</StreamGeometry>
     <StreamGeometry x:Key="WindowCollapseGlyph">M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z</StreamGeometry>
+
+    <StaticResource x:Key="CaptionButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="CaptionButtonWidth" ResourceKey="SemiSpacingExtraLoose" />
+    <StaticResource x:Key="CaptionButtonHeight" ResourceKey="SemiSpacingExtraLoose" />
+    <StaticResource x:Key="CaptionButtonPadding" ResourceKey="SemiThicknessTight" />
 </ResourceDictionary>
\ No newline at end of file