Xamarin.FormsTimePicker TimePicker

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Una Xamarin.Forms vista que permite al usuario seleccionar una hora.A Xamarin.Forms view that allows the user to select a time.

Xamarin.Forms TimePicker Invoca el control de selector de tiempo de la plataforma y permite al usuario seleccionar una hora.The Xamarin.Forms TimePicker invokes the platform's time-picker control and allows the user to select a time. TimePicker define las siguientes propiedades:TimePicker defines the following properties:

  • Timede tipo TimeSpan , la hora seleccionada, cuyo valor predeterminado es TimeSpan 0.Time of type TimeSpan, the selected time, which defaults to a TimeSpan of 0. El TimeSpan tipo indica una duración de tiempo desde la medianoche.The TimeSpan type indicates a duration of time since midnight.
  • Formatde tipo string , una cadena de formato .net estándar o personalizada , cuyo valor predeterminado es "t", el patrón de hora corta.Format of type string, a standard or custom .NET formatting string, which defaults to "t", the short time pattern.
  • TextColorde tipo Color , el color que se usa para mostrar la hora seleccionada, cuyo valor predeterminado es Color.Default .TextColor of type Color, the color used to display the selected time, which defaults to Color.Default.
  • FontAttributesde tipo FontAttributes , cuyo valor predeterminado es FontAtributes.None .FontAttributes of type FontAttributes, which defaults to FontAtributes.None.
  • FontFamilyde tipo string , cuyo valor predeterminado es null .FontFamily of type string, which defaults to null.
  • FontSizede tipo double , que tiene como valor predeterminado-1,0.FontSize of type double, which defaults to -1.0.
  • CharacterSpacing, del tipo double, es el espaciado entre los caracteres del texto de TimePicker.CharacterSpacing, of type double, is the spacing between characters of the TimePicker text.

Todas estas propiedades están respaldadas por BindableProperty objetos, lo que significa que se pueden aplicar estilos y las propiedades pueden ser destinos de los enlaces de datos.All of these properties are backed by BindableProperty objects, which means that they can be styled, and the properties can be targets of data bindings. La Time propiedad tiene un modo de enlace predeterminado de BindingMode.TwoWay , lo que significa que puede ser un destino de un enlace de datos en una aplicación que usa la arquitectura Model-View-ViewModel (MVVM) .The Time property has a default binding mode of BindingMode.TwoWay, which means that it can be a target of a data binding in an application that uses the Model-View-ViewModel (MVVM) architecture.

TimePickerNo incluye un evento para indicar un nuevo valor seleccionado Time .The TimePicker doesn't include an event to indicate a new selected Time value. Si necesita recibir una notificación de esto, puede Agregar un controlador para el PropertyChanged evento.If you need to be notified of this, you can add a handler for the PropertyChanged event.

Inicializando la propiedad TimeInitializing the Time property

En el código, puede inicializar la Time propiedad en un valor de tipo TimeSpan :In code, you can initialize the Time property to a value of type TimeSpan:

TimePicker timePicker = new TimePicker
{
  Time = new TimeSpan(4, 15, 26) // Time set to "04:15:26"
};

Cuando la Time propiedad se especifica en XAML, el valor se convierte en TimeSpan y se valida para asegurarse de que el número de milisegundos sea mayor o igual que 0 y que el número de horas sea menor que 24.When the Time property is specified in XAML, the value is converted to a TimeSpan and validated to ensure that the number of milliseconds is greater than or equal to 0, and that the number of hours is less than 24. Los componentes de hora deben separarse con dos puntos:The time components should be separated by colons:

<TimePicker Time="4:15:26" />

Si la BindingContext propiedad de TimePicker se establece en una instancia de un ViewModel que contiene una propiedad de tipo TimeSpan denominada SelectedTime (por ejemplo,), puede crear una instancia de de la TimePicker manera siguiente:If the BindingContext property of TimePicker is set to an instance of a ViewModel containing a property of type TimeSpan named SelectedTime (for example), you can instantiate the TimePicker like this:

<TimePicker Time="{Binding SelectedTime}" />

En este ejemplo, la Time propiedad se inicializa en la SelectedTime propiedad en el ViewModel.In this example, the Time property is initialized to the SelectedTime property in the ViewModel. Dado Time que la propiedad tiene un modo de enlace de TwoWay , cualquier nueva hora que seleccione el usuario se propagará automáticamente al ViewModel.Because the Time property has a binding mode of TwoWay, any new time that the user selects is automatically propagated to the ViewModel.

Si no TimePicker contiene un enlace en su Time propiedad, una aplicación debe adjuntar un controlador al PropertyChanged evento que se va a notificar cuando el usuario seleccione una nueva hora.If the TimePicker does not contain a binding on its Time property, an application should attach a handler to the PropertyChanged event to be informed when the user selects a new time.

Para obtener información sobre cómo establecer las propiedades de la fuente, vea fuentes.For information about setting font properties, see Fonts.

TimePicker y diseñoTimePicker and layout

Es posible utilizar una opción de diseño horizontal sin restricciones como Center , Start o End con TimePicker :It's possible to use an unconstrained horizontal layout option such as Center, Start, or End with TimePicker:

<TimePicker ···
            HorizontalOptions="Center"
            ··· />

Sin embargo, esto no es recomendable.However, this is not recommended. Dependiendo del valor de la Format propiedad, las horas seleccionadas pueden requerir anchos de pantalla diferentes.Depending on the setting of the Format property, selected times might require different display widths. Por ejemplo, la cadena de formato "T" hace que la TimePicker vista muestre horas en un formato largo y "4:15:26 AM" requiere un ancho de pantalla mayor que el formato de hora corta ("T") de "4:15 AM".For example, the "T" format string causes the TimePicker view to display times in a long format, and "4:15:26 AM" requires a greater display width than the short time format ("t") of "4:15 AM". Dependiendo de la plataforma, esta diferencia podría hacer que la TimePicker vista cambie el ancho en el diseño o que la pantalla se trunque.Depending on the platform, this difference might cause the TimePicker view to change width in layout, or for the display to be truncated.

Sugerencia

Es preferible usar la configuración predeterminada HorizontalOptions de Fill con TimePicker y no utilizar un ancho Auto cuando se coloca TimePicker en una Grid celda.It's best to use the default HorizontalOptions setting of Fill with TimePicker, and not to use a width of Auto when putting TimePicker in a Grid cell.

TimePicker en una aplicaciónTimePicker in an application

En el ejemplo SetTimer se incluyen las TimePicker Entry vistas, y Switch en su página.The SetTimer sample includes TimePicker, Entry, and Switch views on its page. Se TimePicker puede usar para seleccionar una hora y, cuando esa hora se produce, se muestra un cuadro de diálogo de alerta que recuerda al usuario del texto de Entry , siempre y cuando Switch se alterne.The TimePicker can be used to select a time, and when that time occurs an alert dialog is displayed that reminds the user of the text in the Entry, provided the Switch is toggled on. Este es el archivo XAML:Here's the XAML file:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SetTimer"
             x:Class="SetTimer.MainPage">
    <StackLayout>
        ...
        <Entry x:Name="_entry"
               Placeholder="Enter event to be reminded of" />
        <Label Text="Select the time below to be reminded at." />
        <TimePicker x:Name="_timePicker"
                    Time="11:00:00"
                    Format="T"
                    PropertyChanged="OnTimePickerPropertyChanged" />
        <StackLayout Orientation="Horizontal">
            <Label Text="Enable timer:" />
            <Switch x:Name="_switch"
                    HorizontalOptions="EndAndExpand"
                    Toggled="OnSwitchToggled" />
        </StackLayout>
    </StackLayout>
</ContentPage>

EntryPermite escribir el texto del recordatorio que se mostrará cuando se produzca la hora seleccionada.The Entry lets you enter reminder text that will be displayed when the selected time occurs. TimePickerSe le asigna una Format propiedad de "T" para el formato de hora larga.The TimePicker is assigned a Format property of "T" for long time format. Tiene un controlador de eventos adjuntado al PropertyChanged evento y Switch tiene un controlador asociado a su Toggled evento.It has an event handler attached to the PropertyChanged event, and the Switch has a handler attached to its Toggled event. Estos controladores de eventos se encuentran en el archivo de código subyacente y llaman al SetTriggerTime método:These events handlers are in the code-behind file and call the SetTriggerTime method:

public partial class MainPage : ContentPage
{
    DateTime _triggerTime;

    public MainPage()
    {
        InitializeComponent();

        Device.StartTimer(TimeSpan.FromSeconds(1), OnTimerTick);
    }

    bool OnTimerTick()
    {
        if (_switch.IsToggled && DateTime.Now >= _triggerTime)
        {
            _switch.IsToggled = false;
            DisplayAlert("Timer Alert", "The '" + _entry.Text + "' timer has elapsed", "OK");
        }
        return true;
    }

    void OnTimePickerPropertyChanged(object sender, PropertyChangedEventArgs args)
    {
        if (args.PropertyName == "Time")
        {
            SetTriggerTime();
        }
    }

    void OnSwitchToggled(object sender, ToggledEventArgs args)
    {
        SetTriggerTime();
    }

    void SetTriggerTime()
    {
        if (_switch.IsToggled)
        {
            _triggerTime = DateTime.Today + _timePicker.Time;
            if (_triggerTime < DateTime.Now)
            {
                _triggerTime += TimeSpan.FromDays(1);
            }
        }
    }
}

El SetTriggerTime método calcula un tiempo de temporizador basado en el DateTime.Today valor de propiedad y el TimeSpan valor devuelto de TimePicker .The SetTriggerTime method calculates a timer time based on the DateTime.Today property value and the TimeSpan value returned from the TimePicker. Esto es necesario porque la DateTime.Today propiedad devuelve un DateTime que indica la fecha actual, pero con una hora de medianoche.This is necessary because the DateTime.Today property returns a DateTime indicating the current date, but with a time of midnight. Si el tiempo del temporizador ya se ha pasado hoy, se supone que es mañana.If the timer time has already passed today, then it's assumed to be tomorrow.

El temporizador se marca cada segundo, ejecutando el OnTimerTick método que comprueba si Switch está activado y si la hora actual es mayor o igual que el tiempo del temporizador.The timer ticks every second, executing the OnTimerTick method that checks whether the Switch is on and whether the current time is greater than or equal to the timer time. Cuando se produce la hora del temporizador, el DisplayAlert método presenta un cuadro de diálogo de alerta al usuario como recordatorio.When the timer time occurs, the DisplayAlert method presents an alert dialog to the user as a reminder.

Cuando el ejemplo se ejecuta por primera vez, la TimePicker vista se inicializa en 11.When the sample is first run, the TimePicker view is initialized to 11am. Al pulsar el se TimePicker invoca el selector de tiempo de plataforma.Tapping the TimePicker invokes the platform time picker. Las plataformas implementan el selector de tiempo de maneras muy diferentes, pero cada enfoque es familiar para los usuarios de esa plataforma:The platforms implement the time picker in very different ways, but each approach is familiar to users of that platform:

Seleccionar horaSelect Time

Sugerencia

En Android, el TimePicker cuadro de diálogo se puede personalizar invalidando el CreateTimePickerDialog método en un representador personalizado.On Android, the TimePicker dialog can be customized by overriding the CreateTimePickerDialog method in a custom renderer. Esto permite, por ejemplo, agregar botones adicionales al cuadro de diálogo.This allows, for example, additional buttons to be added to the dialog.

Después de seleccionar una hora, la hora seleccionada se muestra en la TimePicker :After selecting a time, the selected time is displayed in the TimePicker:

Hora seleccionadaTime Selected

Siempre que el Switch se alterne a la posición activada, la aplicación muestra un cuadro de diálogo de alerta que recuerda al usuario del texto de Entry cuando se produce la hora seleccionada:Provided that the Switch is toggled to the on position, the application displays an alert dialog reminding the user of the text in the Entry when the selected time occurs:

Cuadro emergente del temporizadorTimer Popup

En cuanto se muestra el cuadro de diálogo de alerta, el Switch se cambia a la posición de apagado.As soon as the alert dialog is displayed, the Switch is toggled to the off position.