Stepper Control

The Stepper control in .NET MAUI is a UI component that allows users to select a numeric value from a defined range by clicking on increment (+) and decrement (-) buttons. It typically displays the current value between the buttons.

Key Features

• Increment/Decrement Buttons: Provides clear buttons for adjusting the value.
• Value Display: Shows the current selected numeric value.
• Configurable Range: Allows setting minimum and maximum values.
• Step Value: Defines the increment/decrement amount.
• Integration: Seamlessly integrates with data binding for MVVM patterns.

Basic Usage

You can define a Stepper in your XAML markup like this:

<Stepper/>

To configure its behavior, you can set properties like Minimum, Maximum, and Increment:

<Stepper Minimum="0" Maximum="100" Increment="10" ValueChanged="OnStepperValueChanged"/>

Properties

Events

• ValueChanged: This event is raised whenever the stepper's value changes. The event arguments provide the old and new values.

Example Implementation

XAML

Here's an example of a Stepper integrated into a simple UI:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppDemo.MainPage"
             Title="Stepper Demo"
             Padding="20">

    <VerticalStackLayout Spacing="20"
                       HorizontalOptions="Center"
                       VerticalOptions="Center">

        <Label Text="Select Quantity:"
               FontSize="Large"/>

        <!-- Stepper Control -->
        <Stepper x:Name="quantityStepper"
                 Minimum="1"
                 Maximum="10"
                 Increment="1"
                 Value="1"
                 ValueChanged="OnQuantityStepperValueChanged"/>

        <Label x:Name="quantityLabel"
               Text="Quantity: 1"
               FontSize="Medium"
               TextColor="{StaticResource Primary}"/>

    </VerticalStackLayout>
</ContentPage>

C# Code-Behind

Handle the ValueChanged event to update the display:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void OnQuantityStepperValueChanged(object sender, ValueChangedEventArgs e)
    {
        // The sender is the Stepper control that raised the event.
        // e.OldValue and e.NewValue contain the old and new values respectively.
        double quantity = e.NewValue;
        quantityLabel.Text = $"Quantity: {quantity}";
    }
}

Rendered Example

This is how the Stepper might look in your application:

In a real application, the Stepper would be interactive. Clicking the buttons would dynamically update the displayed number.

Styling

The appearance of the Stepper can be customized using standard MAUI styling techniques, including implicit and explicit styles, as well as control templates for complete visual overhaul.

Best Practices

• Use Minimum and Maximum to clearly define the acceptable range for user input.
• Set Increment to logical steps relevant to the data (e.g., 1 for quantity, 10 for volume).
• Utilize data binding with the Value property to connect the Stepper to your application's ViewModel.
• Provide clear labels or context for the Stepper to inform the user about what value they are adjusting.