From aaf5282ebd6f06b88678649faf90ce1e616344ca Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Wed, 26 Jan 2022 01:19:57 -0500
Subject: [PATCH] Integrate all button controls within a redesigned ButtonsPage

---
 samples/ControlCatalog/MainView.xaml          |   7 +-
 samples/ControlCatalog/Pages/ButtonPage.xaml  |  45 ----
 samples/ControlCatalog/Pages/ButtonsPage.xaml | 201 ++++++++++++++++++
 ...ButtonPage.xaml.cs => ButtonsPage.xaml.cs} |   4 +-
 .../ControlCatalog/Pages/SplitButtonPage.xaml |  40 ----
 .../Pages/SplitButtonPage.xaml.cs             |  18 --
 .../Pages/ToggleSwitchPage.xaml               |   2 +-
 7 files changed, 206 insertions(+), 111 deletions(-)
 delete mode 100644 samples/ControlCatalog/Pages/ButtonPage.xaml
 create mode 100644 samples/ControlCatalog/Pages/ButtonsPage.xaml
 rename samples/ControlCatalog/Pages/{ButtonPage.xaml.cs => ButtonsPage.xaml.cs} (90%)
 delete mode 100644 samples/ControlCatalog/Pages/SplitButtonPage.xaml
 delete mode 100644 samples/ControlCatalog/Pages/SplitButtonPage.xaml.cs

diff --git a/samples/ControlCatalog/MainView.xaml b/samples/ControlCatalog/MainView.xaml
index a4246e946a..7beb496ab5 100644
--- a/samples/ControlCatalog/MainView.xaml
+++ b/samples/ControlCatalog/MainView.xaml
@@ -22,8 +22,8 @@
       <TabItem Header="Border">
         <pages:BorderPage />
       </TabItem>
-      <TabItem Header="Button">
-        <pages:ButtonPage />
+      <TabItem Header="Buttons">
+        <pages:ButtonsPage />
       </TabItem>
       <TabItem Header="ButtonSpinner">
         <pages:ButtonSpinnerPage />
@@ -121,9 +121,6 @@
       <TabItem Header="Slider">
         <pages:SliderPage />
       </TabItem>
-      <TabItem Header="SplitButton">
-        <pages:SplitButtonPage />
-      </TabItem>
       <TabItem Header="SplitView">
         <pages:SplitViewPage />
       </TabItem>
diff --git a/samples/ControlCatalog/Pages/ButtonPage.xaml b/samples/ControlCatalog/Pages/ButtonPage.xaml
deleted file mode 100644
index 2ce1469118..0000000000
--- a/samples/ControlCatalog/Pages/ButtonPage.xaml
+++ /dev/null
@@ -1,45 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             x:Class="ControlCatalog.Pages.ButtonPage">
-  <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h2">A button control</TextBlock>
-
-    <StackPanel Orientation="Horizontal"
-                Margin="0,16,0,0"
-                HorizontalAlignment="Center"
-                Spacing="16">
-      <StackPanel Orientation="Vertical" Spacing="8" Width="200">
-        <Button>Standard _XAML Button</Button>
-        <Button Foreground="White">Foreground</Button>
-        <Button Background="{DynamicResource SystemAccentColor}">Background</Button>
-        <Button IsEnabled="False">Disabled</Button>
-        <Button Content="Re-themed">
-          <Button.Styles>
-            <Style>
-              <Style.Resources>
-                <SolidColorBrush x:Key="ThemeBorderMidBrush">Red</SolidColorBrush>
-                <SolidColorBrush x:Key="ThemeControlHighBrush">DarkRed</SolidColorBrush>
-                <SolidColorBrush x:Key="ButtonBorderBrush">Red</SolidColorBrush>
-                <SolidColorBrush x:Key="ButtonBackground">DarkRed</SolidColorBrush>
-                <SolidColorBrush x:Key="ButtonBackgroundPointerOver">Red</SolidColorBrush>
-                <SolidColorBrush x:Key="ButtonBackgroundPressed">OrangeRed</SolidColorBrush>
-              </Style.Resources>
-            </Style>
-          </Button.Styles>          
-        </Button>
-        <RepeatButton Name="RepeatButton">
-          <TextBlock Name="RepeatButtonTextBlock" Text="Repeat Button: 0" />
-        </RepeatButton>
-        <ToggleButton Content="Toggle Button"/>
-    </StackPanel>
-
-      <StackPanel Orientation="Vertical" Spacing="8" Width="150">
-        <Button BorderThickness="0">No Border</Button>
-        <Button BorderBrush="{DynamicResource SystemAccentColor}">Border Color</Button>
-        <Button BorderBrush="{DynamicResource SystemAccentColor}" BorderThickness="4">Thick Border</Button>
-        <Button BorderBrush="{DynamicResource SystemAccentColor}" BorderThickness="4" IsEnabled="False">Disabled</Button>
-        <Button BorderBrush="{DynamicResource SystemAccentColor}" KeyboardNavigation.IsTabStop="False">IsTabStop=False</Button>
-      </StackPanel>
-    </StackPanel>    
-  </StackPanel>
-</UserControl>
diff --git a/samples/ControlCatalog/Pages/ButtonsPage.xaml b/samples/ControlCatalog/Pages/ButtonsPage.xaml
new file mode 100644
index 0000000000..e2d1010859
--- /dev/null
+++ b/samples/ControlCatalog/Pages/ButtonsPage.xaml
@@ -0,0 +1,201 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Class="ControlCatalog.Pages.ButtonsPage">
+
+  <UserControl.Resources>
+
+    <MenuFlyout x:Key="SharedMenuFlyout"
+                Placement="Bottom">
+      <MenuItem Header="Item 1">
+        <MenuItem Header="Subitem 1" />
+        <MenuItem Header="Subitem 2" />
+        <MenuItem Header="Subitem 3" />
+      </MenuItem>
+      <MenuItem Header="Item 2"
+                InputGesture="Ctrl+A" />
+      <MenuItem Header="Item 3" />
+    </MenuFlyout>
+
+  </UserControl.Resources>
+      
+  <UserControl.Styles >
+
+    <Style Selector="Border.header-border">
+      <Setter Property="Background">
+        <Setter.Value>
+          <SolidColorBrush Color="Gray" Opacity="0.5" />
+        </Setter.Value>
+      </Setter>
+      <Setter Property="BorderBrush" Value="Gray" />
+      <Setter Property="BorderThickness" Value="0.5" />
+      <Setter Property="CornerRadius" Value="5,5,0,0" />
+      <Setter Property="MaxWidth" Value="450" />
+      <Setter Property="Padding" Value="10" />
+    </Style>
+    
+    <Style Selector="TextBlock.header">
+      <Setter Property="FontSize" Value="18" />
+      <Setter Property="FontWeight" Value="Bold" />
+    </Style>
+
+    <Style Selector="Border.thin">
+      <Setter Property="BorderBrush" Value="Gray" />
+      <Setter Property="BorderThickness" Value="0.5" />
+      <Setter Property="CornerRadius" Value="0,0,5,5" />
+      <Setter Property="Margin" Value="0,0,0,15" />
+    </Style>
+
+  </UserControl.Styles>
+
+  <!-- Styles and overall page design based on AcrylicPage -->
+
+  <StackPanel Orientation="Vertical"
+              Width="450">
+
+    <!-- Button -->
+    <Border Classes="header-border">
+      <StackPanel Orientation="Vertical"
+                  Spacing="4">
+        <TextBlock Text="Button" Classes="header" />
+        <TextBlock TextWrapping="Wrap">A standard button control</TextBlock>
+      </StackPanel>
+    </Border>
+
+    <Border Classes="thin"
+            Padding="15">
+      <StackPanel Orientation="Horizontal"
+                  HorizontalAlignment="Center"
+                  Spacing="10">
+        <StackPanel Orientation="Vertical"
+                    Spacing="8"
+                    Width="200">
+          <Button>Standard _XAML Button</Button>
+          <Button Foreground="White">Foreground</Button>
+          <Button Background="{DynamicResource SystemAccentColor}">Background</Button>
+          <Button IsEnabled="False">Disabled</Button>
+          <Button Content="Re-themed">
+            <Button.Styles>
+              <Style>
+                <Style.Resources>
+                  <SolidColorBrush x:Key="ThemeBorderMidBrush">Red</SolidColorBrush>
+                  <SolidColorBrush x:Key="ThemeControlHighBrush">DarkRed</SolidColorBrush>
+                  <SolidColorBrush x:Key="ButtonBorderBrush">Red</SolidColorBrush>
+                  <SolidColorBrush x:Key="ButtonBackground">DarkRed</SolidColorBrush>
+                  <SolidColorBrush x:Key="ButtonBackgroundPointerOver">Red</SolidColorBrush>
+                  <SolidColorBrush x:Key="ButtonBackgroundPressed">OrangeRed</SolidColorBrush>
+                </Style.Resources>
+              </Style>
+            </Button.Styles>
+          </Button>
+        </StackPanel>
+
+        <StackPanel Orientation="Vertical"
+                    Spacing="8"
+                    Width="200">
+          <Button BorderThickness="0">No Border</Button>
+          <Button BorderBrush="{DynamicResource SystemAccentColor}">Border Color</Button>
+          <Button BorderBrush="{DynamicResource SystemAccentColor}"
+                  BorderThickness="4">Thick Border</Button>
+          <Button BorderBrush="{DynamicResource SystemAccentColor}"
+                  BorderThickness="4"
+                  IsEnabled="False">Disabled</Button>
+          <Button BorderBrush="{DynamicResource SystemAccentColor}"
+                  KeyboardNavigation.IsTabStop="False">IsTabStop=False</Button>
+        </StackPanel>
+      </StackPanel>
+    </Border>
+
+    <!-- ToggleButton -->
+    <Border Classes="header-border">
+      <StackPanel Orientation="Vertical"
+                  Spacing="4">
+        <TextBlock Text="ToggleButton"
+                   Classes="header" />
+        <TextBlock TextWrapping="Wrap">A button control with multiple states: checked, unchecked or indeterminate.</TextBlock>
+      </StackPanel>
+    </Border>
+
+    <Border Classes="thin"
+            Padding="15">
+      <StackPanel Orientation="Vertical"
+                  Spacing="8">
+        <ToggleButton Content="Toggle Button" />
+      </StackPanel>
+    </Border>
+
+    <!-- RepeatButton -->
+    <Border Classes="header-border">
+      <StackPanel Orientation="Vertical"
+                  Spacing="4">
+        <TextBlock Text="RepeatButton"
+                   Classes="header" />
+        <TextBlock TextWrapping="Wrap">A button control that raises its Click event repeatedly when it is pressed and held.</TextBlock>
+      </StackPanel>
+    </Border>
+
+    <Border Classes="thin"
+            Padding="15">
+      <StackPanel Orientation="Vertical"
+                  Spacing="8">
+        <RepeatButton Name="RepeatButton">
+          <TextBlock Name="RepeatButtonTextBlock"
+                     Text="Repeat Button: 0" />
+        </RepeatButton>
+      </StackPanel>
+    </Border>
+
+    <!-- SplitButton -->
+    <Border Classes="header-border">
+      <StackPanel Orientation="Vertical"
+                  Spacing="4">
+        <TextBlock Text="SplitButton"
+                   Classes="header" />
+        <TextBlock TextWrapping="Wrap">A button with primary and secondary parts that can each be pressed separately. The primary part behaves like a Button and the secondary part opens a flyout.</TextBlock>
+      </StackPanel>
+    </Border>
+
+    <Border Classes="thin"
+            Padding="15">
+      <StackPanel Orientation="Vertical"
+                  Spacing="8">
+        <SplitButton Flyout="{StaticResource SharedMenuFlyout}">
+          <TextBlock Text="Content" />
+        </SplitButton>
+        <SplitButton IsEnabled="False"
+                     Flyout="{StaticResource SharedMenuFlyout}">
+          <TextBlock Text="Disabled" />
+        </SplitButton>
+      </StackPanel>
+    </Border>
+
+    <!-- ToggleSplitButton -->
+    <Border Classes="header-border">
+      <StackPanel Orientation="Vertical"
+                  Spacing="4">
+        <TextBlock Text="ToggleSplitButton"
+                   Classes="header" />
+        <TextBlock TextWrapping="Wrap">A button with primary and secondary parts that can each be pressed separately. The primary part behaves like a ToggleButton with two states and the secondary part opens a flyout.</TextBlock>
+      </StackPanel>
+    </Border>
+
+    <Border Classes="thin"
+            Padding="15">
+      <StackPanel Orientation="Vertical"
+                  Spacing="8">
+        <ToggleSplitButton Flyout="{StaticResource SharedMenuFlyout}">
+          <TextBlock Text="Content" />
+        </ToggleSplitButton>
+        <ToggleSplitButton IsChecked="True"
+                           Flyout="{StaticResource SharedMenuFlyout}">
+          <TextBlock Text="Content" />
+        </ToggleSplitButton>
+        <ToggleSplitButton IsChecked="True"
+                           IsEnabled="False"
+                           Flyout="{StaticResource SharedMenuFlyout}">
+          <TextBlock Text="Disabled" />
+        </ToggleSplitButton>
+      </StackPanel>
+    </Border>
+
+  </StackPanel>
+</UserControl>
diff --git a/samples/ControlCatalog/Pages/ButtonPage.xaml.cs b/samples/ControlCatalog/Pages/ButtonsPage.xaml.cs
similarity index 90%
rename from samples/ControlCatalog/Pages/ButtonPage.xaml.cs
rename to samples/ControlCatalog/Pages/ButtonsPage.xaml.cs
index 5e555c8c91..5594bab176 100644
--- a/samples/ControlCatalog/Pages/ButtonPage.xaml.cs
+++ b/samples/ControlCatalog/Pages/ButtonsPage.xaml.cs
@@ -3,11 +3,11 @@ using Avalonia.Markup.Xaml;
 
 namespace ControlCatalog.Pages
 {
-    public class ButtonPage : UserControl
+    public class ButtonsPage : UserControl
     {
         private int repeatButtonClickCount = 0;
 
-        public ButtonPage()
+        public ButtonsPage()
         {
             InitializeComponent();
 
diff --git a/samples/ControlCatalog/Pages/SplitButtonPage.xaml b/samples/ControlCatalog/Pages/SplitButtonPage.xaml
deleted file mode 100644
index e530920dab..0000000000
--- a/samples/ControlCatalog/Pages/SplitButtonPage.xaml
+++ /dev/null
@@ -1,40 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             x:Class="ControlCatalog.Pages.SplitButtonPage">
-
-  <UserControl.Resources>
-    <MenuFlyout x:Key="SharedMenuFlyout"
-                Placement="Bottom">
-      <MenuItem Header="Item 1">
-        <MenuItem Header="Subitem 1" />
-        <MenuItem Header="Subitem 2" />
-        <MenuItem Header="Subitem 3" />
-      </MenuItem>
-      <MenuItem Header="Item 2"
-                InputGesture="Ctrl+A" />
-      <MenuItem Header="Item 3" />
-    </MenuFlyout>
-  </UserControl.Resources>
-
-  <StackPanel Orientation="Vertical" Spacing="4">
-    <SplitButton Flyout="{StaticResource SharedMenuFlyout}">
-      <TextBlock Text="Content" />
-    </SplitButton>
-    <SplitButton IsEnabled="False"
-                 Flyout="{StaticResource SharedMenuFlyout}">
-      <TextBlock Text="Content" />
-    </SplitButton>
-    <ToggleSplitButton Flyout="{StaticResource SharedMenuFlyout}">
-      <TextBlock Text="Content" />
-    </ToggleSplitButton>
-    <ToggleSplitButton IsChecked="True"
-                       Flyout="{StaticResource SharedMenuFlyout}">
-      <TextBlock Text="Content" />
-    </ToggleSplitButton>
-    <ToggleSplitButton IsChecked="True"
-                       IsEnabled="False"
-                       Flyout="{StaticResource SharedMenuFlyout}">
-      <TextBlock Text="Content" />
-    </ToggleSplitButton>
-  </StackPanel>
-</UserControl>
diff --git a/samples/ControlCatalog/Pages/SplitButtonPage.xaml.cs b/samples/ControlCatalog/Pages/SplitButtonPage.xaml.cs
deleted file mode 100644
index 64b686008f..0000000000
--- a/samples/ControlCatalog/Pages/SplitButtonPage.xaml.cs
+++ /dev/null
@@ -1,18 +0,0 @@
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-
-namespace ControlCatalog.Pages
-{
-    public class SplitButtonPage : UserControl
-    {
-        public SplitButtonPage()
-        {
-            InitializeComponent();
-        }
-
-        private void InitializeComponent()
-        {
-            AvaloniaXamlLoader.Load(this);
-        }
-    }
-}
diff --git a/samples/ControlCatalog/Pages/ToggleSwitchPage.xaml b/samples/ControlCatalog/Pages/ToggleSwitchPage.xaml
index 4db755b6fc..6afe6dd135 100644
--- a/samples/ControlCatalog/Pages/ToggleSwitchPage.xaml
+++ b/samples/ControlCatalog/Pages/ToggleSwitchPage.xaml
@@ -11,7 +11,7 @@
       </StackPanel>
     </Border>
 
-    <TextBlock Text="headered ToggleSwitch" Classes="header"/>
+    <TextBlock Text="Headered ToggleSwitch" Classes="header"/>
 
     <Border Classes="Thin">
       <StackPanel>