Compartilhar via

Passador

  • Artigo

A interface do usuário do aplicativo multiplataforma .NET (.NET MAUI) Stepper permite que um valor numérico seja selecionado de um intervalo de valores. Ele consiste em dois botões rotulados com sinais de menos e mais. Esses botões podem ser manipulados pelo usuário para selecionar incrementalmente um valor de um double intervalo de valores.

O Stepper define quatro propriedades do tipo double:

  • Increment é a quantidade pela qual alterar o valor selecionado, com um valor padrão de 1.
  • Minimum é o mínimo do intervalo, com um valor padrão de 0.
  • Maximum é o máximo do intervalo, com um valor padrão de 100.
  • Value é o valor do stepper, que pode variar entre Minimum e e Maximum tem um valor padrão de 0.

Todas essas propriedades são apoiadas por BindableProperty objetos. A Value propriedade tem um modo de vinculação padrão de , o que significa que ela é adequada como uma fonte de BindingMode.TwoWayvinculação em um aplicativo que usa o padrão MVVM (Model-View-ViewModel).

O Stepper coage o Value imóvel para que ele fique entre Minimum e Maximum, inclusive. Se a propriedade for definida como um valor maior que a propriedade, a Stepper Minimum Value propriedade será definida Value como Minimum. Da mesma forma, se Maximum for definido como um valor menor que Value, defina Stepper a Value propriedade como Maximum. Internamente, a Stepper garantia é menor que Minimum Maximum. Se Minimum ou Maximum alguma vez forem definidos de modo que Minimum não seja inferior a , uma exceção é levantada Maximum. Para obter mais informações sobre como definir as Minimum propriedades e Maximum , consulte Precauções.

Stepper Define um ValueChanged evento que é gerado quando as Value alterações, por meio da manipulação do usuário do Stepper ou quando o aplicativo define a Value propriedade diretamente. Um ValueChanged evento também é gerado quando a Value propriedade é coagida como descrito anteriormente. O ValueChangedEventArgs objeto que acompanha o ValueChanged evento tem OldValue e NewValue, do tipo double. No momento em que o evento é gerado, o valor de NewValue é o mesmo que a Value propriedade do Stepper objeto.

Criar um Stepper

O exemplo a seguir mostra como criar um Stepper, com dois Label objetos:

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

Neste exemplo, o Stepper é inicializado para ter uma propriedade de 360 e uma Maximum Increment propriedade de 30. A manipulação altera Stepper o valor selecionado incrementalmente entre Minimum para Maximum com base no valor da Increment propriedade. O segundo Label exibe o texto "(não inicializado)" até que o seja manipulado, o que faz com que o Stepper primeiro ValueChanged evento seja gerado.

O arquivo code-behind contém o manipulador para o ValueChanged evento:

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

O ValueChanged manipulador do usa a propriedade do objeto para definir a Rotation Value stepper propriedade do primeiro Label e usa o string.Format método com a propriedade dos argumentos de evento para definir a NewValue Text propriedade do Stepper segundo:Label

.NET MAUI Stepper screenshot.

Também é possível que o manipulador de eventos obtenha o que está disparando o Stepper evento por meio do sender argumento. A Value propriedade contém o valor atual:

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

Se o Stepper objeto recebeu um nome no arquivo XAML com um x:Name atributo (por exemplo, "stepper"), o manipulador de eventos poderia fazer referência a esse objeto diretamente:

double value = stepper.Value;

O código C# equivalente para criar um Stepper é:

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

Os dados vinculam um Stepper

O ValueChanged manipulador de eventos pode ser eliminado usando a vinculação de dados para responder à alteração de Stepper valor:

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

Neste exemplo, a Rotation propriedade do primeiro Label está vinculada à Value propriedade do , assim como a Text propriedade do Steppersegundo Label com uma StringFormat especificação. Quando a página aparece pela primeira vez, a segunda Label exibe a cadeia de texto com o valor. Para exibir texto sem associação de dados, você precisaria inicializar especificamente a Text propriedade do ou simular um disparo do ValueChanged evento chamando o manipulador de eventos do construtor de Label classe.

Precauções

O valor do imóvel deve ser sempre menor que o valor do Minimum Maximum imóvel. O exemplo de código a seguir faz com que o Stepper para gerar uma exceção:

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

O compilador C# gera código que define essas duas propriedades em sequência e, quando a Minimum propriedade é definida como 180, ela é maior que o valor padrão Maximum de 100. Você pode evitar a exceção nesse caso definindo a Maximum propriedade primeiro:

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

Neste exemplo, definir Maximum como 360 não é um problema porque é maior que o valor padrão Minimum de 0. Quando Minimum é definido, o valor é menor que o Maximum valor de 360.

O mesmo problema existe em XAML. Defina as propriedades em uma ordem que garanta que seja sempre maior que Maximum Minimum:

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

Você pode definir os Minimum valores e Maximum para números negativos, mas somente em uma ordem em que Minimum é sempre menor que Maximum:

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

A Value propriedade é sempre maior ou igual ao Minimum valor e menor ou igual a Maximum. Se Value for definido como um valor fora desse intervalo, o valor será coagido a ficar dentro do intervalo, mas nenhuma exceção será gerada. Por exemplo, esse código não gerará uma exceção:

Stepper stepper = new Stepper
{
    Value = 180
};

Em vez disso, a Value propriedade é coagida ao Maximum valor de 100.

Um exemplo anterior definido Maximum como 360 e Minimum 180:

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

Quando Minimum é definido como 180, então Value também é definido como 180.

Se um ValueChanged manipulador de eventos tiver sido anexado no momento em que a propriedade for coagida a Value algo diferente de seu valor padrão de 0, um ValueChanged evento será gerado:

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

Quando Minimum está definido como 180, também é definido como 180, Value e o ValueChanged evento é aumentado. Isso pode ocorrer antes que o restante da página tenha sido construído, e o manipulador pode tentar fazer referência a outros elementos na página que ainda não foram criados. Talvez você queira adicionar algum código ao ValueChanged manipulador que verifica null valores de outros elementos na página. Ou, você pode definir o ValueChanged manipulador de eventos depois que os Stepper valores foram inicializados.