Xamarin.Forms TimePicker

  • Artículo
  • 5 minutos para leer

Ejemplo de descarga Descarga del ejemplo

Vista que permite al usuario seleccionar una hora.

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

Todas estas propiedades están copiadas por objetos , lo que significa que se pueden crear estilos, y las propiedades pueden ser destinos BindableProperty de enlaces de datos. La propiedad Xamarin_Forms _TimePicker_Time" data-linktype="absolute-path">tiene un modo de enlace predeterminado de Time Xamarin_Forms Time _BindingMode_TwoWay" data-linktype="absolute-path">, lo que significa que puede ser un destino de un enlace de datos en una aplicación que usa la arquitectura BindingMode.TwoWay

no incluye un evento para indicar un nuevo valor seleccionado Xamarin_Forms TimePickerTimePicker _TimePicker_Time" data-linktype="absolute-path">Time value. 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 propiedad Xamarin_Forms _TimePicker_Time" data-linktype="absolute-path">Time en un valor de tipo TimeSpan :

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

Cuando la propiedad Xamarin_Forms _TimePicker_Time" data-linktype="absolute-path">se especifica en XAML, el valor se convierte en y 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 menor TimeTimeSpan que 24. Los componentes de hora deben estar separados por dos puntos:

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

Si la propiedad Xamarin_Forms _BindableObject_BindingContext" data-linktype="absolute-path">de se establece en una instancia de viewModel que contiene una propiedad de tipo denominada BindingContextTimePickerTimeSpanSelectedTime (por ejemplo), puede crear una instancia de de la siguiente TimePicker forma:

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

En este ejemplo, la propiedad Xamarin_Forms _TimePicker_Time" data-linktype="absolute-path">se inicializa en la propiedad TimeSelectedTime en viewModel. Dado que la propiedad tiene un modo de enlace de Time Xamarin_Forms Time _BindingMode_TwoWay" data-linktype="absolute-path">, cualquier nueva hora que seleccione el usuario se propaga automáticamente al TwoWay modelo de vista.

Si no contiene un enlace en su propiedad TimePicker Xamarin_Forms TimePicker _TimePicker_Time" data-linktype="absolute-path">, una aplicación debe adjuntar un controlador al evento para que se le informe cuando el usuario seleccione una nueva TimePropertyChanged 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 CenterStart , o con EndTimePicker :

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

Sin embargo, esto no se recomienda. Según la configuración de la propiedad Xamarin_Forms _TimePicker_Format" data-linktype="absolute-path">, las horas seleccionadas pueden requerir anchos de pantalla Format diferentes. Por ejemplo, la cadena de formato "T" hace que la vista muestre las horas en un formato largo y "4:15:26 AM" requiere un ancho de presentación mayor que el formato de hora corta TimePicker ("t") de "4:15 AM". Dependiendo de la plataforma, esta diferencia podría hacer que la vista cambiara el ancho del diseño o que la pantalla TimePicker se truncase.

Sugerencia

Es mejor usar la configuración predeterminada de con y no usar un ancho HorizontalOptions de al colocar en una FillTimePickerAutoTimePickerGrid celda.

TimePicker en una aplicación

El ejemplo SetTimer incluye las vistas , y en su Switch página. se puede usar para seleccionar una hora y, cuando se produce esa hora, se muestra un cuadro de diálogo de alerta que recuerda al usuario el texto de , siempre que esté TimePickerEntrySwitch activa. 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>

permite Entry escribir el texto del recordatorio que se mostrará cuando se produzca la hora seleccionada. Se TimePicker asigna una propiedad Xamarin_Forms TimePicker _TimePicker_Format" data-linktype="absolute-path">de Format "T" para el formato de tiempo largo. Tiene un controlador de eventos asociado al evento y tiene PropertyChanged un controlador asociado a su SwitchToggled 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 y el valor devuelto desde DateTime.TodayTimeSpanTimePicker . Esto es necesario porque la DateTime.Today propiedad devuelve un valor que indica la fecha DateTime actual, pero con una hora de medianoche. Si la hora del temporizador ya ha pasado hoy, se supone que será mañana.

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

La primera vez que se ejecuta el ejemplo, TimePicker la vista se inicializa a las 11 a. m. 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:

Seleccionar hora Seleccionar

Sugerencia

En Android, el TimePicker cuadro de diálogo se puede personalizar invalidando el método en un CreateTimePickerDialog 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 :

Time SelectedTime

Siempre que se cambie a la posición on, la aplicación muestra un cuadro de diálogo de alerta que recuerda al usuario el texto de cuando se SwitchEntry produce la hora seleccionada:

Timer Popup

En cuanto se muestra el cuadro de diálogo de alerta, se Switch alterna a la posición desactivada.