Stepper и Slider

Stepper

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

• Increment: шаг увеличения от одного значения к другому, по умолчанию равно 1.

• Minimum: минимальное значение диапазона, по умолчанию равно 0.

• Maximum: максимальное значение диапазона, по умолчанию равно 100.

• Value: текущее значение элемента, может находиться в диапазоне от Minimum до Maximum, по умолчанию равно 0.

Все эти свойства представляют тип double.

Для отслеживания измененя значения класс Stepper определяет событие ValueChanged - оно генерируется каждый раз при изменении значения свойства Value. В качестве параметра оно принимает объект ValueChangedEventArgs, который имеет два свойства: OldValue (старое значение) и NewValue (новое значение). При этом значение свойства NewValue эквивалентно значению свойства Value объекта Stepper.

Определим простейший объект Stepper:

namespace HelloApp;

class StartPage : ContentPage
{
    Label header;
    public StartPage()
    {
        header = new Label { FontSize = 18, Margin = 5 };

        Stepper stepper = new Stepper
        {
            Minimum = 0,
            Maximum = 10,
            Increment = 0.1,
            VerticalOptions = LayoutOptions.Start
        };
        stepper.ValueChanged += OnStepperValueChanged;
        Content = new StackLayout { Children = { stepper, header }, Orientation = StackOrientation.Horizontal };
    }
    void OnStepperValueChanged(object sender, ValueChangedEventArgs e)
    {
        header.Text = $"Выбрано: {e.NewValue:F1}";
    }
}

Stepper в 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="HelloApp.MainPage">
    <StackLayout Orientation="Horizontal">
        <Stepper Minimum ="0" Maximum="10" Increment ="0.1" VerticalOptions = "Start" 
                 ValueChanged="OnStepperValueChanged" />
        <Label x:Name="header"  FontSize="18" Margin="5" />
    </StackLayout>
</ContentPage>

А в файле связанного кода прописать обработчик OnStepperValueChanged:

namespace HelloApp;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
        InitializeComponent();
    }
    void OnStepperValueChanged(object sender, ValueChangedEventArgs e)
    {
        header.Text = $"Выбрано: {e.NewValue:F1}";
    }
}

Slider

Slider представляет собой горизонтальный ползунок и во многих аспектах он похож на Stepper. Среди его свойств можно выделить следующие:

• Minimum: минимальное значение ползунка, представляет тип double, значение по умолчанию - 0

• Maximum: максимальное значение ползунка, представляет тип double, значение по умолчанию - 1

• Value: текущее значение ползунка, представляет тип double, значение по умолчанию - 0

• ThumbColor: цвет указателя текущего значения, представляет тип Color

• MinimumTrackColor: цвет ползунка до указателя значения, представляет тип Color

• MaximumTrackColor: цвет ползунка после указателя значения, представляет тип Color

Как и Stepper, класс Slider для отслеживания измененя значения определяет событие ValueChanged, которое генерируется каждый раз при изменении значения свойства Value (в том числе при изменении программным образом). В качестве параметра оно принимает объект ValueChangedEventArgs, который имеет два свойства: OldValue (старое значение) и NewValue (новое значение). При этом значение свойства NewValue эквивалентно значению свойства Value объекта Stepper.

В дополнение для отслеживания перемщения позунка класс Slider определяет события DragStarted (возникает, когда пользователь начинает перемещать ползунок) и DragCompleted (возникает, когда пользователь завершает перемещать ползунок).

Например, определение в коде C#

namespace HelloApp;

class StartPage : ContentPage
{
    Label header;
    public StartPage()
    {
        header = new Label { FontSize = 18, Margin = 5 };

        Slider slider = new Slider
        {
            Maximum = 50,
            Minimum = 0,
            Value = 30,
            ThumbColor = Colors.DeepPink,
            MinimumTrackColor = Colors.DeepPink,
            MaximumTrackColor = Colors.LightPink
        };
        slider.ValueChanged += OnSliderValueChanged;
        Content = new StackLayout { Children = { header, slider}, Padding=20 };
    }
    void OnSliderValueChanged(object sender, ValueChangedEventArgs e)
    {
        header.Text = $"Выбрано: {e.NewValue:F1}";
    }
}

Аналогичный слайдер в xaml:

<StackLayout Padding="20">
    <Label x:Name="header"  FontSize="18" Margin="5" />
    <Slider Minimum ="0" Maximum="50" Value="30" ValueChanged="OnSliderValueChanged" 
        MinimumTrackColor="DeepPink" MaximumTrackColor="LightPink" ThumbColor="DeepPink" />
</StackLayout>

И в файле связанного кода пропишем обработчик OnSliderValueChanged:

void OnSliderValueChanged(object sender, ValueChangedEventArgs e)
{
    header.Text = $"Выбрано: {e.NewValue:F1}";
}