ステッパ

.NET マルチプラットフォーム アプリ UI (.NET MAUI) Stepper を使用すると、値の範囲から数値を選択できます。 これは、マイナス記号とプラス記号でラベル付けされた 2 つのボタンで構成されます。 これらのボタンは、ユーザーが操作して、値の範囲から値を double 段階的に選択することができます。

型の Stepper 4 つのプロパティを double定義します。

  • Increment は、選択した値を変更する量で、既定値は 1 です。
  • Minimum は範囲の最小値で、既定値は 0 です。
  • Maximum は範囲の最大値で、既定値は 100 です。
  • Valueはステッパーの値です。この値の範囲MinimumMaximumは 0 で、既定値は 0 です。

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

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

Stepperは、アプリケーションがプロパティをValueChangedValue直接設定するときに、ユーザー操作Stepperによって変更されたときに発生するイベントをValue定義します。 ValueChanged前に説明したようにプロパティがValue強制されると、イベントも発生します。 ValueChangedEventArgsイベントに付随ValueChangedするオブジェクトのOldValuedoubleNewValue、. イベントが発生した時点で、値のNewValue値はオブジェクトのValueStepperプロパティと同じです。

ステッパーを作成する

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

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StepperDemo.BasicStepperXAMLPage"
             Title="Basic Stepper XAML">
    <StackLayout Margin="20">
        <Label x:Name="_rotatingLabel"
               Text="ROTATING TEXT"
               FontSize="18"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <Stepper Maximum="360"
                 Increment="30"
                 HorizontalOptions="Center"
                 ValueChanged="OnStepperValueChanged" />
        <Label x:Name="_displayLabel"
               Text="(uninitialized)"
               HorizontalOptions="Center"
               VerticalOptions="Center" />        
    </StackLayout>
</ContentPage>

この例では、Stepper360 のプロパティと 30 のプロパティをIncrement持つMaximum初期化されます。 プロパティの値Incrementに基づいて、Stepper選択した値を増分Minimum的にMaximum変更します。 2 つ目 Label は、操作されるまで Stepper "(初期化されていません)" というテキストを表示します。これにより、最初 ValueChanged のイベントが発生します。

分離コード ファイルには、イベントのハンドラーが ValueChanged 含まれています。

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

    void OnStepperValueChanged(object sender, ValueChangedEventArgs e)
    {
        double value = e.NewValue;
        _rotatingLabel.Rotation = value;
        _displayLabel.Text = string.Format("The Stepper value is {0}", value);
    }
}

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

.NET MAUI Stepper screenshot.

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

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

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

double value = stepper.Value;

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

Stepper stepper = new Stepper
{
    Maximum = 360,
    Increment = 30,
    HorizontalOptions = LayoutOptions.Center
};
stepper.ValueChanged += (sender, e) =>
{
    rotationLabel.Rotation = stepper.Value;
    displayLabel.Text = string.Format("The Stepper value is {0}", e.NewValue);
};

データをステッパーにバインドする

イベント ハンドラーは ValueChanged 、データ バインディングを使用して値の変更に Stepper 応答することで排除できます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StepperDemo.BasicStepperBindingsPage"
             Title="Basic Stepper Bindings">
    <StackLayout Margin="20">
        <Label Text="ROTATING TEXT"
               Rotation="{Binding Source={x:Reference _stepper}, Path=Value}"
               FontSize="18"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <Stepper x:Name="_stepper"
                 Maximum="360"
                 Increment="30"
                 HorizontalOptions="Center" />
        <Label Text="{Binding Source={x:Reference _stepper}, Path=Value, StringFormat='The Stepper value is {0:F0}'}"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

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

注意事項

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

// Throws an exception!
Stepper stepper = new Stepper
{
    Minimum = 180,
    Maximum = 360
};

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

Stepper stepper = new Stepper
{
    Maximum = 360,
    Minimum = 180
};

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

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

<Stepper Maximum="360"
         Minimum="180" ... />

値とMaximum値は負のMinimum数値に設定できますが、常にMaximum以下の順序Minimumでのみ設定できます。

<Stepper Minimum="-360"
         Maximum="-180" ... />

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

Stepper stepper = new Stepper
{
    Value = 180
};

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

前の例では、360 と Minimum 180 に設定Maximumされています。

Stepper stepper = new Stepper
{
    Maximum = 360,
    Minimum = 180
};

180 に設定されている場合MinimumValueは、180 にも設定されます。

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

<Stepper ValueChanged="OnStepperValueChanged"
         Maximum="360"
         Minimum="180" />

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