Ползунок

Статья
08/30/2024

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

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

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

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

Примечание.

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

Принуживает Slider Value свойство таким образом, чтобы оно было между 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. Во время создания события значение совпадает со Value свойством NewValue Slider объекта.

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

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

Не используйте не ограниченные параметры горизонтального макета Center, Startили End с Slider. Сохраните параметр Fillпо умолчанию HorizontalOptions и не используйте ширину 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"
                ValueChanged="OnSliderValueChanged" />
        <Label x:Name="displayLabel"
               Text="(uninitialized)"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

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

Файл программной части содержит обработчик события 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);
    }
}

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

.NET MAUI Slider screenshot.

Кроме того, обработчик событий может получить 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 Source={x:Reference slider},
                                  Path=Value}"
               FontSize="18"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <Slider x:Name="slider"
                Maximum="360" />
        <Label x:Name="displayLabel"
               Text="{Binding Source={x:Reference slider},
                              Path=Value,
                              StringFormat='The Slider value is {0:F0}'}"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

В этом примере Rotation свойство первого привязано к Value свойству Slider, как Text и свойство второго Label 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 .

Поделиться через

Ползунок

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

Привязка данных ползунка

Меры предосторожности

Дополнительные ресурсы