Xamarin.Forms Stepper

  • Artykuł

Download Sample Pobieranie przykładu

Użyj kroku, aby wybrać wartość liczbową z zakresu wartości.

Składa Xamarin.FormsStepper się z dwóch przycisków oznaczonych znakami minus i plus. Te przyciski można manipulować przez użytkownika, aby przyrostowo wybrać double wartość z zakresu wartości.

Definiuje Stepper cztery właściwości typu double:

  • Increment jest kwotą, o którą należy zmienić wybraną wartość, z wartością domyślną 1.
  • Minimum jest minimalną wartością zakresu z wartością domyślną 0.
  • Maximum jest maksymalną wartością zakresu z wartością domyślną 100.
  • Value to wartość kroku, która może zawierać zakres między Minimum i Maximum i ma wartość domyślną 0.

Wszystkie te właściwości są wspierane przez BindableProperty obiekty. Właściwość Value ma domyślny tryb BindingMode.TwoWaypowiązania , co oznacza, że jest odpowiedni jako źródło powiązania w aplikacji korzystającej z architektury Model-View-ViewModel (MVVM).

Ostrzeżenie

Wewnętrznie zapewnia Stepper , że Minimum wartość jest mniejsza niż Maximum. Jeśli wartość Minimum lub Maximum kiedykolwiek jest ustawiona tak, że Minimum nie jest mniejsza niż Maximum, zgłaszany jest wyjątek. Aby uzyskać więcej informacji na temat ustawiania Minimum właściwości i Maximum , zobacz sekcję Środki ostrożności .

Właściwość Stepper jest przekształcana Value w taki sposób, aby mieściła się między Minimum i Maximum, włącznie. Minimum Jeśli właściwość jest ustawiona na wartość większą niż Value właściwość, Stepper właściwość ustawia Value wartość Minimum. Podobnie, jeśli Maximum ustawiono wartość mniejszą niż Value, Stepper właściwość ustawia Value wartość na Maximum.

StepperValueChanged Definiuje zdarzenie, które jest wyzwalane, gdy Value zmiany są uruchamiane za pośrednictwem manipulowania Stepper użytkownikiem obiektu lub, gdy aplikacja ustawia Value właściwość bezpośrednio. Zdarzenie ValueChanged jest również wyzwalane, gdy Value właściwość jest coerced zgodnie z opisem w poprzednim akapicie.

Obiekt ValueChangedEventArgs , który towarzyszy ValueChanged zdarzeniu ma dwie właściwości: doublei OldValueNewValue. W momencie uruchomienia zdarzenia wartość NewValue jest taka sama jak Value właściwość Stepper obiektu.

Podstawowy kod krokowy i adiustacja

Przykład StepperDemos zawiera trzy strony, które są funkcjonalnie identyczne, ale są implementowane na różne sposoby. Pierwsza strona używa tylko kodu C#, drugi używa języka XAML z procedurą obsługi zdarzeń w kodzie, a trzecia jest w stanie uniknąć obsługi zdarzeń przy użyciu powiązania danych w pliku XAML.

Tworzenie kroku w kodzie

Na stronie Podstawowy kod krokowy w przykładzie StepperDemos pokazano, jak utworzyć i Stepper dwa Label obiekty w kodzie:

public class BasicStepperCodePage : ContentPage
{
    public BasicStepperCodePage()
    {
        Label rotationLabel = new Label
        {
            Text = "ROTATING TEXT",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        Label displayLabel = new Label
        {
            Text = "(uninitialized)",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        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);
        };

        Title = "Basic Stepper Code";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children = { rotationLabel, stepper, displayLabel }
        };
    }
}

Właściwość Stepper jest inicjowana jako Maximum właściwość 360 i Increment właściwość 30. Manipulowanie zmianami wybranej Stepper wartości przyrostowo między elementami Minimum na Maximum podstawie wartości Increment właściwości. Procedura obsługi używa właściwości obiektu do ustawienia Rotation właściwości pierwszego Label i używa string.Format metody z właściwością NewValue argumentów zdarzeń, aby ustawić Text właściwość drugiego Labelobiektu .stepperValueStepperValueChanged Te dwa podejścia do uzyskania bieżącej Stepper wartości są zamienne.

Na poniższych zrzutach ekranu przedstawiono stronę Podstawowa kod kroku:

Basic Stepper Code

Drugi Label wyświetla tekst "(niezainicjowany)", dopóki Stepper nie zostanie zmanipulowany, co powoduje wyzwolenie pierwszego ValueChanged zdarzenia.

Tworzenie kroku w języku XAML

Strona XAML podstawowego kroku krokowego jest funkcjonalnie taka sama jak podstawowy kod krokowy, ale zaimplementowana głównie w języku XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
        <Stepper Maximum="360"
                 Increment="30"
                 HorizontalOptions="Center"
                 ValueChanged="OnStepperValueChanged" />
        <Label x:Name="_displayLabel"
               Text="(uninitialized)"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />        
    </StackLayout>
</ContentPage>

Plik związany z kodem zawiera procedurę obsługi zdarzenia 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);
    }
}

Program obsługi zdarzeń może również uzyskać Stepper wyzwalanie zdarzenia za pomocą argumentu sender . Właściwość Value zawiera bieżącą wartość:

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

Stepper Jeśli obiekt otrzymał nazwę w pliku XAML z atrybutem x:Name (na przykład "stepper"), program obsługi zdarzeń może odwoływać się bezpośrednio do tego obiektu:

double value = stepper.Value;

Powiązanie danych krokowego

Na stronie Podstawowe powiązania krok po kroku pokazano, jak napisać niemal równoważną aplikację, która eliminuje Value procedurę obsługi zdarzeń przy użyciu powiązania danych:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
        <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="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Właściwość Rotation pierwszego Label jest powiązana Value z właściwością Stepper, podobnie jak Text właściwość drugiego ze specyfikacjąStringFormat.Label Strona Podstawowe powiązania kroków działa nieco inaczej niż na dwóch poprzednich stronach: po pierwszym wyświetleniu strony drugi Label wyświetla ciąg tekstowy z wartością . Jest to korzyść z używania powiązania danych. Aby wyświetlić tekst bez powiązania danych, należy w szczególności zainicjować Text właściwość Label obiektu lub zasymulować wyzwalanie ValueChanged zdarzenia przez wywołanie procedury obsługi zdarzeń z konstruktora klasy.

Środki ostrożności

Wartość Minimum właściwości musi być zawsze mniejsza niż wartość Maximum właściwości. Poniższy fragment kodu powoduje wystąpienie wyjątku Stepper :

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

Kompilator języka C# generuje kod, który ustawia te dwie właściwości w sekwencji, a gdy Minimum właściwość jest ustawiona na 180, jest większa niż wartość domyślna Maximum 100. Można uniknąć wyjątku w tym przypadku, ustawiając Maximum najpierw właściwość:

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

Ustawienie Maximum wartości 360 nie jest problemem, ponieważ jest większe niż wartość domyślna Minimum 0. Po Minimum ustawieniu wartość jest mniejsza niż Maximum wartość 360.

Ten sam problem występuje w języku XAML. Ustaw właściwości w kolejności, która gwarantuje, że Maximum wartość jest zawsze większa niż Minimum:

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

Wartości i można ustawić Minimum na liczby ujemne, ale tylko w kolejności, w której Minimum wartość jest zawsze mniejsza niż Maximum:Maximum

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

Właściwość Value jest zawsze większa lub równa Minimum wartości i mniejsza niż lub równa Maximum. Jeśli Value zostanie ustawiona wartość poza tym zakresem, wartość będzie zmuszana do leżenia w zakresie, ale nie zostanie zgłoszony żaden wyjątek. Na przykład ten kod nie zgłosi wyjątku:

Stepper stepper = new Stepper
{
    Value = 180
};

Value Zamiast tego właściwość jest zmuszana do Maximum wartości 100.

Poniżej przedstawiono fragment kodu:

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

Gdy Minimum jest ustawiona wartość 180, Value wartość jest również ustawiona na 180.

ValueChanged Jeśli program obsługi zdarzeń został dołączony w momencie, Value gdy właściwość jest coerced do czegoś innego niż jego domyślna wartość 0, ValueChanged zdarzenie zostanie wyzwolone. Oto fragment kodu XAML:

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

Gdy Minimum jest ustawiona na 180, Value jest również ustawiona na 180, a ValueChanged zdarzenie jest uruchamiane. Może się to zdarzyć przed utworzeniem pozostałej części strony, a program obsługi może próbować odwołać się do innych elementów na stronie, które nie zostały jeszcze utworzone. Możesz dodać kod do ValueChanged programu obsługi, który sprawdza null wartości innych elementów na stronie. Można też ustawić procedurę ValueChanged obsługi zdarzeń po Stepper zainicjowaniu wartości.