Sélecteur d’heure

  • Article

Le sélecteur d’heure offre aux utilisateurs une méthode standard de sélection d’une heure à l’aide d’une entrée tactile, de la souris ou du clavier.

Exemple de sélecteur d’heure

Est-ce le contrôle approprié ?

Utilisez un sélecteur d’heure pour permettre à un utilisateur de sélectionner une valeur d’heure unique.

Pour plus d’informations sur le choix du contrôle approprié, voir l’article Contrôles de date et d’heure.

Exemples

Le point d’entrée affiche l’heure choisie, et lorsque l’utilisateur sélectionne ce point d’entrée, la surface du sélecteur s’agrandit à la verticale à partir du milieu pour que l’utilisateur effectue une sélection. Le sélecteur d’heure se superpose aux autres éléments de l’interface utilisateur ; il ne les ferme pas.

Exemple de développement du sélecteur d’heure

UWP et WinUI 2

Important

Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d'application Windows et WinUI 3, mais qui s’appliquent généralement aux applications UWP qui utilisent WinUI 2. Consultez la référence API de la plateforme Windows universelle pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient les informations dont vous avez besoin pour utiliser le contrôle dans une application de la plateforme Windows universelle ou de WinUI 2.

Les API de ce contrôle existent dans l’espace de noms Windows.UI.Xaml.Controls .

Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles et modèles les plus récents pour tous les contrôles. WinUI 2.2 ou version ultérieure inclut un nouveau modèle pour ce contrôle qui utilise des coins arrondis. Pour plus d’informations, consultez Rayons des angles.

Créer un sélecteur d’heure

Ouvrez l’application Galerie WinUI 3 et voyez timePicker en action.

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Cet exemple indique comment créer un sélecteur d’heure simple avec un en-tête.

<TimePicker x:Name="arrivalTimePicker" Header="Arrival time"/>

TimePicker arrivalTimePicker = new TimePicker();
arrivalTimePicker.Header = "Arrival time";

Le sélecteur d’heure qui en résulte se présente comme suit :

Exemple de sélecteur d’heure

Mise en forme du sélecteur d’heure

Par défaut, le sélecteur d’heure affiche une horloge de 12 heures avec un sélecteur AM/PM. Vous pouvez définir la propriété ClockIdentifier sur « 24HourClock » pour afficher à la place une horloge de 24 heures.

<TimePicker Header="24HourClock" SelectedTime="18:21" ClockIdentifier="24HourClock"/>

Sélecteur d’heure 24 heures.

Vous pouvez définir la propriété MinuteIncrement pour indiquer les incréments de temps affichés dans le sélecteur de minute. Par exemple, 15 spécifie que le contrôle de minute TimePicker affiche seulement les choix 00, 15, 30, 45.

<TimePicker MinuteIncrement="15"/>

Sélecteur d’heure montrant des incréments de 15 minutes.

Valeurs d’heure

Le contrôle de sélecteur d’heure a les API Time/TimeChanged et SelectedTime/SelectedTimeChanged. La différence entre les deux est que Time n’est pas nullable, tandis que SelectedTime est nullable.

La valeur de SelectedTime est utilisée pour remplir le sélecteur d’heure et est null par défaut. Si SelectedTime est null, la propriété Time est définie sur un TimeSpan de 0 ; sinon, la valeur de Time est synchronisée avec la valeur de SelectedTime. Quand SelectedTime est null, le sélecteur est « non défini » et montre les noms des champs au lieu d’une heure.

Un sélecteur d’heure sans heure sélectionnée.

Initialisation d’une valeur d’heure

Dans le code, vous pouvez initialiser les propriétés de l’heure avec une valeur de type TimeSpan :

TimePicker timePicker = new TimePicker
{
    SelectedTime = new TimeSpan(14, 15, 00) // Seconds are ignored.
};

Vous pouvez définir la valeur de l’heure en tant qu’attribut en XAML. C’est probablement plus facile si vous déclarez déjà l'objet TimePicker en XAML et que vous n’utilisez pas de liaisons pour la valeur d’heure. Utilisez une chaîne au format Hh:Mm où Hh est un nombre d’heures et peut être compris entre 0 et 23, et où Mm est un nombre de minutes et peut être compris entre 0 et 59.

<TimePicker SelectedTime="14:15"/>

Notes

Pour obtenir des informations importantes sur les valeurs de date et d’heure, voir Valeurs DateTime et Calendar dans l’article Contrôles de date et d’heure.

Utilisation des valeurs d’heure

Pour utiliser la valeur d’heure dans votre application, vous utilisez généralement une liaison de données à la propriété SelectedTime ou Time, vous utilisez les propriétés de l’heure directement dans votre code, ou vous gérez l’événement SelectedTimeChanged ou TimeChanged.

Pour obtenir un exemple d’utilisation conjointe de DatePicker et de TimePicker pour mettre à jour une valeur DateTime unique, consultez Contrôles de calendrier, de date et d’heure - Utiliser conjointement un sélecteur de date et un sélecteur d’heure.

Ici, la propriété SelectedTime est utilisée pour comparer l’heure sélectionnée à l’heure actuelle.

Notez qu’étant donné que la propriété SelectedTime est nullable, vous devez la caster explicitement en DateTime, comme suit : DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);. La propriété Time peut cependant être utilisée sans cast, comme ceci : DateTime myTime = DateTime.Today + checkTimePicker.Time;.

Un sélecteur d’heure, un bouton et un libellé texte. 

<StackPanel>
    <TimePicker x:Name="checkTimePicker"/>
    <Button Content="Check time" Click="{x:Bind CheckTime}"/>
    <TextBlock x:Name="resultText"/>
</StackPanel>

private void CheckTime()
{
    // Using the Time property.
    // DateTime myTime = DateTime.Today + checkTimePicker.Time;
    // Using the SelectedTime property (nullable requires cast to DateTime).
    DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);
    if (DateTime.Now >= myTime)
    {
        resultText.Text = "Your selected time has already past.";
    }
    else
    {
        string hrs = (myTime - DateTime.Now).Hours.ToString();
        string mins = (myTime - DateTime.Now).Minutes.ToString();
        resultText.Text = string.Format("Your selected time is {0} hours, {1} minutes from now.", hrs, mins);
    }
}

Obtenir l’exemple de code