スライダー

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

Slider には、次のプロパティが定義されています。

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

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

Sliderは、ValueとMinimumの間になるように、Maximum プロパティを強制します。 Minimum プロパティが Value プロパティより大きい値に設定されている場合、Sliderは Value プロパティを Minimum に設定します。 同様に、MaximumがValue未満の値に設定されている場合は、SliderValueプロパティを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が実行されます。

スライダーを作成する

次の例は、2 つの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 は 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);
    }
}

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

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

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

Slider オブジェクトにx:Name属性 ("slider" など) を持つ名前が 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 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指定を持つ 2 番目のSliderのText プロパティと同様に、LabelのStringFormat プロパティにバインドされます。 ページが最初に表示されると、2 番目の Label には値を含むテキスト文字列が表示されます。 データ バインディングなしでテキストを表示するには、TextのLabel プロパティを明示的に初期化するか、クラス コンストラクターからイベント ハンドラーを呼び出して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
};

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

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

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

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