Skip to main content

ButtonSpinner

The ButtonSpinner presents a control that includes buttons for spin-up and spin-down. The content of this button is flexible, but you will have to code quite a lot of the behavior.

When to use ButtonSpinner

Use ButtonSpinner when you need full control over the spin behavior, such as cycling through a list of non-numeric values or applying custom logic on each increment or decrement. Because the control does not include built-in value handling, you are responsible for updating the displayed content in response to spin events.

For standard numeric input with built-in validation and formatting, consider using NumericUpDown instead.

Useful properties

You will probably use these properties most often:

PropertyDescription
ButtonSpinnerLocationLocation of the spinner buttons: Left or Right (default).
ValidSpinDirectionLimits spin direction: Increase, Decrease, or None.
AllowSpinWhether spinning is enabled. Default is true.

Example

<UserControl xmlns="https://github.com/avaloniaui"
             Padding="20">
  <ButtonSpinner Spin="OnSpin"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center">
    Press the spinner
  </ButtonSpinner>
</UserControl>
Preview
Loading Avalonia Preview...

Using with MVVM

You can bind the Spin event to a command in your view model. Place your display content inside the ButtonSpinner and bind it to a property on the view model.

<ButtonSpinner Spin="{Binding SpinCommand}">
<TextBlock Text="{Binding CurrentValue}" />
</ButtonSpinner>
public partial class MyViewModel : ObservableObject
{
[ObservableProperty]
private string _currentValue = "0";

[RelayCommand]
private void Spin(SpinEventArgs args)
{
var value = int.Parse(CurrentValue);

if (args.Direction == SpinDirection.Increase)
value++;
else
value--;

CurrentValue = value.ToString();
}
}

See also