Xamarin.Forms Pasos

Descarga del ejemplo

Use un stepper para seleccionar un valor numérico de un intervalo de valores.

consta Xamarin.FormsStepper de dos botones etiquetados con signos menos y más. El usuario puede manipular estos botones para seleccionar incrementalmente un double valor de un intervalo de valores.

define Stepper cuatro propiedades de tipo double :

• _Stepper_Increment" data-linktype="absolute-path">es la cantidad por la que se va a cambiar el valor seleccionado, con un valor Increment predeterminado de 1.
• Xamarin_Forms _Stepper_Minimum" data-linktype="absolute-path">es el mínimo del intervalo, con un Minimum valor predeterminado de 0.
• Xamarin_Forms _Stepper_Maximum" data-linktype="absolute-path">es el máximo del intervalo, con un valor Maximum predeterminado de 100.
• Xamarin_Forms _Stepper_Value" data-linktype="absolute-path">es el valor del paso a paso, que puede oscilar entre y y tiene un valor predeterminado ValueMinimumMaximum de 0.

Todas estas propiedades están copiadas por BindableProperty objetos . La propiedad Xamarin_Forms _Stepper_Value" data-linktype="absolute-path">tiene un modo de enlace predeterminado de Value Xamarin_Forms Value _BindingMode_TwoWay" data-linktype="absolute-path">, lo que significa que es adecuado como origen de enlace en una aplicación que usa la arquitectura BindingMode.TwoWay

Coacciona la propiedad Stepper Xamarin_Forms Stepper _Stepper_Value" data-linktype="absolute-path">para que esté entre Value Xamarin_Forms _Stepper_Minimum" data-linktype="absolute-path">Minimum y Xamarin_Forms Value _Stepper_Maximum" data-linktype="absolute-path">Maximum , ambos incluidos. Si la Minimum propiedad se establece en un valor mayor que la propiedad , establece la propiedad en ValueStepperValueMinimum . De forma similar, si se establece en un valor menor que , establece MaximumValue la propiedad en StepperValueMaximum .

Stepperdefine un evento que se desencadena cuando cambia el Xamarin_Forms ValueChangedStepper _Stepper_Value" data-linktype="absolute-path">, ya sea mediante la manipulación del usuario de o cuando la aplicación establece la propiedad ValueStepperValue directamente. También ValueChanged se desencadena un evento cuando la propiedad se Value coerci como se describe en el párrafo anterior.

El objeto que acompaña al evento tiene dos propiedades, ambas de tipo ValueChangedEventArgsValueChanged : Xamarin_Forms doubleValueChangedEventArgs _ValueChangedEventArgs_OldValue" data-linktype="absolute-path">y Xamarin_Forms OldValueValueChanged _ValueChangedEventArgs_NewValue" data-linktype="absolute-path">NewValue . En el momento en que se desencadena el evento, el valor de es el mismo que la propiedad NewValue Xamarin_Forms NewValue _Stepper_Value" data-linktype="absolute-path">Value del Stepper objeto .

Código y marcado del paso a paso básico

El ejemplo StepperDemos contiene tres páginas que son funcionalmente idénticas, pero que se implementan de maneras diferentes. La primera página solo usa código C#, la segunda usa XAML con un controlador de eventos en el código y la tercera puede evitar el controlador de eventos mediante el enlace de datos en el archivo XAML.

Creación de un paso a paso en el código

En la página De códigos básico del paso a paso del ejemplo StepperDemos se muestra cómo crear un objeto y dos en el código:

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

se inicializa para tener una propiedad Stepper Xamarin_Forms Stepper _Stepper_Maximum" data-linktype="absolute-path">de 360 y una propiedad Maximum Xamarin_Forms _Stepper_Increment" data-linktype="absolute-path">Increment de 30. Al manipular los cambios, el valor seleccionado cambia incrementalmente entre Stepper Xamarin_Forms Stepper _Stepper_Minimum" data-linktype="absolute-path">MinimumMaximum según Increment el valor de la propiedad . El controlador de utiliza la propiedad Xamarin_Forms _Stepper_Value" data-linktype="absolute-path">del objeto para establecer la propiedad Xamarin_Forms _VisualElement_Rotation" data-linktype="absolute-path">del primero y usa el método con la propiedad de los argumentos de evento para establecer la propiedad ValueChangedStepperValueChangedValuestepper Xamarin_Forms StepperRotationLabelstring.FormatNewValue _Label_Text" data-linktype="absolute-path">TextLabel de la segunda . Estos dos enfoques para obtener el valor actual de Stepper son intercambiables.

En las capturas de pantalla siguientes se muestra la página De códigos del paso a paso básico:

Código básico del programa de paso a

El segundo muestra el texto "(uninitialized)" hasta que se manipula , lo que hace que se desenlame LabelStepper el primer ValueChanged evento.

Creación de un paso a paso en XAML

La página XAML paso a paso básico es funcionalmente la misma que el código de paso a paso básico, pero se implementa principalmente en 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>

El archivo de código subyacente contiene el controlador del 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);
    }
}

También es posible que el controlador de eventos obtenga el que Stepper está activar el evento a través del argumento sender . La Xamarin_Forms _Stepper_Value" data-linktype="absolute-path">Value propiedad contiene el valor actual:

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

Si el objeto tiene un nombre en el archivo XAML con un atributo Stepperx:Name (por ejemplo, "stepper"), el controlador de eventos podría hacer referencia directamente a ese objeto:

double value = stepper.Value;

Enlace de datos del paso a paso

La página Enlaces básicos del paso a paso muestra cómo escribir una aplicación casi equivalente que elimina el controlador de eventos Xamarin_Forms _Stepper_Value" data-linktype="absolute-path">mediante el enlace de datos :

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

La propiedad Xamarin_Forms _VisualElement_Rotation" data-linktype="absolute-path">del primero está enlazada a la propiedad data-linktype="absolute-path">de Xamarin_Forms _Stepper_Value" de , al igual que la propiedad RotationLabel Xamarin_Forms RotationValueStepper _Label_Text" data-linktype="absolute-path">TextLabelStringFormat del segundo con una especificación. La página Enlaces básicos del paso a paso funciona de forma ligeramente diferente a las dos páginas anteriores: cuando la página aparece por primera vez, la segunda muestra la cadena de texto con el valor . Esta es una ventaja de usar el enlace de datos. Para mostrar texto sin enlace de datos, tendría que inicializar específicamente la propiedad de o simular una activación del evento llamando al controlador de eventos desde el TextLabel constructor de ValueChanged clase.

Precauciones

El valor de la propiedad Xamarin_Forms _Stepper_Minimum" data-linktype="absolute-path">siempre debe ser menor que el valor de la propiedad MinimumMinimum Xamarin_Forms _Stepper_Maximum" data-linktype="absolute-path">. Maximum El siguiente fragmento de código hace que Stepper el elemento cause una excepción:

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

El compilador de C# genera código que establece estas dos propiedades en secuencia y, cuando la propiedad data-linktype="absolute-path">de Xamarin_Forms _Stepper_Minimum", se establece en 180, es mayor que el valor predeterminado de Minimum Xamarin_Forms Minimum _Stepper_Maximum" data-linktype="absolute-path">de Maximum 100. Puede evitar la excepción en este caso estableciendo primero Maximum la propiedad :

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

Establecer Xamarin_Forms _Stepper_Maximum" data-linktype="absolute-path">en 360 no es un problema porque es mayor que el valor predeterminado de Xamarin_Forms MaximumMaximum _Stepper_Minimum" data-linktype="absolute-path">Minimum de 0. Cuando Minimum se establece , el valor es menor que el valor de Maximum 360.

El mismo problema existe en XAML. Establezca las propiedades en un orden que garantice que Xamarin_Forms _Stepper_Maximum" data-linktype="absolute-path">Maximum sea siempre mayor que Minimum :

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

Puede establecer los valores de Xamarin_Forms _Stepper_Minimum" data-linktype="absolute-path">Minimum and Xamarin_Forms Minimum _Stepper_Maximum" data-linktype="absolute-path">MaximumMinimumMaximum en números negativos, pero solo en un orden en el que siempre sea menor que :

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

La propiedad Xamarin_Forms _Stepper_Value" data-linktype="absolute-path">siempre es mayor o igual que la propiedad Value Xamarin_Forms Value _Stepper_Minimum" data-linktype="absolute-path">value y menor o igual Minimum que Xamarin_Forms _Stepper_Maximum" data-linktype="absolute-path">Maximum . Si se establece en un valor fuera de ese intervalo, el valor se volverá a establecer dentro del intervalo, pero no se producirá Value ninguna excepción. Por ejemplo, este código no producirá una excepción:

Stepper stepper = new Stepper
{
    Value = 180
};

En su lugar, la propiedad Xamarin_Forms _Stepper_Value" data-linktype="absolute-path">se coaccionó con el valor de Value Xamarin_Forms Value _Stepper_Maximum" data-linktype="absolute-path">de Maximum 100.

Este es un fragmento de código mostrado anteriormente:

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

Cuando Xamarin_Forms _Stepper_Minimum" data-linktype="absolute-path">se establece en Minimum 180, Xamarin_Forms Minimum _Stepper_Value" data-linktype="absolute-path">también se establece Value en 180.

Si se ha adjuntado un controlador de eventos en el momento en que la propiedad ValueChanged Xamarin_Forms ValueChanged _Stepper_Value" data-linktype="absolute-path">se coaccionó a algo distinto de su valor predeterminado Value de 0, ValueChanged se desencadena un evento. Este es un fragmento de código XAML:

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

Cuando Xamarin_Forms _Stepper_Minimum" data-linktype="absolute-path">se establece en Minimum 180, Xamarin_Forms Minimum _Stepper_Value" data-linktype="absolute-path">ValueValueChanged también se establece en 180 y se desencadena el evento. Esto puede ocurrir antes de que se haya construido el resto de la página y el controlador podría intentar hacer referencia a otros elementos de la página que aún no se han creado. Es posible que desee agregar código al controlador ValueChanged que comprueba los valores de otros elementos de la null página. O bien, puede establecer el controlador ValueChanged de eventos una vez Stepper inicializados los valores.

Vínculos relacionados

• Ejemplo de demostraciones paso a paso
• API de paso a paso