Slider

[アーティクル]
11/14/2023

.NET マルチプラットフォームアプリ UI (.NET MAUI) Slider は、連続範囲から値を選択 double するために操作できる水平バーです。

Slider は次の特性を定義します。

Minimumは、範囲 doubleの最小値で、既定値は 0 です。
Maximumは、範囲 doubleの最大値で、既定値は 1 です。
Valueはdoubleスライダーの値です。スライダーの値の範囲MinimumMaximumは 0 で、既定値は 0 です。
MinimumTrackColorの種類 Colorは、親指の左側のバーの色です。
MaximumTrackColorは、 Colorサムの右側のバーの色です。
ThumbColor 型 Colorの場合は、サムの色です。
ThumbImageSource、型 ImageSourceのサムに使用する画像を指定します ImageSource。
DragStartedCommandは、ドラッグアクションの先頭で実行される型 ICommandです。
DragCompletedCommandは、ドラッグアクションの最後に実行される型 ICommandです。

これらのプロパティは、オブジェクトによって BindableProperty サポートされます。この Value プロパティの既定の BindingMode.TwoWayバインドモードは、Model-View-ViewModel (MVVM) パターンを使用するアプリケーションのバインディングソースとして適していることを意味します。

Note

プロパティ ThumbColor と ThumbImageSource プロパティは相互に排他的です。両方のプロパティが設定されている場合、 ThumbImageSource プロパティが優先されます。

プロパティを Slider 強制的に Value 設定して、その中間 Minimum と Maximum、両端を含めます。プロパティが Minimum プロパティより Value 大きい値に設定されている場合、プロパティは SliderValueMinimum. 同様に、より小さい値に設定されている場合Maximumは、SliderプロパティMaximumを Value .Value 内部的にはSlider、より小さいMaximumことをMinimum保証します。 Maximum以上にMinimum設定されている場合MinimumはMaximum、例外が発生します。設定とプロパティのMinimum詳細については、「注意事項」を参照してください。Maximum

Sliderは、ValueChangedユーザーによる操作Sliderを通じて、またはプログラムがプロパティをValue直接設定したときに、変更時に発生するイベントをValue定義します。前の ValueChanged 段落で説明したようにプロパティが Value 強制されると、イベントも発生します。 ValueChangedEventArgsイベントに付随ValueChangedするオブジェクトにはOldValue、型doubleのプロパティがありますNewValue。イベントが発生した時点では、値はNewValueオブジェクトのSliderプロパティとValue同じです。

Slider では、ドラッグアクションの DragStarted 先頭と末尾に発生するイベントも定義されます DragCompleted 。 ValueChangedイベントとは異なり、イベントDragStartedはDragCompletedユーザーによる .Slider イベントがDragStarted発生すると、型ICommandの DragStartedCommand、が実行されます。同様に、イベントが DragCompleted 発生すると、 DragCompletedCommand型 ICommandの、が実行されます。

警告

の制約のない水平レイアウトオプションCenterStartEndSliderを使用しないでください。レイアウトに配置する場合は、既定HorizontalOptionsのFill設定をそのまま使用し、幅AutoをSlider Grid使用しないでください。

スライダーを作成する

次の例は、2 つのLabelオブジェクトを含む、をSlider作成する方法を示しています。

<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 プロパティが 360 に Maximum 初期化されています。 2 つ目 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);
    }
}

ハンドラーは、オブジェクトのプロパティをsliderValue使用して最初LabelのプロパティをRotation設定し、イベント引数のプロパティを持つNewValueメソッドを使用String.Formatして、2 番目LabelのプロパティをText設定します。ValueChangedSlider

.NET MAUI Slider screenshot.

イベントハンドラーは、引数を使用してsenderイベントをSlider発生させるイベントを取得することもできます。プロパティには Value 、現在の値が含まれています。

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

オブジェクトに Slider 属性 ("slider" など) を持つ x:Name 名前が XAML ファイルに指定されている場合、イベントハンドラーはそのオブジェクトを直接参照できます。

double value = slider.Value;

作成する同等の Slider C# コードは次のとおりです。

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>

この例では、Rotation1 つ目Labelのプロパティは、仕様を持つ 2 番目のSliderプロパティと同様にText、プロパティLabelにStringFormatバインドValueされます。ページが最初に表示されると、2 番目 Label のページに値を含むテキスト文字列が表示されます。データバインディングなしでテキストを表示するには、クラスコンストラクターからイベントハンドラーを呼び出して、イベントのLabel発生を具体的に初期化Textするか、イベントのValueChanged発生をシミュレートする必要があります。

注意事項

プロパティの Minimum 値は、常にプロパティの値より小さくする Maximum 必要があります。次の例では、例外が Slider 発生します。

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

C# コンパイラは、これら 2 つのプロパティを順番に設定するコードを Minimum 生成します。プロパティが 10 に設定されると、既定値 Maximum の 1 より大きくなります。この場合は、最初にプロパティを設定することで、例外を Maximum 回避できます。

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

この例では、既定値の 0 より大きいため、20 にMinimum設定Maximumしても問題ありません。設定されている場合 Minimum 、値は 20 の Maximum 値より小さくなります。

XAML でも同じ問題が存在します。プロパティは、常に次の値を超MinimumえるMaximum順序で設定する必要があります。

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

値とMaximum値を負のMinimum数に設定できますが、常に次の値よりMaximum小さい順序Minimumでのみ設定できます。

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

このプロパティは Value 常に値以上で Minimum 、次の値以下 Maximumです。その範囲外の値に設定されている場合 Value 、値は範囲内に強制的に配置されますが、例外は発生しません。たとえば、次の例では例外は発生しません。

Slider slider = new Slider
{
    Value = 10
};

代わりに、プロパティは Value 1 の Maximum 値に強制されます。

前の例は 20、Minimum10 に設定Maximumされています。

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

10 に設定すると Minimum 、 Value 10 にも設定されます。

ValueChangedプロパティが既定値の 0 以外の値に強制された時点Valueでイベントハンドラーがアタッチされている場合、ValueChangedイベントが発生します。

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

10 に設定すると Minimum 、 Value 10 にも設定され、イベントが発生します ValueChanged 。これは、ページの残りの部分が構築される前に発生する可能性があり、ハンドラーは、まだ作成されていないページ上の他の要素を参照しようとする可能性があります。ページ上の他の要素の値をValueChangedチェックnullするコードをハンドラーに追加することもできます。または、値が初期化された後に ValueChanged イベントハンドラーを Slider 設定することもできます。

Slider

スライダーを作成する

スライダーをデータバインドする

注意事項

フィードバック

その他のリソース

その他のリソース