Compartir a través de

TimePicker

  • Artículo

La interfaz de usuario de la aplicación multiplataforma de .NET (.NET MAUI) TimePicker invoca el control de selector de tiempo de la plataforma y te permite seleccionar una hora.

TimePicker define las siguientes propiedades:

  • Time de tipo TimeSpan, la hora seleccionada, que tiene como valor predeterminado un TimeSpan de 0. El tipo TimeSpan 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.
  • FontAttributes de tipo FontAttributes, que tiene FontAtributes.Nonecomo valor predeterminado .
  • FontFamily de tipo string, que tiene null como valor 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 objetos BindableProperty, lo que significa que se les pueden aplicar estilos y que las propiedades pueden ser los destinos de los enlaces de datos. La propiedad Time 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 el patrón Model-View-ViewModel (MVVM).

Nota:

TimePicker no incluye un evento para indicar un nuevo valor seleccionado Time. Si necesitas recibir una notificación de esto, puedes agregar un controlador de eventos para el evento PropertyChanged.

Además, TimePicker define un evento TimeSelected, que se genera cuando cambia la hora seleccionada. El objeto TimeChangedEventArgs que acompaña al evento TimeSelected tiene propiedades NewTime y OldTime, que especifican la hora nueva y antigua, respectivamente.

Crear un TimePicker

Cuando se especifica la propiedad Time 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. Los componentes de hora deben estar separados por dos puntos:

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

Si la propiedad BindingContext de TimePicker se establece en una instancia de un modelo de vista que contiene una propiedad de tipo TimeSpan denominada SelectedTime (por ejemplo), puede crear una instancia de TimePicker como esta:

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

En este ejemplo, la propiedad Time se inicializa en la propiedad SelectedTime del modelo de vista. Dado que la propiedad Time tiene un modo de enlace de TwoWay, cada vez que el usuario selecciona se propaga automáticamente al modelo de vista.

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

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

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

TimePicker y diseño

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

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

No obstante, esto no se recomienda. En función del valor de la propiedad Format, las horas seleccionadas pueden requerir distintos anchos de presentación. Por ejemplo, la cadena de formato "T" hace que la vista TimePicker muestre horas 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 puede hacer que la vista TimePicker cambie el ancho en el diseño o que la pantalla se trunque.

Sugerencia

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

Diferencias entre plataformas

En esta sección se describen las diferencias específicas de la plataforma con el control TimePicker.

En Android, el control respeta y muestra la propiedad Format. Sin embargo, cuando se muestra el control de selector presionando en el control, solo se pueden cambiar la hora, el minuto y la hora del día.