.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
   {
       get
       {
           return this.value;
       }
       set
       {
           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;
       else
           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;
       else
           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}"
                          AutomationId="numericCommands">
     <telerik:RadNumericInput.BindingContext>
         <local:CommandsViewModel />
     </telerik:RadNumericInput.BindingContext>
   </telerik:RadNumericInput>
   

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

See Also

• Events