Xamarin.Forms Timepicker

Das Beispiel herunterladen

Eine Xamarin.Forms Ansicht, die es dem Benutzer ermöglicht, eine Uhrzeit auszuwählen.

Xamarin.FormsTimePicker Ruft das Zeitauswahl-Steuerelement der Plattform auf und ermöglicht es dem Benutzer, eine Uhrzeit auszuwählen. TimePicker definiert die folgenden Eigenschaften:

• Time vom Typ TimeSpan, die ausgewählte Zeit, die standardmäßig auf TimeSpan 0 festgelegt ist. Der TimeSpan Typ gibt eine Dauer seit Mitternacht an.
• Format vom Typ string, eine standardmäßige oder benutzerdefinierte .NET-Formatierungszeichenfolge, die standardmäßig "t" ist, das kurze Zeitmuster.
• TextColor vom Typ Color, die Farbe, die verwendet wird, um die ausgewählte Zeit anzuzeigen, die standardmäßig auf festgelegt ist Color.Default.
• FontAttributes vom Typ FontAttributes, der standardmäßig auf festgelegt ist FontAtributes.None.
• FontFamily vom Typ string, der standardmäßig auf festgelegt ist null.
• FontSize vom Typ double, der standardmäßig auf -1.0 festgelegt ist.
• CharacterSpacing vom Typ double: Abstand zwischen den Zeichen des TimePicker-Texts.

Alle diese Eigenschaften werden von BindableProperty -Objekten unterstützt, was bedeutet, dass sie formatiert werden können, und die Eigenschaften können Ziele von Datenbindungen sein. Die Time -Eigenschaft verfügt über einen Standardbindungsmodus von BindingMode.TwoWay, was bedeutet, dass sie ein Ziel einer Datenbindung in einer Anwendung sein kann, die die MVVM-Architektur (Model-View-ViewModel) verwendet.

Enthält TimePicker kein Ereignis, das einen neuen ausgewählten Time Wert angibt. Wenn Sie darüber benachrichtigt werden müssen, können Sie einen Handler für das PropertyChanged Ereignis hinzufügen.

Initialisieren der Time-Eigenschaft

Im Code können Sie die Time Eigenschaft mit einem Wert vom Typ TimeSpaninitialisieren:

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

Wenn die Time -Eigenschaft in XAML angegeben wird, wird der Wert in eine TimeSpan konvertiert und überprüft, um sicherzustellen, dass die Anzahl der Millisekunden größer oder gleich 0 ist und dass die Anzahl der Stunden kleiner als 24 ist. Die Zeitkomponenten sollten durch Doppelpunkte getrennt werden:

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

Wenn die BindingContext -Eigenschaft von TimePicker auf eine instance eines ViewModel-Objekts festgelegt ist, das z. B. eine Eigenschaft vom Typ TimeSpan namens SelectedTime enthält, können Sie die TimePicker wie folgt instanziieren:

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

In diesem Beispiel wird die Time -Eigenschaft mit der SelectedTime -Eigenschaft in ViewModel initialisiert. Da die Time -Eigenschaft über den Bindungsmodus verfügt TwoWay, wird jedes neue Mal, das der Benutzer auswählt, automatisch an viewModel weitergegeben.

Wenn die TimePicker -Eigenschaft keine Bindung Time enthält, sollte eine Anwendung einen Handler an das PropertyChanged Ereignis anfügen, um informiert zu werden, wenn der Benutzer einen neuen Zeitpunkt auswählt.

Informationen zum Festlegen von Schriftarteigenschaften finden Sie unter Schriftarten.

TimePicker und Layout

Es ist möglich, eine uneingeschränkte horizontale Layoutoption wie Center, Startoder End mit TimePickerzu verwenden:

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

Dies ist wird jedoch nicht empfohlen. Abhängig von der Einstellung der Format Eigenschaft erfordern ausgewählte Zeiten möglicherweise unterschiedliche Anzeigebreiten. Beispielsweise bewirkt die Formatzeichenfolge "T", dass die TimePicker Ansicht Die Zeiten in einem langen Format anzeigt, und "4:15:26 AM" erfordert eine größere Anzeigebreite als das kurze Zeitformat ("t") von "4:15 AM". Je nach Plattform kann dieser Unterschied dazu führen, dass die TimePicker Ansicht die Breite im Layout ändert oder dass die Anzeige abgeschnitten wird.

Tipp

Es empfiehlt sich, die Standardeinstellung HorizontalOptions von Fill mit TimePickerzu verwenden und beim Einfügen TimePicker in eine Grid Zelle nicht die Breite von Auto zu verwenden.

TimePicker in einer Anwendung

Das SetTimer-Beispiel enthält TimePickerdie Ansichten , Entryund Switch auf der Seite. Kann TimePicker verwendet werden, um eine Uhrzeit auszuwählen, und wenn diese Zeit eintritt, wird ein Warnungsdialogfeld angezeigt, das den Benutzer an den Text in Entryder erinnert, sofern aktiviert Switch ist. Dies ist die XAML-Datei:

<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>

Mit Entry können Sie Erinnerungstext eingeben, der angezeigt wird, wenn der ausgewählte Zeitpunkt eintritt. Dem TimePicker wird die Format Eigenschaft "T" für ein langes Zeitformat zugewiesen. An das Ereignis ist ein Ereignishandler angefügt, und an das PropertyChangedSwitch -Ereignis ist ein Handler angefügt Toggled . Diese Ereignishandler befinden sich in der CodeBehind-Datei und rufen die SetTriggerTime -Methode auf:

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

Die SetTriggerTime -Methode berechnet eine Timerzeit basierend auf dem DateTime.Today -Eigenschaftswert und dem wert, der TimeSpanTimePickervon zurückgegeben wird. Dies ist erforderlich, da die DateTime.Today -Eigenschaft ein DateTime zurückgibt, das das aktuelle Datum angibt, aber mit einer Uhrzeit von Mitternacht. Wenn die Timerzeit bereits heute vergangen ist, wird angenommen, dass es morgen ist.

Der Timer tickt jede Sekunde und führt die Methode aus, die OnTimerTick überprüft, ob aktiviert Switch ist und ob die aktuelle Zeit größer oder gleich der Timerzeit ist. Wenn die Timerzeit eintritt, zeigt die DisplayAlert -Methode dem Benutzer ein Warnungsdialogfeld als Erinnerung an.

Wenn das Beispiel zum ersten Mal ausgeführt wird, wird die TimePicker Ansicht auf 11:00 Uhr initialisiert. Durch Tippen auf TimePicker wird die Plattformzeitauswahl aufgerufen. Die Plattformen implementieren die Zeitauswahl auf sehr unterschiedliche Weise, aber jeder Ansatz ist den Benutzern dieser Plattform vertraut:

Tipp

Unter Android kann das TimePicker Dialogfeld angepasst werden, indem die CreateTimePickerDialog -Methode in einem benutzerdefinierten Renderer überschrieben wird. Dadurch können dem Dialogfeld beispielsweise zusätzliche Schaltflächen hinzugefügt werden.

Nachdem Sie eine Zeit ausgewählt haben, wird die ausgewählte Zeit in der TimePickerangezeigt:

Vorausgesetzt, dass auf Switch die Position on umgeschaltet wird, zeigt die Anwendung ein Warnungsdialogfeld an, das den Benutzer an den Text in der Entry erinnert, wenn der ausgewählte Zeitpunkt eintritt:

Sobald das Warnungsdialogfeld angezeigt wird, wird auf Switch die Off-Position umgeschaltet.

Verwandte Links

• SetTimer-Beispiel
• TimePicker-API