Compartilhar via

TimePicker

  • Artigo

O .NET MAUI (.NET Multi-platform App UI) TimePicker invoca o controle seletor de hora da plataforma e permite selecionar um horário.

TimePicker define as propriedades a seguir:

  • Time do tipo TimeSpan, o horário selecionado, cujo padrão é um TimeSpan de 0. O tipo TimeSpan indica uma duração de tempo desde a meia-noite.
  • Format do tipo string, uma cadeia de caracteres de formatação padrão ou personalizada .NET, cujo padrão é "t", o padrão de hora abreviada.
  • TextColor do tipo Color, a cor usada para exibir a hora selecionada.
  • FontAttributes do tipo FontAttributes, cujo padrão é FontAtributes.None.
  • FontFamily do tipo string, cujo padrão é null.
  • FontSize do tipo double, cujo padrão é -1,0.
  • CharacterSpacing, do tipo double é o espaçamento entre os caracteres do TimePicker texto.

Todas essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser estilizadas e que podem ser destinos de vinculações de dados. A propriedade Time possui um modo de ligação padrão BindingMode.TwoWay, o que significa que ela pode ser um destino de uma ligação de dados em um aplicativo que usa o padrão Model-View-ViewModel (MVVM).

Observação

O TimePicker não inclui um evento para indicar um novo valor Time selecionado. Se precisar receber uma notificação sobre isso, poderá adicionar um manipulador de eventos para o evento PropertyChanged.

Além disso, TimePicker define um evento TimeSelected, que é gerado quando o horário selecionado muda. O objeto TimeChangedEventArgs que acompanha o evento TimeSelected possui as propriedades NewTime e OldTime, que especificam o horário novo e o antigo, respectivamente.

Criar um TimePicker

Quando a propriedade Time é especificada em XAML, o valor é convertido para TimeSpan e validado para garantir que o número de milissegundos seja maior ou igual a 0 e que o número de horas seja menor que 24. Os componentes de tempo devem ser separados por dois pontos:

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

Se a propriedade BindingContext de TimePicker for definida como uma instância de um viewmodel contendo uma propriedade do tipo TimeSpan nomeada SelectedTime (por exemplo), você poderá criar uma instância do TimePicker da seguinte forma:

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

Nesse exemplo, a propriedade Time é inicializada na propriedade SelectedTime do viewmodel. Como a propriedade Time tem um modo de vinculação de TwoWay, qualquer novo horário selecionado é propagado automaticamente para o viewmodel.

No código, você pode inicializar a propriedade Time para um valor de tipo TimeSpan:

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

Para obter informações sobre como definir propriedades de fonte, veja Fontes.

TimePicker e layout

É possível usar uma opção de layout horizontal irrestrita, como Center, Startou End com TimePicker:

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

No entanto, isso não é recomendado. Dependendo da configuração da propriedade Format, os horários selecionados podem exigir larguras de exibição diferentes. Por exemplo, a cadeia de caracteres de formato "T" faz com que TimePicker exiba os horários em um formato longo e "4:15:26 AM" requer uma largura de exibição maior do que o formato de hora abreviado ("t") de "4:15 AM". Dependendo da plataforma, essa diferença pode fazer com que a visualização TimePicker mude de largura no layout ou que a exibição fique truncada.

Dica

É melhor usar a configuração padrão HorizontalOptions de Fill com TimePicker e não usar uma largura de Auto ao colocar TimePicker em uma Grid célula.

Diferenças de plataforma

Esta seção descreve as diferenças específicas de plataforma do controle TimePicker.

No Android, a propriedade Format é respeitada e exibida pelo controle. No entanto, quando o controle do seletor é exibido ao ser selecionado no controle, apenas a hora, o minuto e a hora do dia podem ser alterados.