Работа с числовыми значениями: Stepper и Slider в .NET MAUI

Элементы Stepper и Slider  в .NET MAUI предназначены для работы с числовыми значениями. Оба этих элемента практически идентичны по своим свойствам, поэтому рассмотрим их совместно.

Stepper

Визуально, Stepper представляет из себя пару кнопок, помеченных знаками «+» и «-«. Сам компонент оперирует числовыми значениями в заданном диапазоне и предоставляет нам следующие свойства:

При изменении значения счётчика срабатывает событие ValueChanged

public event ValueChangedEventArgs> ValueChanged;

Чтобы продемонстрировать работу Stepper, создадим новое приложение .NET MAUI и изменим код страницы MainPage.xaml следующим образом:

<?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="MauiApp7.MainPage">

    <VerticalStackLayout>
        <Stepper Minimum="-10" 
                 Maximum="10" 
                 Value="0" 
                 ValueChanged="OnValueChanged" />
        <Label x:Name="MyLabel"/>
    </VerticalStackLayout>
</ContentPage>

Так как у Stepper нет никакого свойства для отображения значения счётчика, то мы добавили на страницу метку (Label), а также определили у Stepper обработчик события ValueChanged. Теперь откроем файл отдельного кода MainPage.xaml.cs и изменим его следующим образом:

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

        public void OnValueChanged(object sender, ValueChangedEventArgs args)
        {
            MyLabel.Text = $"Текущее значение {args.NewValue}";
        }
    }
}

Теперь можно запустить приложение и проверить его работу. Как только вы нажмете на любую кнопку Stepper, то увидите текущее значение счётчика:

Используя событие ValueChanged, можно также получать и предыдущее значение счётчика. Изменим обработчик события следующим образом:

public void OnValueChanged(object sender, ValueChangedEventArgs args)
{
    MyLabel.Text = $"Предыдущее значение {args.OldValue}\r\nТекущее значение {args.NewValue}";
}

Запустим приложение и проверим результат:

Slider

Элемент Slider представляет собой «ползунок» которым мы привыкли пользоваться, например, при регулировке громкости. Этот элемент предоставляет нам следующие свойства для работы:

Также у Slider имеется ещё несколько полезных для нас свойств, но мы их рассмотрим позднее, когда изучим механизмы привязки и использования команда в .NET MAUI.

При изменении значения счётчика срабатывает событие ValueChanged

public event ValueChangedEventArgs> ValueChanged;

Дополнительно Slider предоставляет нам два новых события:

public event EventHandler DragStarted;
public event EventHandler DragCompleted;

Событие DragStarted генерируется, когда пользователь начинает перетаскивать ползунок, а DragCompleted — когда отпускает кнопку мыши. Чтобы продемонстрировать работу Slider, изменим код страницы MainPage.xaml нашего приложения следующим образом:

<?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="MauiApp7.MainPage">

    <VerticalStackLayout>
        <Slider Maximum="10"
                Minimum="-10"
                Value="0" 
                ValueChanged="OnValueChanged"
                DragStarted="Slider_DragStarted"
                DragCompleted="Slider_DragCompleted"
                ThumbColor="Blue"
                MinimumTrackColor="Red" 
                MaximumTrackColor="Green"/>
        <Label x:Name="MyLabel"/>
        <Label x:Name="DsLabel"/>
        <Label x:Name="DeLabel"/>
    </VerticalStackLayout>
</ContentPage>

а также добавим в файл отдельного кода новые обработчики событий:

private void Slider_DragStarted(object sender, EventArgs e)
{
    DeLabel.Text = string.Empty;
    DsLabel.Text = "Начали изменять положение ползунка"; 
}

private void Slider_DragCompleted(object sender, EventArgs e)
{
    DeLabel.Text = "Закончили изменять положение ползунка";
    DsLabel.Text = string.Empty; ;
}

Теперь запустим приложение и посмотрим на результат. Начало перетаскивания ползунка:

После окончания перетаскивания ползунка

Итого

Элементы Stepper и Slider схожи по своему действию и позволяют манипулировать числовыми значениями в заданном диапазоне. При этом, Stepper представляет из себя пару кнопок, а Slider — ползунок с помощью которых определяются новые значения счётчика.