From 9cf27b3906dc8337a6340f12a0498eae2ddc62c7 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Mon, 23 Mar 2026 17:20:41 +0800
Subject: [PATCH] Add SplitButtonSpinner theme for ButtonSpinner and
 NumericUpDown (#776)

* Initial plan

* Add SplitButtonSpinner theme for ButtonSpinner

Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>
Agent-Logs-Url: https://github.com/irihitech/Semi.Avalonia/sessions/7095fb6c-cdd9-48c0-9076-85a35fa93453

* feat: enhance ButtonSpinner and NumericUpDown with new styles and properties.

* fix: fix Glyph and enlarge icons.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>
Co-authored-by: Dong Bin <popmessiah@hotmail.com>
Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
---
 .../Pages/ButtonSpinnerDemo.axaml             | 25 +++++++
 .../Pages/NumericUpDownDemo.axaml             |  5 ++
 .../Controls/ButtonSpinner.axaml              | 69 ++++++++++++++++++-
 .../Controls/NumericUpDown.axaml              |  9 +++
 .../Themes/Shared/ButtonSpinner.axaml         |  6 ++
 5 files changed, 113 insertions(+), 1 deletion(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
index 032b157..8bc27ff 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
@@ -35,5 +35,30 @@
                 VerticalAlignment="Center"
                 Text="A.S.I.A" />
         </ButtonSpinner>
+        <ButtonSpinner
+            Height="30"
+            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
+            BorderThickness="1"
+            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
+            Spin="OnSpin"
+            Theme="{StaticResource SplitButtonSpinner}">
+            <TextBlock
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Text="A.S.I.A" />
+        </ButtonSpinner>
+        <ButtonSpinner
+            Height="30"
+            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
+            ButtonSpinnerLocation="Left"
+            BorderThickness="1"
+            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
+            Spin="OnSpin"
+            Theme="{StaticResource SplitButtonSpinner}">
+            <TextBlock
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Text="A.S.I.A" />
+        </ButtonSpinner>
     </StackPanel>
 </UserControl>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml
index 8c4060b..8fdd184 100644
--- a/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/NumericUpDownDemo.axaml
@@ -51,6 +51,11 @@
             <NumericUpDown Width="100" IsEnabled="False" />
             <NumericUpDown Width="100" ButtonSpinnerLocation="Left" />
         </StackPanel>
+        
+        <StackPanel>
+            <TextBlock Text="Split" />
+            <NumericUpDown Classes="Split" Width="300" />
+        </StackPanel>
 
     </StackPanel>
 </UserControl>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/ButtonSpinner.axaml b/src/Semi.Avalonia/Controls/ButtonSpinner.axaml
index 3aead82..2a0178d 100644
--- a/src/Semi.Avalonia/Controls/ButtonSpinner.axaml
+++ b/src/Semi.Avalonia/Controls/ButtonSpinner.axaml
@@ -20,6 +20,7 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     Content="{TemplateBinding Content}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
                     ContentTemplate="{TemplateBinding ContentTemplate}" />
             </ControlTemplate>
         </Setter>
@@ -92,7 +93,7 @@
                 </Grid>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^[ButtonSpinnerLocation=Left] /template/ Border#ButtonGroup">
+        <Style Selector="^:left /template/ Border#ButtonGroup">
             <Setter Property="Grid.Column" Value="0" />
             <Setter Property="Margin" Value="0 0 4 0" />
         </Style>
@@ -100,4 +101,70 @@
             <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}" />
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="SplitButtonSpinner" TargetType="ButtonSpinner">
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="MinWidth" Value="200" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ButtonSpinner">
+                <Grid ColumnDefinitions="Auto, *, Auto">
+                    <RepeatButton
+                        Name="PART_DecreaseButton"
+                        Grid.Column="0"
+                        VerticalAlignment="Stretch"
+                        Padding="{DynamicResource SplitButtonSpinnerButtonPadding}"
+                        BorderBrush="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}"
+                        BorderThickness="{DynamicResource ButtonSpinnerButtonGroupBorderThickness}"
+                        CornerRadius="{DynamicResource SplitButtonSpinnerLeftButtonCornerRadius}"
+                        IsVisible="{TemplateBinding ShowButtonSpinner}"
+                        Theme="{StaticResource ButtonSpinnerRepeatButton}">
+                        <PathIcon
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Classes="Small"
+                            Data="{DynamicResource SplitButtonSpinnerDecreaseButtonGlyph}"
+                            Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
+                    </RepeatButton>
+                    <Border
+                        Grid.Column="1"
+                        Margin="2 0"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            Padding="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </Border>
+                    <RepeatButton
+                        Name="PART_IncreaseButton"
+                        Grid.Column="2"
+                        VerticalAlignment="Stretch"
+                        Padding="{DynamicResource SplitButtonSpinnerButtonPadding}"
+                        BorderBrush="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}"
+                        BorderThickness="{DynamicResource ButtonSpinnerButtonGroupBorderThickness}"
+                        CornerRadius="{DynamicResource SplitButtonSpinnerRightButtonCornerRadius}"
+                        IsVisible="{TemplateBinding ShowButtonSpinner}"
+                        Theme="{StaticResource ButtonSpinnerRepeatButton}">
+                        <PathIcon
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Classes="Small"
+                            Data="{DynamicResource SplitButtonSpinnerIncreaseButtonGlyph}"
+                            Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
+                    </RepeatButton>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:left /template/ RepeatButton#PART_DecreaseButton">
+            <Setter Property="Grid.Column" Value="2" />
+            <Setter Property="CornerRadius" Value="{DynamicResource SplitButtonSpinnerRightButtonCornerRadius}" />
+        </Style>
+        <Style Selector="^:left /template/ RepeatButton#PART_IncreaseButton">
+            <Setter Property="Grid.Column" Value="0" />
+            <Setter Property="CornerRadius" Value="{DynamicResource SplitButtonSpinnerLeftButtonCornerRadius}" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/NumericUpDown.axaml b/src/Semi.Avalonia/Controls/NumericUpDown.axaml
index 1908601..26743bf 100644
--- a/src/Semi.Avalonia/Controls/NumericUpDown.axaml
+++ b/src/Semi.Avalonia/Controls/NumericUpDown.axaml
@@ -52,6 +52,15 @@
         <Style Selector="^.Small">
             <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownSmallHeight}" />
         </Style>
+        
+        <Style Selector="^.Split">
+            <Style Selector="^ /template/ ButtonSpinner#PART_Spinner">
+                <Setter Property="Theme" Value="{DynamicResource SplitButtonSpinner}" />
+            </Style>
+            <Style Selector="^ /template/ TextBox#PART_TextBox">
+                <Setter Property="CornerRadius" Value="0" />
+            </Style>
+        </Style>
 
         <Style Selector="^:error">
             <Style Selector="^ /template/ TextBox#PART_TextBox">
diff --git a/src/Semi.Avalonia/Themes/Shared/ButtonSpinner.axaml b/src/Semi.Avalonia/Themes/Shared/ButtonSpinner.axaml
index 2be0bc3..59171bc 100644
--- a/src/Semi.Avalonia/Themes/Shared/ButtonSpinner.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ButtonSpinner.axaml
@@ -3,4 +3,10 @@
     <StaticResource x:Key="ButtonSpinnerDecreaseButtonGlyph" ResourceKey="SemiIconChevronDown" />
     <StaticResource x:Key="ButtonSpinnerButtonGroupCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
     <StaticResource x:Key="ButtonSpinnerButtonGroupBorderThickness" ResourceKey="SemiBorderThicknessControl" />
+
+    <StaticResource x:Key="SplitButtonSpinnerIncreaseButtonGlyph" ResourceKey="SemiIconPlus" />
+    <StaticResource x:Key="SplitButtonSpinnerDecreaseButtonGlyph" ResourceKey="SemiIconMinus" />
+    <CornerRadius x:Key="SplitButtonSpinnerLeftButtonCornerRadius">3 0 0 3</CornerRadius>
+    <CornerRadius x:Key="SplitButtonSpinnerRightButtonCornerRadius">0 3 3 0</CornerRadius>
+    <Thickness x:Key="SplitButtonSpinnerButtonPadding">8 0</Thickness>
 </ResourceDictionary>
\ No newline at end of file