Ability to place spinner buttons on the left side

samples/ControlCatalog/Pages/ButtonSpinnerPage.xaml

@@ -8,7 +8,12 @@
     <StackPanel Orientation="Vertical" Gap="8" Width="200" Margin="0,20,0,0">
       <CheckBox Name="allowSpinCheck" IsChecked="True">AllowSpin</CheckBox>
       <CheckBox Name="showSpinCheck" IsChecked="True">ShowButtonSpinner</CheckBox>
-      <ButtonSpinner Name="spinner" Spin="OnSpin" Height="30"
+      <ButtonSpinner Spin="OnSpin" Height="30"
+                     AllowSpin="{Binding #allowSpinCheck.IsChecked}"
+                     ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}">
+        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Everest"/>
+      </ButtonSpinner>
+      <ButtonSpinner Spin="OnSpin" Height="30" ButtonSpinnerLocation="Left"
                      AllowSpin="{Binding #allowSpinCheck.IsChecked}"
                      ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}">
         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Everest"/>

src/Avalonia.Controls/ButtonSpinner.cs

@@ -5,6 +5,12 @@ using Avalonia.Interactivity;
 
 namespace Avalonia.Controls
 {
+    public enum Location
+    {
+        Left,
+        Right
+    }
+
     /// <summary>
     /// Represents a spinner control that includes two Buttons.
     /// </summary>
@@ -22,6 +28,12 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<bool> ShowButtonSpinnerProperty =
             AvaloniaProperty.Register<ButtonSpinner, bool>(nameof(ShowButtonSpinner), true);
 
+        /// <summary>
+        /// Defines the <see cref="ButtonSpinnerLocation"/> property.
+        /// </summary>
+        public static readonly StyledProperty<Location> ButtonSpinnerLocationProperty =
+            AvaloniaProperty.Register<ButtonSpinner, Location>(nameof(ButtonSpinnerLocation), Location.Right);
+
         private Button _decreaseButton;
         /// <summary>
         /// Gets or sets the DecreaseButton template part.
@@ -73,6 +85,8 @@ namespace Avalonia.Controls
         static ButtonSpinner()
         {
             AllowSpinProperty.Changed.Subscribe(AllowSpinChanged);
+            PseudoClass(ButtonSpinnerLocationProperty, location => location == Location.Left, ":left");
+            PseudoClass(ButtonSpinnerLocationProperty, location => location == Location.Right, ":right");
         }
 
         /// <summary>
@@ -93,6 +107,15 @@ namespace Avalonia.Controls
             set { SetValue(ShowButtonSpinnerProperty, value); }
         }
 
+        /// <summary>
+        /// Gets or sets current location of the <see cref="ButtonSpinner"/>.
+        /// </summary>
+        public Location ButtonSpinnerLocation
+        {
+            get { return GetValue(ButtonSpinnerLocationProperty); }
+            set { SetValue(ButtonSpinnerLocationProperty, value); }
+        }
+
         /// <inheritdoc />
         protected override void OnTemplateApplied(TemplateAppliedEventArgs e)
         {

src/Avalonia.Themes.Default/ButtonSpinner.xaml

@@ -4,6 +4,42 @@
     <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}"/>
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
     <Setter Property="VerticalContentAlignment" Value="Center"/>
+  </Style>
+  <Style Selector="ButtonSpinner /template/ RepeatButton">
+    <Setter Property="RepeatButton.Background" Value="Transparent"/>
+    <Setter Property="RepeatButton.BorderBrush" Value="Transparent"/>
+  </Style>
+  <Style Selector="ButtonSpinner /template/ RepeatButton:pointerover">
+    <Setter Property="RepeatButton.Background" Value="{DynamicResource ThemeControlMidBrush}"/>
+    <Setter Property="RepeatButton.BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
+  </Style>
+  <Style Selector="ButtonSpinner /template/ RepeatButton#PART_IncreaseButton">
+    <Setter Property="Content">
+      <Template>
+        <Path Fill="{DynamicResource ThemeForegroundBrush}"
+              Width="8"
+              Height="4"
+              Stretch="Uniform"
+              HorizontalAlignment="Center"
+              VerticalAlignment="Center"
+              Data="M0,5 L4.5,.5 9,5 6,5 4.5,3.5 3,5 z"/>
+      </Template>
+    </Setter>
+  </Style>
+  <Style Selector="ButtonSpinner /template/ RepeatButton#PART_DecreaseButton">
+    <Setter Property="Content">
+      <Template>
+        <Path Fill="{DynamicResource ThemeForegroundBrush}"
+              Width="8"
+              Height="4"
+              Stretch="Uniform"
+              HorizontalAlignment="Center"
+              VerticalAlignment="Center"
+              Data="M0,0 L3,0 4.5,1.5 6,0 9,0 4.5,4.5 z"/>
+      </Template>
+    </Setter>
+  </Style>
+  <Style Selector="ButtonSpinner:right">
     <Setter Property="Template">
       <ControlTemplate>
         <Border Background="{TemplateBinding Background}"
@@ -17,38 +53,34 @@
                               ContentTemplate="{TemplateBinding ContentTemplate}"
                               Content="{TemplateBinding Content}"/>
             <Grid Grid.Column="1" RowDefinitions="*,*" IsVisible="{TemplateBinding ShowButtonSpinner}">
-              <Grid.Styles>
-                <Style Selector="RepeatButton">
-                  <Setter Property="RepeatButton.Background" Value="Transparent"/>
-                  <Setter Property="RepeatButton.BorderBrush" Value="Transparent"/>
-                </Style>
-                <Style Selector="RepeatButton:pointerover">
-                  <Setter Property="RepeatButton.Background" Value="{DynamicResource ThemeControlMidBrush}"/>
-                  <Setter Property="RepeatButton.BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
-                </Style>
-              </Grid.Styles>
-              <RepeatButton Grid.Row="0" Name="PART_IncreaseButton">
-                <Path Fill="{DynamicResource ThemeForegroundBrush}"
-                      Width="8"
-                      Height="4"
-                      Stretch="Uniform"
-                      HorizontalAlignment="Center"
-                      VerticalAlignment="Center"
-                      Data="M0,5 L4.5,.5 9,5 6,5 4.5,3.5 3,5 z"/>
-              </RepeatButton>
-              <RepeatButton Grid.Row="1" Name="PART_DecreaseButton">
-                <Path Fill="{DynamicResource ThemeForegroundBrush}"
-                      Width="8"
-                      Height="4"
-                      Stretch="Uniform"
-                      HorizontalAlignment="Center"
-                      VerticalAlignment="Center"
-                      Data="M0,0 L3,0 4.5,1.5 6,0 9,0 4.5,4.5 z"/>
-              </RepeatButton>
+              <RepeatButton Grid.Row="0" Name="PART_IncreaseButton"/>
+              <RepeatButton Grid.Row="1" Name="PART_DecreaseButton"/>
             </Grid>
           </Grid>
         </Border>
       </ControlTemplate>
     </Setter>
   </Style>
+  <Style Selector="ButtonSpinner:left">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                Margin="{TemplateBinding Padding}"
+                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+          <Grid ColumnDefinitions="Auto,*">
+            <Grid Grid.Column="0" RowDefinitions="*,*" IsVisible="{TemplateBinding ShowButtonSpinner}">
+              <RepeatButton Grid.Row="0" Name="PART_IncreaseButton"/>
+              <RepeatButton Grid.Row="1" Name="PART_DecreaseButton"/>
+            </Grid>
+            <ContentPresenter Name="PART_ContentPresenter" Grid.Column="1"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Content="{TemplateBinding Content}"/>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
 </Styles>