From 23a6517a6b064cecda957be0eeb768074bf76823 Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Fri, 8 Jul 2022 22:36:40 +0200
Subject: [PATCH] Refactored CaptionButtons.

Converted buttons to be actual buttons instead of `Panel`s so that we get correct button behavior, i.e. the possibility to cancel by releasing the mouse outside the button.
---
 .../Chrome/CaptionButtons.cs                  |  27 ++--
 .../Controls/CaptionButtons.xaml              | 152 +++++++++++-------
 2 files changed, 108 insertions(+), 71 deletions(-)

diff --git a/src/Avalonia.Controls/Chrome/CaptionButtons.cs b/src/Avalonia.Controls/Chrome/CaptionButtons.cs
index d5923a8b37..6d7e542bb2 100644
--- a/src/Avalonia.Controls/Chrome/CaptionButtons.cs
+++ b/src/Avalonia.Controls/Chrome/CaptionButtons.cs
@@ -8,10 +8,10 @@ namespace Avalonia.Controls.Chrome
     /// <summary>
     /// Draws window minimize / maximize / close buttons in a <see cref="TitleBar"/> when managed client decorations are enabled.
     /// </summary>
-    [TemplatePart("PART_CloseButton",      typeof(Panel))]
-    [TemplatePart("PART_RestoreButton",    typeof(Panel))]
-    [TemplatePart("PART_MinimiseButton",   typeof(Panel))]
-    [TemplatePart("PART_FullScreenButton", typeof(Panel))]
+    [TemplatePart("PART_CloseButton",      typeof(Button))]
+    [TemplatePart("PART_RestoreButton",    typeof(Button))]
+    [TemplatePart("PART_MinimiseButton",   typeof(Button))]
+    [TemplatePart("PART_FullScreenButton", typeof(Button))]
     [PseudoClasses(":minimized", ":normal", ":maximized", ":fullscreen")]
     public class CaptionButtons : TemplatedControl
     {
@@ -88,18 +88,15 @@ namespace Avalonia.Controls.Chrome
         {
             base.OnApplyTemplate(e);
 
-            var closeButton = e.NameScope.Get<Panel>("PART_CloseButton");
-            var restoreButton = e.NameScope.Get<Panel>("PART_RestoreButton");
-            var minimiseButton = e.NameScope.Get<Panel>("PART_MinimiseButton");
-            var fullScreenButton = e.NameScope.Get<Panel>("PART_FullScreenButton");
+            var closeButton = e.NameScope.Get<Button>("PART_CloseButton");
+            var restoreButton = e.NameScope.Get<Button>("PART_RestoreButton");
+            var minimiseButton = e.NameScope.Get<Button>("PART_MinimiseButton");
+            var fullScreenButton = e.NameScope.Get<Button>("PART_FullScreenButton");
 
-            closeButton.PointerReleased += (sender, e) => OnClose();
-
-            restoreButton.PointerReleased += (sender, e) => OnRestore();
-
-            minimiseButton.PointerReleased += (sender, e) => OnMinimize();
-
-            fullScreenButton.PointerReleased += (sender, e) => OnToggleFullScreen();
+            closeButton.Click += (sender, e) => OnClose();
+            restoreButton.Click += (sender, e) => OnRestore();
+            minimiseButton.Click += (sender, e) => OnMinimize();
+            fullScreenButton.Click += (sender, e) => OnToggleFullScreen();
         }
     }
 }
diff --git a/src/Avalonia.Themes.Fluent/Controls/CaptionButtons.xaml b/src/Avalonia.Themes.Fluent/Controls/CaptionButtons.xaml
index 3c45de18c6..c91e008e02 100644
--- a/src/Avalonia.Themes.Fluent/Controls/CaptionButtons.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/CaptionButtons.xaml
@@ -1,57 +1,97 @@
-<ResourceDictionary 
-  xmlns="https://github.com/avaloniaui" 
-  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ControlTheme x:Key="{x:Type CaptionButtons}" TargetType="CaptionButtons">
-      <Setter Property="MaxHeight" Value="30" />
-      <Setter Property="Template">
-        <ControlTemplate>
-          <StackPanel Spacing="2" VerticalAlignment="Stretch" TextElement.FontSize="10" Orientation="Horizontal">
-            <StackPanel.Styles>
-              <Style Selector="Panel:pointerover">
-                <Setter Property="Background" Value="#7F7f7f7f" />
-              </Style>
-              <Style Selector="Panel#PART_CloseButton:pointerover">
-                <Setter Property="Background" Value="#7FFF0000" />
-              </Style>
-            </StackPanel.Styles>
-            <Panel x:Name="PART_FullScreenButton" IsVisible="False" Width="45" Background="Transparent">
-              <Viewbox Width="11" Margin="2">
-                <Path Stretch="UniformToFill" Fill="{TemplateBinding Foreground}" Data="M2048 2048v-819h-205v469l-1493 -1493h469v-205h-819v819h205v-469l1493 1493h-469v205h819z" />
-              </Viewbox>
-            </Panel>
-            <Panel x:Name="PART_MinimiseButton" Width="45" Background="Transparent">
-              <Viewbox Width="11" Margin="2">
-                <Path Stretch="UniformToFill" Fill="{TemplateBinding Foreground}" Data="M2048 1229v-205h-2048v205h2048z" />
-              </Viewbox>
-            </Panel>
-            <Panel x:Name="PART_RestoreButton" Width="45" Background="Transparent">
-              <Viewbox Width="11" Margin="2">
-                <Viewbox.RenderTransform>
-                  <RotateTransform Angle="-90" />
-                </Viewbox.RenderTransform>
-                <Path Stretch="UniformToFill" Fill="{TemplateBinding Foreground}" Data="M2048 2048v-2048h-2048v2048h2048zM1843 1843h-1638v-1638h1638v1638z"/>
-              </Viewbox>
-            </Panel>
-            <Panel x:Name="PART_CloseButton" Width="45" Background="Transparent">
-              <Viewbox Width="11" Margin="2">
-                <Path Stretch="UniformToFill" Fill="{TemplateBinding Foreground}" Data="M1169 1024l879 -879l-145 -145l-879 879l-879 -879l-145 145l879 879l-879 879l145 145l879 -879l879 879l145 -145z" />
-              </Viewbox>
-            </Panel>
-          </StackPanel>
-        </ControlTemplate>
-      </Setter>
-      <Style Selector="^:maximized /template/ Panel#PART_RestoreButton Path">
-        <Setter Property="Data" Value="M2048 410h-410v-410h-1638v1638h410v410h1638v-1638zM1434 1434h-1229v-1229h1229v1229zM1843 1843h-1229v-205h1024v-1024h205v1229z" />
-      </Style>
-      <Style Selector="^:fullscreen /template/ Panel#PART_FullScreenButton Path">
-        <Setter Property="IsVisible" Value="True" />
-        <Setter Property="Data" Value="M205 1024h819v-819h-205v469l-674 -674l-145 145l674 674h-469v205zM1374 1229h469v-205h-819v819h205v-469l674 674l145 -145z" />
-      </Style>
-      <Style Selector="^:fullscreen /template/ Panel#PART_RestoreButton">
-        <Setter Property="IsVisible" Value="False" />
-      </Style>
-      <Style Selector="^:fullscreen /template/ Panel#PART_MinimiseButton">
-        <Setter Property="IsVisible" Value="False" />
-      </Style>
-    </ControlTheme>
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="20">
+        <CaptionButtons Height="30"/>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <ControlTheme x:Key="FluentCaptionButton" TargetType="Button">
+    <Setter Property="Background" Value="#ffe5e5e5" />
+    <!-- Reusing BorderBrush to define pressed background color, as it's not used otherwise -->
+    <Setter Property="BorderBrush" Value="#ffcacaca" />
+    <Setter Property="Foreground" Value="Black"/>
+    <Setter Property="Width" Value="45"/>
+    <Setter Property="VerticalAlignment" Value="Stretch"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Background="Transparent"
+                          Content="{TemplateBinding Content}"/>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ ContentPresenter">
+      <Setter Property="Background" Value="{TemplateBinding Background}" />
+    </Style>
+
+    <Style Selector="^:pressed /template/ ContentPresenter">
+      <Setter Property="Background" Value="{TemplateBinding BorderBrush}" />
+    </Style>
+  </ControlTheme>
+  
+  <ControlTheme x:Key="{x:Type CaptionButtons}" TargetType="CaptionButtons">
+    <Setter Property="MaxHeight" Value="30" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <StackPanel Spacing="2" VerticalAlignment="Stretch" TextElement.FontSize="10" Orientation="Horizontal">
+          <Button x:Name="PART_FullScreenButton"
+                  Theme="{StaticResource FluentCaptionButton}"
+                  IsVisible="False">
+            <Viewbox Width="11" Margin="2">
+              <Path Name="FullScreenButtonPath"
+                    Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M2048 2048v-819h-205v469l-1493 -1493h469v-205h-819v819h205v-469l1493 1493h-469v205h819z" />
+            </Viewbox>
+          </Button>
+          <Button x:Name="PART_MinimiseButton"
+                  Theme="{StaticResource FluentCaptionButton}">
+            <Viewbox Width="11" Margin="2">
+              <Path Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M2048 1229v-205h-2048v205h2048z" />
+            </Viewbox>
+          </Button>
+          <Button x:Name="PART_RestoreButton"
+                  Theme="{StaticResource FluentCaptionButton}">
+            <Viewbox Width="11" Margin="2">
+              <Viewbox.RenderTransform>
+                <RotateTransform Angle="-90" />
+              </Viewbox.RenderTransform>
+              <Path Name="RestoreButtonPath"
+                    Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M2048 2048v-2048h-2048v2048h2048zM1843 1843h-1638v-1638h1638v1638z"/>
+            </Viewbox>
+          </Button>
+          <Button x:Name="PART_CloseButton"
+                  Background="#ffe81123"
+                  BorderBrush="#fff1707a"
+                  Theme="{StaticResource FluentCaptionButton}">
+            <Viewbox Width="11" Margin="2">
+              <Path Stretch="UniformToFill"
+                    Fill="{TemplateBinding Foreground}"
+                    Data="M1169 1024l879 -879l-145 -145l-879 879l-879 -879l-145 145l879 879l-879 879l145 145l879 -879l879 879l145 -145z" />
+            </Viewbox>
+          </Button>
+        </StackPanel>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^:maximized /template/ Path#RestoreButtonPath">
+      <Setter Property="Data" Value="M2048 410h-410v-410h-1638v1638h410v410h1638v-1638zM1434 1434h-1229v-1229h1229v1229zM1843 1843h-1229v-205h1024v-1024h205v1229z" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Path#PART_FullScreenButtonPath">
+      <Setter Property="IsVisible" Value="True" />
+      <Setter Property="Data" Value="M205 1024h819v-819h-205v469l-674 -674l-145 145l674 674h-469v205zM1374 1229h469v-205h-819v819h205v-469l674 674l145 -145z" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Panel#PART_RestoreButton">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^:fullscreen /template/ Panel#PART_MinimiseButton">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+  </ControlTheme>
 </ResourceDictionary>