Xamarin.Forms TimePicker

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

Appelle Xamarin.FormsTimePicker le contrôle 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, l’heure sélectionnée, qui est par défaut TimeSpan à 0. Le type TimeSpan indique une durée de temps depuis minuit.
• Format de type string, une chaîne de mise en forme .NET standard ou personnalisée, dont la valeur par défaut est « t », le modèle de date courte.
• TextColor de type Color, couleur utilisée pour afficher l’heure sélectionnée, qui est par défaut Color.Default.
• FontAttributes de type FontAttributes, dont la valeur par défaut est FontAtributes.None.
• FontFamily de type string, dont la valeur par défaut est null.
• FontSize de type double, dont la valeur par défaut est -1.0.
• CharacterSpacing, de type double, est l’espacement entre les caractères du texte TimePicker.

Toutes ces propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être personnalisées et ê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).

Le TimePicker n’inclut pas d’événement pour indiquer une nouvelle valeur Time sélectionnée. Si vous devez être informé 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 propriété Time à une valeur de type TimeSpan :

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

Lorsque la propriété Time est spécifiée en XAML, la valeur est convertie en 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 points-virgules :

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

Si la BindingContext propriété de TimePicker ce paramètre est définie sur une instance d’un ViewModel contenant une propriété de type TimeSpan nommé 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 à 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 obtenir plus d’informations sur la définition des propriétés de police, consultez les Polices.

TimePicker et disposition

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

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

Toutefois, ce n’est pas recommandé. Selon le paramètre de la propriété Format, il est possible que les heures sélectionnées nécessitent différentes largeurs d’affichage. 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 d’affichage de la largeur de TimePicker dans la disposition ou une troncation de l’affichage.

Conseil

Il est préférable d’utiliser le paramètre par défaut HorizontalOptions de Fill avec TimePicker et de ne pas utiliser une largeur de Auto lors du placement de TimePicker dans une cellule Grid.

TimePicker dans une application

L’exemple inclut TimePicker, Entryet Switch affiche sur 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 et rappelle à l’utilisateur le texte du Entrytexte, à 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 du 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 le Switch gestionnaire est 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 valeur de la DateTime.Today 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 est coché 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 comme rappel.

Lorsque l’exemple est exécuté pour la première fois, la TimePicker vue est initialisée à 11h00. Appuyez sur les TimePicker appels 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 :

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 :

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

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

Liens connexes

• TimePicker API