Adding NumericStepper Control to View
Same with the native approach, you can define NumericStepper easily through the layout resource file.
Alternatively, if you prefer to add the numeric stepper control at runtime, you can instantiate NumericStepper programmatically then add it to the view's hierarchy. Here's the code example.
Binding to NumericStepper Control
Binding a value to the numeric stepper is simple and straightforward. Consider that you have a simple view model with the following definition:
The above example shows how to define a simple reservation view model which contains an integer property which will be bound to NumericStepper.
Once you have the ViewModel ready, all you need to do is creating a binding provider that contains the binding information between the ViewModel and the View. See the example below.
The above code is pretty self explanatory. It binds the Quantity property of the ViewModel to a view named Stepper. With such minimal definition, you will now see the numeric stepper completely bound to the ViewModel.
For more information about data binding in Crosslight, see Understanding Binding Providers.
Customizing NumericStepper Control
Most of the NumericStepper's behaviour are customizable. You can easily customize it via layout resource or programmatically at runtime. The following table lists the supported XML attributes.
|android:value||integer||Sets the initial value.|
|crosslight:minValue||integer||Sets the minimum value of stepper control.|
|crosslight:maxValue||integer||Sets the maximum value of stepper control.|
|crosslight:step||integer||Sets the increment or decrement interval.|
To find out the complete properties and methods of the control, see NumericStepper class.
Check out the comprehensive control samples here: Dialog Presenter Samples. Pay attention to the Add to Cart menu in the sample. Prior to running the samples, make sure to set the Android project as the startup project.