Xamarin.Forms TimePicker

  • Artykuł

Download Sample Pobieranie przykładu

Xamarin.Forms Widok, który umożliwia użytkownikowi wybranie godziny.

Element Xamarin.FormsTimePicker wywołuje kontrolkę selektora czasu platformy i umożliwia użytkownikowi wybranie godziny. TimePicker definiuje następujące właściwości:

  • Time typu TimeSpan, wybrana godzina, która jest domyślnie ustawiona TimeSpan na wartość 0. Typ TimeSpan wskazuje czas trwania od północy.
  • Format typu string, standardowy lub niestandardowy ciąg formatowania .NET, który domyślnie to "t", wzorzec krótkiego czasu.
  • TextColor typu Color, kolor używany do wyświetlania wybranego czasu, który domyślnie ma wartość Color.Default.
  • FontAttributes typu FontAttributes, który domyślnie ma wartość FontAtributes.None.
  • FontFamily typu string, który domyślnie ma wartość null.
  • FontSize typu double, który domyślnie ma wartość -1.0.
  • CharacterSpacing, typu double, to odstęp między znakami TimePicker tekstu.

Wszystkie te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że można je stylizować, a właściwości mogą być obiektami docelowymi powiązań danych. Właściwość Time ma domyślny tryb BindingMode.TwoWaypowiązania , co oznacza, że może być elementem docelowym powiązania danych w aplikacji korzystającej z architektury Model-View-ViewModel (MVVM ).

Element TimePicker nie zawiera zdarzenia wskazującego nową wybraną Time wartość. Jeśli musisz otrzymywać powiadomienia o tym, możesz dodać procedurę obsługi dla PropertyChanged zdarzenia.

Inicjowanie właściwości Time

W kodzie można zainicjować Time właściwość na wartość typu TimeSpan:

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

Time Gdy właściwość jest określona w języku XAML, wartość jest konwertowana na TimeSpan wartość i zweryfikowana, aby upewnić się, że liczba milisekund jest większa lub równa 0, a liczba godzin jest mniejsza niż 24. Składniki czasu powinny być oddzielone dwukropkami:

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

BindingContext Jeśli właściwość TimePicker właściwości jest ustawiona na wystąpienie modelu ViewModel zawierającego właściwość typu TimeSpan o nazwie SelectedTime (na przykład), możesz utworzyć wystąpienie TimePicker w następujący sposób:

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

W tym przykładzie Time właściwość jest inicjowana do SelectedTime właściwości w modelu ViewModel. Time Ponieważ właściwość ma tryb TwoWaypowiązania , każdy nowy czas, który użytkownik wybierze, jest automatycznie propagowany do modelu ViewModel.

TimePicker Jeśli właściwość nie zawiera powiązaniaTime, aplikacja powinna dołączyć program obsługi do PropertyChanged zdarzenia, aby zostać poinformowany, gdy użytkownik wybierze nowy czas.

Aby uzyskać informacje o ustawianiu właściwości czcionki, zobacz Czcionki.

TimePicker i układ

Można użyć nieskonsekwowanej opcji układu poziomego, takiej jak Center, Start, lub End z TimePicker:

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

Nie jest to jednak zalecane. W zależności od ustawienia Format właściwości wybrane godziny mogą wymagać różnych szerokości wyświetlania. Na przykład ciąg formatu "T" powoduje TimePicker , że widok wyświetla czasy w długim formacie, a "4:15:26 AM" wymaga większej szerokości wyświetlania niż krótki format czasu ("t") "4:15 AM". W zależności od platformy ta różnica może spowodować TimePicker zmianę szerokości widoku w układzie lub obcięcie ekranu.

Napiwek

Najlepiej użyć domyślnego HorizontalOptionsFill ustawienia z wartością TimePicker, a nie używać szerokości Auto podczas umieszczania TimePicker w komórce Grid .

TimePicker w aplikacji

Przykład SetTimer zawiera TimePickerwidoki , Entryi Switch na swojej stronie. Można TimePicker go użyć do wybrania godziny, a gdy wystąpi ten czas, zostanie wyświetlone okno dialogowe alertu, które przypomina użytkownikowi tekst w elemecie Entry, pod warunkiem Switch , że element jest włączony. Oto plik 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>

Element Entry umożliwia wprowadzanie tekstu przypomnienia, który będzie wyświetlany po upływie wybranego czasu. Właściwość TimePicker jest przypisywana Format do właściwości "T" przez długi czas. Ma on program obsługi zdarzeń dołączony do PropertyChanged zdarzenia, a Switch program obsługi jest dołączony do jego Toggled zdarzenia. Te programy obsługi zdarzeń znajdują się w pliku za kodem i wywołają metodę SetTriggerTime :

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

Metoda SetTriggerTime oblicza czasomierz na DateTime.Today podstawie wartości właściwości i TimeSpan wartości zwróconej TimePickerz . Jest to konieczne, ponieważ DateTime.Today właściwość zwraca wartość wskazującą bieżącą DateTime datę, ale z godziną północy. Jeśli czas czas czasomierza już minął dzisiaj, zakłada się, że będzie jutro.

Czasomierz tyka co sekundę, wykonując OnTimerTick metodę, która sprawdza, czy Switch element jest włączony i czy bieżący czas jest większy lub równy czasomierzowi. Gdy wystąpi czas czasomierza, DisplayAlert metoda wyświetla użytkownikowi okno dialogowe alertu jako przypomnienie.

Po pierwszym uruchomieniu przykładu TimePicker widok jest inicjowany do 11:00. Naciśnięcie polecenia TimePicker wywołuje selektor czasu platformy. Platformy implementują selektor czasu na bardzo różne sposoby, ale każde podejście jest znane użytkownikom tej platformy:

Select Time

Napiwek

W systemie Android TimePicker okno dialogowe można dostosować, przesłaniając metodę CreateTimePickerDialog w niestandardowym module renderowania. Umożliwia to na przykład dodanie dodatkowych przycisków do okna dialogowego.

Po wybraniu godziny wybrana godzina jest wyświetlana w pliku TimePicker:

Time Selected

Pod warunkiem, że element Switch jest przełączany do pozycji włączonej, aplikacja wyświetla okno dialogowe alertu przypominające użytkownikowi tekst w Entry momencie wystąpienia wybranego czasu:

Timer Popup

Po wyświetleniu Switch okna dialogowego alertu zostanie przełączony do pozycji wyłączonej.