Xamarin.Forms TimePicker

  • Article

Download Sample Télécharger l’exemple

Vue Xamarin.Forms qui permet à l’utilisateur de sélectionner une heure.

Appelle Xamarin.FormsTimePicker le contrôle de sélecteur de temps de la plateforme et permet à l’utilisateur de sélectionner une heure. TimePicker définit les propriétés suivantes :

  • Time de type TimeSpan, heure sélectionnée, qui est par défaut de TimeSpan 0. Le TimeSpan type indique une durée de temps depuis minuit.
  • Format de type string, chaîne de mise en forme .NET standard ou personnalisée , qui prend par défaut la valeur « t », le modèle de temps court.
  • TextColor de type Color, couleur utilisée pour afficher l’heure sélectionnée, qui est Color.Defaultpar défaut .
  • FontAttributes de type FontAttributes, qui a la FontAtributes.Nonevaleur par défaut .
  • FontFamily de type string, qui a la nullvaleur par défaut .
  • FontSize de type double, qui est défini par défaut sur -1.0.
  • CharacterSpacing, de type double, est l’espacement entre les caractères du TimePicker texte.

Toutes ces propriétés sont sauvegardées par BindableProperty des objets, ce qui signifie qu’elles peuvent être mises en forme et que les propriétés peuvent être des cibles de liaisons de données. La Time propriété a un mode de liaison par défaut , BindingMode.TwoWayce qui signifie qu’elle peut être une cible d’une liaison de données dans une application qui utilise l’architecture Model-View-ViewModel (MVVM).

Il TimePicker n’inclut pas d’événement pour indiquer une nouvelle valeur sélectionnée Time . Si vous devez être averti de cela, vous pouvez ajouter un gestionnaire pour l’événement PropertyChanged .

Initialisation de la propriété Time

Dans le code, vous pouvez initialiser la Time propriété en une valeur de type TimeSpan:

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

Lorsque la Time propriété est spécifiée en XAML, la valeur est convertie en valeur TimeSpan et validée pour s’assurer que le nombre de millisecondes est supérieur ou égal à 0, et que le nombre d’heures est inférieur à 24. Les composants de temps doivent être séparés par des deux-points :

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

Si la BindingContext propriété de TimePicker cette propriété est définie sur une instance d’un ViewModel contenant une propriété de type TimeSpan nommée SelectedTime (par exemple), vous pouvez instancier ce TimePicker qui suit :

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

Dans cet exemple, la Time propriété est initialisée dans la SelectedTime propriété dans ViewModel. Étant donné que la Time propriété a un mode de TwoWayliaison , toute nouvelle fois que l’utilisateur sélectionne est automatiquement propagée au ViewModel.

Si elle TimePicker ne contient pas de liaison sur sa Time propriété, une application doit attacher un gestionnaire à l’événement PropertyChanged pour être informée lorsque l’utilisateur sélectionne une nouvelle heure.

Pour plus d’informations sur la définition des propriétés de police, consultez Polices.

TimePicker et disposition

Il est possible d’utiliser une option de disposition horizontale non contrainte telle que Center, Startou End avec TimePicker:

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

Toutefois, cela n’est pas recommandé. Selon la définition de la Format propriété, les heures sélectionnées peuvent nécessiter des largeurs d’affichage différentes. Par exemple, la chaîne de format « T » entraîne l’affichage TimePicker des heures d’affichage dans un format long et « 4:15:26 AM » nécessite une largeur d’affichage supérieure au format de temps court (« t ») de « 4:15 AM ». Selon la plateforme, cette différence peut entraîner la modification de la largeur de la TimePicker vue dans la disposition ou de la troncation de l’affichage.

Conseil

Il est préférable d’utiliser le paramètre par défaut HorizontalOptions avec TimePickerFill , et de ne pas utiliser une largeur de lors de Auto la saisie TimePicker d’une Grid cellule.

TimePicker dans une application

L’exemple SetTimer inclut TimePicker, Entryet Switch les vues de sa page. Vous TimePicker pouvez l’utiliser pour sélectionner une heure, et lorsque cette heure se produit, une boîte de dialogue d’alerte s’affiche qui rappelle à l’utilisateur le texte dans le Entry, à condition que celui-ci Switch soit activé. Voici le fichier 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>

Vous Entry pouvez entrer le texte de rappel qui s’affiche lorsque l’heure sélectionnée se produit. La TimePicker propriété « T » est affectée Format pour un format de temps long. Il dispose d’un gestionnaire d’événements attaché à l’événement PropertyChanged et d’un Switch gestionnaire attaché à son Toggled événement. Ces gestionnaires d’événements se trouvent dans le fichier code-behind et appellent la SetTriggerTime méthode :

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);
            }
        }
    }
}

La SetTriggerTime méthode calcule une heure du minuteur en fonction de la DateTime.Today valeur de propriété et de la TimeSpan valeur retournée par le TimePicker. Cela est nécessaire, car la DateTime.Today propriété retourne une DateTime indication de la date actuelle, mais avec une heure de minuit. Si le temps du minuteur est déjà passé aujourd’hui, il est supposé être demain.

Le minuteur passe toutes les secondes, en exécutant la OnTimerTick méthode qui vérifie si l’heure Switch est activée et si l’heure actuelle est supérieure ou égale au temps du minuteur. Lorsque le temps du minuteur se produit, la DisplayAlert méthode présente une boîte de dialogue d’alerte à l’utilisateur en tant que rappel.

Lorsque l’exemple est exécuté pour la première fois, la TimePicker vue est initialisée à 11 heures. Appuyez sur l’appel TimePicker du sélecteur de temps de plateforme. Les plateformes implémentent le sélecteur de temps de manière très différente, mais chaque approche est familière aux utilisateurs de cette plateforme :

Select Time

Conseil

Sur Android, la TimePicker boîte de dialogue peut être personnalisée en remplaçant la CreateTimePickerDialog méthode dans un renderer personnalisé. Cela permet, par exemple, d’ajouter des boutons supplémentaires à la boîte de dialogue.

Après avoir sélectionné une heure, l’heure sélectionnée s’affiche dans les TimePickeréléments suivants :

Time Selected

À condition qu’elle Switch soit basculée sur la position, l’application affiche une boîte de dialogue d’alerte rappelant à l’utilisateur le texte du Entry moment où l’heure sélectionnée se produit :

Timer Popup

Dès que la boîte de dialogue d’alerte s’affiche, elle Switch est basculée vers la position désactivée.