Wybór godziny

Selektor czasu zapewnia ustandaryzowany sposób zezwalania użytkownikom na wybieranie wartości czasu przy użyciu dotyku, myszy lub wprowadzania klawiatury.

Czy jest to właściwa kontrola?

Użyj selektora czasu, aby umożliwić użytkownikowi wybranie pojedynczej wartości czasu.

Aby uzyskać więcej informacji na temat wybierania właściwej kontrolki, zobacz artykuł Kontrolki daty i godziny .

Przykłady

Punkt wejścia wyświetla wybraną godzinę, a gdy użytkownik wybierze punkt wejścia, okno wyboru rozszerza się w pionie od środka, umożliwiając dokonanie wyboru. Selektor czasu nakłada się na inne elementy interfejsu użytkownika; nie przesuwa innych elementów interfejsu.

Tworzenie selektora czasu

• Ważne interfejsy API:klasa TimePicker, właściwość SelectedTime

Otwórz aplikację Galeria WinUI 3 i zobacz działanie platformy TimePicker

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

W tym przykładzie pokazano, jak utworzyć prosty selektor czasu z nagłówkiem.

<TimePicker x:Name="arrivalTimePicker" Header="Arrival time"/>

TimePicker arrivalTimePicker = new TimePicker();
arrivalTimePicker.Header = "Arrival time";

Wynikowy selektor czasu wygląda następująco:

Formatowanie selektora czasu

Domyślnie selektor czasu wyświetla zegar 12-godzinny z selektorem AM/PM. Właściwość ClockIdentifier można ustawić na wartość "24HourClock", aby wyświetlić zamiast tego zegar 24-godzinny.

<TimePicker Header="24HourClock" SelectedTime="18:21" ClockIdentifier="24HourClock"/>

Możesz ustawić właściwość MinuteIncrement , aby wskazać przyrosty czasu wyświetlane w selektorze minut. Na przykład 15 określa, że kontrolka TimePicker minuty wyświetla tylko opcje 00, 15, 30, 45.

<TimePicker MinuteIncrement="15"/>

Wartości czasu

Kontrolka wyboru czasu (time picker) posiada zarówno interfejsy API Time/, TimeChanged, jak i SelectedTime/, SelectedTimeChanged. Różnica między nimi polega na tym, że Time nie jest zerowalne, podczas gdy SelectedTime jest zerowalne.

Wartość SelectedTime jest używana do wypełniania selektora czasu i domyślnie wynosi null. Jeśli SelectedTime jest null, właściwość Time jest ustawiona na TimeSpan równą 0; w przeciwnym razie wartość Time jest synchronizowana z wartością SelectedTime. Gdy SelectedTime jest null, selektor jest "wyłączony" i pokazuje nazwy pól zamiast czasu.

Inicjowanie wartości czasu

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

TimePicker timePicker = new TimePicker
{
    SelectedTime = new TimeSpan(14, 15, 00) // Seconds are ignored.
};

Wartość godziny można ustawić jako atrybut w języku XAML. Jest to prawdopodobnie najłatwiejsze, jeśli już deklarujesz TimePicker obiekt w języku XAML i nie używasz powiązań dla wartości czasu. Użyj ciągu w postaci Hh:Mm , gdzie Hh jest godzin i może wynosić od 0 do 23 i Mm jest minuty i może wynosić od 0 do 59.

<TimePicker SelectedTime="14:15"/>

Uwaga / Notatka

Aby uzyskać ważne informacje o wartościach daty i godziny, zobacz Wartości DateTime i Calendar w artykule Kontrole daty i czasu.

Używanie wartości czasu

Aby użyć wartości czasu w swojej aplikacji, zazwyczaj wykorzystujesz powiązanie danych do właściwości SelectedTime lub Time, korzystasz bezpośrednio z właściwości czasu w kodzie albo obsługujesz zdarzenie SelectedTimeChanged lub TimeChanged.

Aby zapoznać się z przykładem użycia DatePicker i TimePicker razem w celu zaktualizowania pojedynczej DateTime wartości, sprawdź Kontrole kalendarza, daty i czasu — użyj selektora daty i selektora czasu razem.

SelectedTime W tym miejscu właściwość jest używana do porównywania wybranego czasu z bieżącą godziną.

Zwróć uwagę, że ponieważ SelectedTime właściwość ma wartość null, musisz jawnie rzutować ją na DateTime, w następujący sposób: DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);. Właściwość Time może być jednak używana bez rzutowania, w następujący sposób: DateTime myTime = DateTime.Today + checkTimePicker.Time;.

<StackPanel>
    <TimePicker x:Name="checkTimePicker"/>
    <Button Content="Check time" Click="{x:Bind CheckTime}"/>
    <TextBlock x:Name="resultText"/>
</StackPanel>

private void CheckTime()
{
    // Using the Time property.
    // DateTime myTime = DateTime.Today + checkTimePicker.Time;
    // Using the SelectedTime property (nullable requires cast to DateTime).
    DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime);
    if (DateTime.Now >= myTime)
    {
        resultText.Text = "Your selected time has already past.";
    }
    else
    {
        string hrs = (myTime - DateTime.Now).Hours.ToString();
        string mins = (myTime - DateTime.Now).Minutes.ToString();
        resultText.Text = string.Format("Your selected time is {0} hours, {1} minutes from now.", hrs, mins);
    }
}

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

• Interfejsy API platformy UWP:TimePicker, właściwość SelectedTime
• Otwórz aplikację Galeria WinUI 2 i zobacz działanie platformy TimePicker. Aplikacja z galerii WinUI 2 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji winUI 2. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

Tematy pokrewne

• kontrolki daty i godziny
• Wybieracz daty z kalendarza
• widok kalendarza
• Wybór daty