Слайдер

Пользовательский интерфейс многоплатформенного приложения .NET (.NET MAUI) Slider — это горизонтальная полоса, которую можно управлять для выбора double значения из непрерывного диапазона.

Slider определяет следующие свойства:

Minimum, тип double, представляет собой минимум диапазона, со значением по умолчанию 0.
Maximum имеет тип double и является максимальным значением диапазона со значением по умолчанию 1.
Value(тип double) — это значение ползунка, которое может варьироваться между Minimum и Maximum имеет значение по умолчанию 0.
MinimumTrackColor, типа Color — это цвет полосы на левой стороне ползунка.
MaximumTrackColor( тип Color) — это цвет панели в правой части пальца.
ThumbColor типа Color, это цвет Colorпальца.
ThumbImageSource( тип ImageSource) — это изображение, используемое для отпечатка, типа ImageSource.
DragStartedCommand, типа ICommand, который запускается в начале действия перетаскивания.
DragCompletedCommand, типа ICommand, который выполняется в конце действия перетаскивания.

Эти свойства поддерживаются объектами BindableProperty . Свойство Value имеет режим привязки по умолчанию BindingMode.TwoWay, что означает, что оно подходит в качестве источника привязки в приложении, использующем шаблон Модель-Представление-Модель представления (MVVM).

Замечание

Свойства ThumbColor и ThumbImageSource являются взаимоисключающими. Если заданы оба свойства, свойство, заданное в ThumbImageSource, будет иметь приоритет.

Приводит свойство SliderValue в диапазон от Minimum до Maximum, включительно. Если для свойства Minimum задано значение, большее, чем для свойства Value, то Slider задает свойству Value значение Minimum. Аналогично, если Maximum установлено значение меньше Value, то Slider устанавливает свойство Value в Maximum. Внутри система Slider гарантирует, что Minimum меньше Maximum. Если Minimum или Maximum когда-либо заданы таким образом, что Minimum не меньше Maximum, возникает исключение. Дополнительные сведения о настройке Minimum и Maximum свойствах см. в разделе "Меры предосторожности".

Slider определяет событие ValueChanged, которое возникает при изменении Value, либо через манипуляцию пользователя с Slider, либо при непосредственной установке свойства Value программой. Событие ValueChanged также возникает, когда свойство Value приведено, как описано в предыдущем абзаце. Объект ValueChangedEventArgs , который сопровождает ValueChanged событие, имеет OldValue и NewValue свойства типа double. В момент возникновения события значение NewValue совпадает со свойством Value объекта Slider.

Slider также определяет события DragStarted и DragCompleted, которые вызываются в начале и конце действия перетаскивания. В отличие от события ValueChanged, события DragStarted и DragCompleted создаются только в результате действий пользователя с Slider. Когда срабатывает DragStarted событие, выполняется DragStartedCommand, типа ICommand. Аналогичным образом, когда DragCompleted событие запускается, DragCompletedCommand выполняется объектом типа ICommand.

Предупреждение

Не используйте неограниченные параметры горизонтального макета Center, Start, или End с Slider. Сохраните параметр HorizontalOptions по умолчанию Fill, и не используйте ширину Auto при вводе Slider в Grid макет.

Создание ползунка

В следующем примере показано, как создать объект Sliderс двумя Label объектами:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SliderDemos.BasicSliderXamlPage"
             Title="Basic Slider XAML"
             Padding="10, 0">
    <StackLayout>
        <Label x:Name="rotatingLabel"
               Text="ROTATING TEXT"
               FontSize="18"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <Slider Maximum="360"
                SemanticProperties.Description="Rotation angle"
                ValueChanged="OnSliderValueChanged" />
        <Label x:Name="displayLabel"
               Text="(uninitialized)"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

В этом примере Slider инициализирован так, чтобы иметь свойство Maximum равное 360. Второй Label отображает текст "(неинициализировано)" до тех пор, пока Slider не будет манипулировано, что приводит к возникновению первого ValueChanged события.

Файл "code-behind" содержит обработчик события ValueChanged:

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

    void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
    {
        double value = args.NewValue;
        rotatingLabel.Rotation = value;
        displayLabel.Text = String.Format("The Slider value is {0}", value);
    }
}

Обработчик ValueChangedSlider использует свойство Value объекта slider, чтобы задать свойство Rotation первого Label, и использует метод String.Format с свойством NewValue аргументов события, чтобы задать свойство Text второго Label.

Снимок экрана ползунка .NET MAUI.

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

double value = ((Slider)sender).Value;

Если бы объект Slider получил имя в XAML-файле с атрибутом x:Name (например, "ползунок"), то обработчик событий мог бы ссылаться непосредственно на этот объект:

double value = slider.Value;

Эквивалентный код C# для создания Slider :

Slider slider = new Slider
{
    Maximum = 360
};
slider.ValueChanged += (sender, args) =>
{
    rotationLabel.Rotation = slider.Value;
    displayLabel.Text = String.Format("The Slider value is {0}", args.NewValue);
};

Привязать данные к ползунку

Обработчик событий ValueChanged можно устранить, используя привязку данных для реакции на изменение значения Slider.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SliderDemos.BasicSliderBindingsPage"
             Title="Basic Slider Bindings"
             Padding="10, 0">
    <StackLayout>
        <Label Text="ROTATING TEXT"
               Rotation="{Binding x:DataType='Slider',
                                  Source={x:Reference slider},
                                  Path=Value}"
               FontSize="18"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <Slider x:Name="slider"
                Maximum="360" />
        <Label x:Name="displayLabel"
               Text="{Binding x:DataType='Slider',
                              Source={x:Reference slider},
                              Path=Value,
                              StringFormat='The Slider value is {0:F0}'}"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

В этом примере свойство Rotation первого Label привязано к свойству Value объекта Slider, как и свойство Text второго Label, с указанием спецификации StringFormat. При первом появлении страницы вторая Label отображает текстовую строку со значением. Чтобы отобразить текст без привязки данных, необходимо специально инициализировать Text свойство Label события или имитировать запуск ValueChanged события путем вызова обработчика событий из конструктора класса.

Профилактика

Значение Minimum свойства всегда должно быть меньше значения Maximum свойства. В следующем примере Slider вызывает это исключение:

// Throws an exception!
Slider slider = new Slider
{
    Minimum = 10,
    Maximum = 20
};

Компилятор C# создает код, который задает эти два свойства в последовательности, и если Minimum свойство имеет значение 10, оно больше значения по умолчанию Maximum 1. Чтобы избежать исключения в этом случае, сначала установите свойство Maximum.

Slider slider = new Slider
{
    Maximum = 20,
    Minimum = 10
};

В этом примере значение Maximum 20 не является проблемой, так как значение по умолчанию Minimum больше 0. Если Minimum задано, значение меньше Maximum 20.

Та же проблема существует в XAML. Свойства должны быть заданы в порядке, обеспечивающем, что Maximum всегда больше Minimum:

<Slider Maximum="20"
        Minimum="10" ... />

Можно задать значения Minimum и Maximum как отрицательные числа, но только в порядке, где Minimum всегда меньше Maximum.

<Slider Minimum="-20"
        Maximum="-10" ... />

Свойство Value всегда больше или равно значению Minimum и меньше или равно Maximum. Если Value задано значение за пределами этого диапазона, значение будет приведено к диапазону, но исключение не будет вызвано. Например, следующий пример не приведет к возникновению исключения:

Slider slider = new Slider
{
    Value = 10
};

Вместо этого свойство Value приводится к значению Maximum 1.

Предыдущий пример имеет Maximum значение 20 и Minimum 10:

Slider slider = new Slider
{
    Maximum = 20,
    Minimum = 10
};

Если Minimum задано значение 10, то Value также имеет значение 10.

ValueChanged Если обработчик событий был присоединен во время принуждения свойства Value к значению, отличному от значения по умолчанию 0, то инициируется событие ValueChanged.

<Slider ValueChanged="OnSliderValueChanged"
        Maximum="20"
        Minimum="10" />

Если Minimum равно 10, Value также равно 10, и вызывается событие ValueChanged. Это может произойти до создания остальной части страницы, и обработчик может попытаться ссылаться на другие элементы на странице, которые еще не созданы. Вы можете захотеть добавить код в ValueChanged обработчик, который проверяет значения null других элементов на странице. Кроме того, можно задать ValueChanged обработчик событий после инициализации значений Slider .

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-04-10