Stepper

아티클
02/13/2024

.NET 다중 플랫폼 앱 UI(.NET MAUI) Stepper 를 사용하면 값 범위에서 숫자 값을 선택할 수 있습니다. 빼기와 더하기 기호로 레이블이 지정된 두 개의 단추로 구성됩니다. 사용자가 이러한 단추를 조작하여 값 범위에서 값을 증분 방식으로 선택할 double 수 있습니다.

형식 Stepper 의 double네 가지 속성을 정의합니다.

Increment 는 선택한 값을 변경할 크기이며 기본값은 1입니다.
Minimum 는 범위의 최소값이며 기본값은 0입니다.
Maximum 는 범위의 최대값이며 기본값은 100입니다.
Value 는 스텝퍼의 값으로, 범위가 Minimum 지정되며 Maximum 기본값은 0입니다.

이러한 모든 속성은 개체에서 BindableProperty 지원됩니다. 속성에는 Value 기본 바인딩 모드 BindingMode.TwoWay가 있습니다. 즉, MVVM(Model-View-ViewModel) 패턴을 사용하는 애플리케이션에서 바인딩 소스로 적합합니다.

속성이 StepperValue 사이 Minimum 이고 Maximum포함되도록 속성을 강제 변환합니다. 속성이 Minimum 속성보다 Value 큰 값으로 설정된 경우 속성을 Stepper .로 설정합니다 ValueMinimum. 마찬가지로, 값보다 StepperValue작은 값으로 설정된 경우 Maximum 속성을 Maximum.로 설정합니다Value. 내부적으로는 이 Stepper 보다 작은Maximum지 Minimum 확인합니다. 이보다 Maximum작지 않도록 Minimum 설정되었거나 Maximum 설정된 경우 Minimum 예외가 발생합니다. 설정 Minimum 및 Maximum 속성에 대한 자세한 내용은 주의 사항을 참조 하세요.

Stepper는 ValueChanged 사용자 조작 Stepper 을 통해 또는 애플리케이션이 속성을 직접 설정하는 Value 경우 변경될 때 발생하는 Value 이벤트를 정의합니다. ValueChanged 이전에 설명한 대로 속성이 Value 강제 변환될 때도 이벤트가 발생합니다. ValueChangedEventArgs 이벤트 OldValue 와 함께 제공되는 ValueChanged 개체의 형식double은 다음과 같습니다NewValue. 이벤트가 발생할 때 값은 개체의 NewValueStepper 속성과 Value 동일합니다.

스테퍼 만들기

다음 예제에서는 두 개의 Label 개체를 사용하여 <>Stepper/a0>를 만드는 방법을 보여 있습니다.

<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>

이 예제에서는 속성이 Stepper 360이고 속성이 30이 Increment 되도록 Maximum 초기화됩니다. Stepper 선택한 값을 속성 값에 따라 변경 내용을 증분 방식으로 MinimumMaximum 조작합니다Increment. 두 번째는 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);
    }
}

처리기는 Stepper 개체의 stepper 속성을 사용하여 Value 첫 번째 Label 속성을 설정하고 Rotation 이벤트 인수의 속성과 함께 NewValue 메서드를 사용하여 string.Format 두 번째Label의 속성을 설정합니다Text.ValueChanged

.NET MAUI Stepper screenshot.

이벤트 처리기가 인수를 통해 sender 이벤트를 발생시키는 것을 가져올 Stepper 수도 있습니다. 속성에는 Value 현재 값이 포함됩니다.

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

개체에 Stepper 특성이 있는 XAML 파일 x:Name 의 이름(예: "stepper")이 지정된 경우 이벤트 처리기는 해당 개체를 직접 참조할 수 있습니다.

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>

이 예제 Rotation 에서 첫 번째 Label 속성은 사양이 있는 Value 두 번째 LabelStringFormat 속성Stepper과 마찬가지로 Text 해당 속성에 바인딩됩니다. 페이지가 처음 나타나면 두 번째 Label 페이지에는 값이 있는 텍스트 문자열이 표시됩니다. 데이터 바인딩 없이 텍스트를 표시하려면 클래스 생성자에서 이벤트 처리기를 호출하여 이벤트의 속성을 Label 구체적으로 초기화 Text 하거나 이벤트 발생 ValueChanged 을 시뮬레이트해야 합니다.

예방 조치

속성 값 Minimum 은 항상 속성 값 Maximum 보다 작아야 합니다. 다음 코드 예제에서는 예외가 Stepper 발생합니다.

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

C# 컴파일러는 이러한 두 속성을 순서대로 설정하는 코드를 생성하며 Minimum , 속성이 180으로 설정되면 기본 Maximum 값인 100보다 큽니다. 이 경우 먼저 속성을 설정하여 예외를 방지할 Maximum 수 있습니다.

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

이 예제에서는 기본값 Minimum 0보다 크므로 360으로 설정하는 Maximum 것은 문제가 되지 않습니다. Minimum 설정되면 값이 360 값보다 Maximum 작습니다.

XAML에서도 동일한 문제가 있습니다. 항상 다음보다 Minimum큰 순서로 Maximum 속성을 설정합니다.

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

값과 Maximum 값을 음수로 설정할 수 있지만 항상 다음보다 Maximum작은 순서 Minimum 로만 설정할 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
};

Minimum 180으로 설정된 경우 Value 180으로 설정됩니다.

속성이 ValueChanged 기본값 0 ValueChanged 이 아닌 다른 값으로 강제 변환될 때 Value 이벤트 처리기가 연결된 경우 이벤트가 발생합니다.

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

Minimum 180 Value 으로 설정되면 180으로 설정되고 ValueChanged 이벤트가 발생합니다. 이 문제는 페이지의 나머지 부분을 생성하기 전에 발생할 수 있으며 처리기는 아직 생성되지 않은 페이지의 다른 요소를 참조하려고 시도할 수 있습니다. 페이지의 다른 요소 값에 ValueChanged 대해 검사 null 처리기에 일부 코드를 추가할 수 있습니다. 또는 값이 ValueChanged 초기화된 후 Stepper 이벤트 처리기를 설정할 수 있습니다.

Stepper

스테퍼 만들기

스텝퍼 데이터 바인딩

예방 조치

피드백

추가 리소스