Xamarin.Forms TimePicker

Descargar el ejemplo

Vista Xamarin.Forms que permite al usuario seleccionar una hora.

Xamarin.FormsTimePicker invoca el control de selector de tiempo de la plataforma y permite al usuario seleccionar una hora. TimePicker define las siguientes propiedades:

• Time de tipo TimeSpan, la hora seleccionada, que tiene como valor predeterminado un TimeSpan valor de 0. El TimeSpan tipo indica una duración de tiempo desde la medianoche.
• Format de tipo string, una cadena de formato de .NET estándar o personalizada , que tiene como valor predeterminado "t", el patrón de tiempo corto.
• TextColor de tipo Color, el color usado para mostrar la hora seleccionada, que tiene Color.Defaultcomo valor predeterminado .
• FontAttributes de tipo FontAttributes, que tiene como FontAtributes.Nonevalor predeterminado .
• FontFamily de tipo string, que tiene como nullvalor predeterminado .
• FontSize de tipo double, que tiene como valor predeterminado -1.0.
• CharacterSpacing, del tipo double, es el espaciado entre los caracteres del texto de TimePicker.

Todas estas propiedades están respaldadas por BindableProperty objetos, lo que significa que se pueden aplicar estilos y las propiedades pueden ser destinos de enlaces de datos. 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).

TimePicker no incluye un evento para indicar un nuevo valor seleccionadoTime. Si necesita recibir una notificación de esto, puede agregar un controlador para el PropertyChanged evento.

Inicialización de la propiedad Time

En el código, puede inicializar la Time propiedad en un valor de tipo TimeSpan:

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

Cuando se especifica la Time propiedad en XAML, el valor se convierte en y TimeSpan se valida para asegurarse de que el número de milisegundos es mayor o igual que 0 y que el número de horas es inferior a 24. Los componentes de hora deben estar separados por dos puntos:

<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 como TimePicker esta:

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

En este ejemplo, la Time propiedad se inicializa en la SelectedTime propiedad de ViewModel. Dado que la Time propiedad tiene un modo de enlace de TwoWay, cualquier nueva vez que el usuario seleccione se propaga automáticamente al ViewModel.

TimePicker Si no contiene un enlace en su Time propiedad, una aplicación debe adjuntar un controlador al PropertyChanged evento que se informará cuando el usuario seleccione una nueva hora.

Para obtener información sobre cómo establecer las propiedades de fuente, vea Fuentes.

TimePicker y diseño

Es posible usar una opción de diseño horizontal sin restricciones, como Center, Starto End con TimePicker:

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

Sin embargo, esto no se recomienda. Dependiendo de la configuración de la Format propiedad, las horas seleccionadas pueden requerir distintos anchos de pantalla. Por ejemplo, la cadena de formato "T" hace que la TimePicker vista muestre tiempos en un formato largo y "4:15:26 AM" requiere un ancho de pantalla mayor que el formato de tiempo corto ("t") de "4:15 AM". Dependiendo de la plataforma, esta diferencia podría hacer que la vista cambie el TimePicker ancho en el diseño o para que se trunque la pantalla.

Sugerencia

Es mejor usar la configuración predeterminada HorizontalOptions de Fill con TimePickery no usar un ancho de Auto al colocar TimePicker en una Grid celda.

TimePicker en una aplicación

El ejemplo SetTimer incluye TimePickerlas vistas , Entryy Switch en su página. TimePicker se puede usar para seleccionar una hora y, cuando se produce ese tiempo, se muestra un cuadro de diálogo de alerta que recuerda al usuario del texto de Entry, siempre que se active el Switch control . Este es el archivo XAML:

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

Entry Permite escribir texto de recordatorio que se mostrará cuando se produzca la hora seleccionada. TimePicker Se le asigna una Format propiedad de "T" durante mucho tiempo. Tiene un controlador de eventos asociado al PropertyChanged evento y Switch tiene un controlador asociado a su Toggled evento. Estos controladores de eventos están en el archivo de código subyacente y llaman al SetTriggerTime método :

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 valor de propiedad DateTime.Today y el TimeSpan valor devuelto de TimePicker. Esto es necesario porque la DateTime.Today propiedad devuelve un DateTime valor que indica la fecha actual, pero con una hora de medianoche. Si el tiempo del temporizador ya ha pasado hoy, se supone que será mañana.

El temporizador marca cada segundo, ejecutando el OnTimerTick método que comprueba si Switch está activado y si la hora actual es mayor o igual que la hora del temporizador. Cuando se produce la hora del temporizador, el DisplayAlert método presenta un cuadro de diálogo de alerta al usuario como recordatorio.

Cuando se ejecuta el ejemplo por primera vez, la TimePicker vista se inicializa a las 11:00. Al pulsar , TimePicker se invoca el selector de hora de la plataforma. Las plataformas implementan el selector de hora de maneras muy diferentes, pero cada enfoque es familiar para los usuarios de esa plataforma:

Sugerencia

En Android, el TimePicker cuadro de diálogo se puede personalizar invalidando el CreateTimePickerDialog método en un representador personalizado. Esto permite, por ejemplo, agregar botones adicionales al cuadro de diálogo.

Después de seleccionar una hora, la hora seleccionada se muestra en :TimePicker

Siempre que 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 en el Entry que se produce la hora seleccionada:

Tan pronto como se muestre el cuadro de diálogo de alerta, Switch se alterna a la posición desactivada.

Vínculos relacionados

• Ejemplo setTimer
• TimePicker API