Merge pull request #32 from irihitech/spinner

feat: Add ButtonSpinner

demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml

@@ -0,0 +1,40 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ButtonSpinnerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel
+        Margin="20"
+        HorizontalAlignment="Left"
+        Spacing="20">
+        <ButtonSpinner
+            Height="30"
+            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
+            BorderThickness="1"
+            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
+            Spin="OnSpin">
+            <TextBlock
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Background="Gray"
+                Text="Everest" />
+        </ButtonSpinner>
+        <ButtonSpinner
+            Height="30"
+            AllowSpin="{Binding #allowSpinCheck.IsChecked}"
+            BorderThickness="1"
+            ButtonSpinnerLocation="Left"
+            ShowButtonSpinner="{Binding #showSpinCheck.IsChecked}"
+            Spin="OnSpin">
+            <TextBlock
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Background="Gray"
+                Text="Everest" />
+        </ButtonSpinner>
+    </StackPanel>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml.cs

@@ -0,0 +1,50 @@
+using System;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ButtonSpinnerDemo : UserControl
+{
+    public ButtonSpinnerDemo()
+    {
+        InitializeComponent();
+    }
+
+    public void OnSpin(object sender, SpinEventArgs e)
+    {
+        var spinner = (ButtonSpinner)sender;
+
+        if (spinner.Content is TextBlock txtBox)
+        {
+            int value = Array.IndexOf(_mountains, txtBox.Text);
+            if (e.Direction == SpinDirection.Increase)
+                value++;
+            else
+                value--;
+
+            if (value < 0)
+                value = _mountains.Length - 1;
+            else if (value >= _mountains.Length)
+                value = 0;
+
+            txtBox.Text = _mountains[value];
+        }
+
+    }
+
+    private readonly string[] _mountains = new[]
+    {
+        "Everest",
+        "K2 (Mount Godwin Austen)",
+        "Kangchenjunga",
+        "Lhotse",
+        "Makalu",
+        "Cho Oyu",
+        "Dhaulagiri",
+        "Manaslu",
+        "Nanga Parbat",
+        "Annapurna"
+    };
+}

demo/Semi.Avalonia.Demo/Views/MainView.axaml

@@ -24,6 +24,9 @@
         <TabItem Header="Button">
             <pages:ButtonDemo />
         </TabItem>
+        <TabItem Header="ButtonSpinner">
+            <pages:ButtonSpinnerDemo />
+        </TabItem>
         <TabItem Header="CheckBox">
             <pages:CheckBoxDemo />
         </TabItem>

src/Semi.Avalonia/Controls/ButtonSpinner.axaml

@@ -0,0 +1,102 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <StackPanel Margin="20" Spacing="20">
+            <ButtonSpinner Content="Hello World" />
+        </StackPanel>
+    </Design.PreviewWith>
+    <ControlTheme x:Key="ButtonSpinnerRepeatButton" TargetType="RepeatButton">
+        <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSpinnerRepeatButtonBackground}" />
+        <Setter Property="RepeatButton.Cursor" Value="Hand" />
+        <Setter Property="RepeatButton.Template">
+            <ControlTemplate>
+                <ContentPresenter
+                    x:Name="PART_ContentPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonSpinnerRepeatButtonPressedBackground}" />
+        </Style>
+
+        <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Background" Value="{DynamicResource ButtonSpinnerRepeatButtonDisabledBackground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSpinnerRepeatButtonDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type ButtonSpinner}" TargetType="ButtonSpinner">
+        <Setter Property="ButtonSpinner.BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}" />
+        <Setter Property="ButtonSpinner.BorderThickness" Value="0" />
+        <Setter Property="ButtonSpinner.MinWidth" Value="300" />
+        <!--  Add Resource  -->
+        <Setter Property="ButtonSpinner.Template">
+            <ControlTemplate TargetType="ButtonSpinner">
+                <Grid ColumnDefinitions="Auto, *, Auto">
+                    <Border
+                        Grid.Column="1"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        UseLayoutRounding="False">
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            Padding="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </Border>
+                    <Border
+                        Name="ButtonGroup"
+                        Grid.Column="2"
+                        MinWidth="16"
+                        Margin="4,0,0,0"
+                        BorderBrush="{DynamicResource ButtonSpinnerRepeatButtonBorderBrush}"
+                        BorderThickness="{DynamicResource ButtonSpinnerButtonGroupBorderThickness}"
+                        CornerRadius="{DynamicResource ButtonSpinnerButtonGroupCornerRadius}"
+                        IsVisible="{TemplateBinding ShowButtonSpinner}"
+                        UseLayoutRounding="False">
+                        <Grid RowDefinitions="*, *">
+                            <RepeatButton
+                                Name="PART_IncreaseButton"
+                                Grid.Row="0"
+                                Theme="{StaticResource ButtonSpinnerRepeatButton}">
+                                <PathIcon
+                                    Width="8"
+                                    Height="8"
+                                    Data="{DynamicResource ButtonSpinnerIncreaseButtonGlyph}"
+                                    Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
+                            </RepeatButton>
+                            <RepeatButton
+                                Name="PART_DecreaseButton"
+                                Grid.Row="1"
+                                Foreground="Black"
+                                Theme="{StaticResource ButtonSpinnerRepeatButton}">
+                                <PathIcon
+                                    Width="8"
+                                    Height="8"
+                                    Data="{DynamicResource ButtonSpinnerDecreaseButtonGlyph}"
+                                    Foreground="{DynamicResource ButtonSpinnerRepeatButtonForeground}" />
+                            </RepeatButton>
+                        </Grid>
+                    </Border>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^[ButtonSpinnerLocation=Left] /template/ Border#ButtonGroup">
+            <Setter Property="Grid.Column" Value="0" />
+            <Setter Property="Border.Margin" Value="0 0 4 0" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Controls.axaml

@@ -4,6 +4,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/AutoCompleteBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Border.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/ButtonSpinner.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContentControl.axaml" />

src/Semi.Avalonia/Themes/Light/ButtonSpinner.axaml

@@ -0,0 +1,15 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <PathGeometry x:Key="ButtonSpinnerIncreaseButtonGlyph">M19.637 16.4369C19.0513 17.0227 18.1015 17.0227 17.5157 16.4369L11.8589 10.7801L6.20202 16.4369C5.61623 17.0227 4.66648 17.0227 4.0807 16.4369C3.49491 15.8511 3.49491 14.9014 4.0807 14.3156L10.7982 7.59809C11.384 7.01231 12.3337 7.01231 12.9195 7.59809L19.637 14.3156C20.2228 14.9014 20.2228 15.8511 19.637 16.4369Z</PathGeometry>
+    <PathGeometry x:Key="ButtonSpinnerDecreaseButtonGlyph">M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z</PathGeometry>
+    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonBackground" Color="White" />
+    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
+    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonDisabledBackground" Opacity="0.05" Color="#2E3238" />
+    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ButtonSpinnerRepeatButtonBorderBrush" Opacity="0.08" Color="#1C1F23" />
+
+    <CornerRadius x:Key="ButtonSpinnerButtonGroupCornerRadius">3</CornerRadius>
+    <Thickness x:Key="ButtonSpinnerButtonGroupBorderThickness">1</Thickness>
+
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Light/Light.axaml

@@ -5,6 +5,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/AutoCompleteBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Border.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Button.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ButtonSpinner.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Expander.axaml" />