New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI NumericInput Commands

The NumericInput exposes IncreaseCommand and DecreaseCommand which could be used to define custom functionality upon the respective actions. These commands allow you to easily change and extend the control's default behavior.

In the next example, you can see how the NumericInput commands could be utilized in order to implement auto-reverse functionality – start from the Minimum value when the Maximum is reached and vice versa.

  1. First, create the ViewModel with both IncreaseCommand and DecreaseCommand implementations:

    public class CommandsViewModel : NotifyPropertyChangedBase
    private double value;
    public CommandsViewModel()
        this.CustomIncreaseCommand = new Command(this.IncreaseCommandExecute, this.IncreaseCommandCanExecute);
        this.CustomDecreaseCommand = new Command(this.DecreaseCommandExecute, this.DecreaseCommandCanExecute);
        this.Step = 2;
        this.Value = 0;
        this.Minimum = 0;
        this.Maximum = 6;
    public double Maximum { get; set; }
    public double Minimum { get; set; }
    public double Step { get; set; }
    public double Value
            return this.value;
            this.UpdateValue(ref this.value, value);
    public ICommand CustomDecreaseCommand { get; set; }
    public ICommand CustomIncreaseCommand { get; set; }
    private bool DecreaseCommandCanExecute(object arg)
        return true;
    private void DecreaseCommandExecute(object obj)
        double newValue = this.Value - this.Step;
        if (newValue >= this.Minimum)
            this.Value = newValue;
            this.Value = this.Maximum;
    private bool IncreaseCommandCanExecute(object arg)
        return true;
    private void IncreaseCommandExecute(object obj)
        double nextValue = this.Value + this.Step;
        if (nextValue <= this.Maximum)
            this.Value = nextValue;
            this.Value = this.Minimum;
  2. Define the NumericInput with the respective bindings:

    <telerik:RadNumericInput x:Name="input"
                           Minimum="{Binding Minimum}"
                           Maximum="{Binding Maximum}"
                           Step="{Binding Step}"
                           Value="{Binding Value, Mode=TwoWay}"                                    
                           IncreaseCommand="{Binding CustomIncreaseCommand}"
                           DecreaseCommand="{Binding CustomDecreaseCommand}"
          <local:CommandsViewModel />

    For the NumericInput Commands example, go to the SDKBrowser Demo Application and navigate to NumericInput -> Features category.

See Also

In this article
Not finding the help you need?