TimePicker

Interfejs użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) TimePicker wywołuje kontrolkę selektora czasu platformy i umożliwia wybranie czasu.

TimePicker definiuje następujące właściwości:

• Time typu TimeSpan?, wybrany czas. Ustaw wartość na , aby null nie reprezentować wybranego czasu. Wartości inne niż null muszą być mniejsze niż 24 godziny i >= 0 milisekund.
• 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 wybranej godziny.
• FontAttributes typu FontAttributes, który domyślnie ma wartość FontAttributes.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.
• IsOpen typu bool (dwukierunkowy) wskazuje, czy interfejs użytkownika selektora czasu platformy jest otwarty.

Wszystkie te właściwości są wspierane przez BindableProperty obiekty. Właściwość Time ma domyślny tryb BindingMode.TwoWaypowiązania .

Dodatkowe zdarzenia:

• Opened i Closed zdarzenia wskazują, kiedy jest wyświetlany lub odrzucany interfejs użytkownika selektora czasu platformy.

Ponadto TimePicker definiuje TimeSelected zdarzenie, które jest wywoływane po zmianie wybranego czasu. Obiekt TimeChangedEventArgs , który towarzyszy TimeSelected zdarzeniu, ma NewTime właściwości i OldTime , które określają odpowiednio nowy i stary czas.

Tworzenie platformy TimePicker

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

Poniższy zrzut ekranu przedstawia wynikowy TimePicker na iOS.

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

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

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

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

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ć, że widok TimePicker zmieni szerokość w układzie lub że ekran zostanie przycięty.

Wskazówka

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

Różnice między platformami

W tej sekcji opisano różnice specyficzne dla platformy kontrolki TimePicker.

Android

W systemie Android Format właściwość jest szanowana i wyświetlana przez kontrolkę. Jednak gdy kontrolka selektora jest wyświetlana przez naciśnięcie kontrolki, można zmienić tylko godzinę, minutę i godzinę dnia.

Katalizator systemu iOS/Mac

W systemie iOS właściwość Format jest respektowana i wyświetlana przez kontrolkę.

W systemie macOS Format właściwość nie ma wpływu na kontrolkę.

Windows

W systemie Windows właściwość dotyczy tylko tego, czy godzina jest w formacie 12-godzinnym czy 24-godzinnym. Inne ustawienia właściwości Format są ignorowane. Gdy selektor jest wyświetlany przez naciśnięcie kontrolki, można zmienić tylko godzinę, minutę i godzinę dnia. Aby uzyskać więcej informacji na temat kontrolki systemu Windows, zobacz Selektor czasu — aplikacje systemu Windows.

Wybrany czas, który może być null (.NET 10)

W .NET 10 TimePicker obsługuje możliwość reprezentowania czasu jako wartości null, dzięki czemu można przedstawiać brak wybranego czasu i wyczyścić wybór w powiązaniach. Właściwość jest Time z walidacją, że każda TimeSpan? wartość inna niż null ma godziny < 24 i milisekundy >= 0.

Przykład powiązania i polecenie umożliwiające wyczyszczenie zaznaczenia:

<VerticalStackLayout>
  <TimePicker Time="{Binding SelectedTime}" />
  <Button Text="Clear time" Command="{Binding ClearTimeCommand}" />
  <Label Text="Selected: {Binding SelectedTime}" />

  <!-- Optional: display a placeholder when no time is selected -->
  <Label IsVisible="{Binding SelectedTime, Converter={StaticResource NullToBoolConverter}}"
         Text="No time selected" />
</VerticalStackLayout>

Szkic modelu ViewModel:

public partial class MyViewModel : ObservableObject
{
    [ObservableProperty]
    private TimeSpan? selectedTime;

    [RelayCommand]
    void ClearTime() => SelectedTime = null;
}

Uwaga / Notatka

Przykład ViewModel używa atrybutów z zestawu narzędzi .NET Community Toolkit MVVM (CommunityToolkit.Mvvm). Aby ich używać, zainstaluj pakiet NuGet CommunityToolkit.Mvvm i dodaj using CommunityToolkit.Mvvm.ComponentModel; oraz using CommunityToolkit.Mvvm.Input; do pliku. Aby uzyskać więcej informacji, zobacz .NET Community Toolkit MVVM.

Ustaw/wyczyść w kodzie:

timePicker.Time = null;                 // Clear selection (no time)
timePicker.Time = new TimeSpan(14, 30, 0); // 2:30 PM

Programowe otwieranie i zamykanie selektora czasu

Możesz programowo otworzyć i zamknąć interfejs wyboru, kontrolując fokus na narzędziu wyboru.

// Open the platform picking UI
picker.Focus();

// ... later, close the UI
picker.Unfocus();

Uwagi dotyczące platformy:

• System Android wyświetla okno dialogowe podczas koncentracji fokusu i odrzuca je, gdy nie ma fokusu.
• iOS i Mac Catalyst prezentują widok danych wejściowych, gdy są w centrum uwagi; Odwrócenie uwagi kończy edytowanie.
• System Windows używa okna wysuwanego/ComboBox; uwaga nie zawsze powoduje otwarcie listy rozwijanej we wszystkich kontekstach. Preferuj otwieranie poprzez interakcję użytkownika; Zamyka się po utracie skupienia, jeśli jest otwarte.

Aby wykryć, kiedy selektor zostanie otwarty lub zamknięty, obsłuż zdarzenia Focused i Unfocused .