Delen via

Tijdkiezer

De tijdkiezer biedt u een gestandaardiseerde manier om gebruikers een tijdwaarde te laten kiezen met behulp van aanraak-, muis- of toetsenbordinvoer.

Voorbeeld van tijdkiezer

Is dit de juiste controle?

Gebruik een tijdkiezer om een gebruiker één tijdwaarde te laten kiezen.

Zie het artikel Datum- en tijdbesturingselementen voor meer informatie over het kiezen van het juiste besturingselement.

Voorbeelden

Het ingangspunt geeft het gekozen tijdstip weer en wanneer de gebruiker het toegangspunt selecteert, wordt een kiezeroppervlak verticaal uitgevouwen vanaf het midden voor de gebruiker om een selectie te maken. De tijdkiezer overschrijdt andere gebruikersinterfaces; het zet geen andere gebruikersinterface opzij.

Voorbeeld van het uitbreiden van de tijdkiezer

Een tijdkiezer maken

Open de App WinUI 3 Gallery en bekijk de TimePicker in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

In dit voorbeeld ziet u hoe u een eenvoudige tijdkiezer maakt met een koptekst.

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

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

De resulterende tijdkiezer ziet er als volgt uit:

Voorbeeld van tijdkiezer

De tijdkiezer opmaken

Standaard toont de tijdkiezer een 12-uurs klok met een AM/PM-selector. U kunt de eigenschap ClockIdentifier instellen op '24HourClock' om in plaats daarvan een 24-uurs klok weer te geven.

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

Een tijdkiezer voor een 24-uursklok.

U kunt de eigenschap MinuteIncrement instellen om de tijdsintervallen aan te geven die worden weergegeven in de minutenkiezer. 15 geeft bijvoorbeeld aan dat in het besturingselement TimePicker minuut alleen de opties 00, 15, 30, 45 worden weergegeven.

<TimePicker MinuteIncrement="15"/>

Een tijdkiezer met stappen van 15 minuten.

Tijdwaarden

Het besturingselement tijdkiezer heeft zowel Time/TimeChanged als SelectedTime/SelectedTimeChanged API's. Het verschil tussen deze is dat Time niet nullable is, terwijl SelectedTime nullable is.

De waarde van SelectedTime wordt gebruikt om de tijdkiezer te vullen en is null standaard. Als SelectedTimenull is, wordt de Time-eigenschap ingesteld op een TimeSpan van 0; zo niet, dan wordt de Time-waarde gesynchroniseerd met de SelectedTime-waarde. Wanneer SelectedTime is null, is de kiezer 'unset' en worden de veldnamen weergegeven in plaats van een tijd.

Een tijdkiezer zonder geselecteerde tijd.

Een tijdwaarde initialiseren

In code kunt u de tijdeigenschappen initialiseren naar een waarde van het type TimeSpan:

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

U kunt de tijdwaarde instellen als een kenmerk in XAML. Dit is waarschijnlijk het eenvoudigst als u het TimePicker object al declareren in XAML en geen bindingen gebruikt voor de tijdwaarde. Gebruik een reeks in dit formaat uu:mm waarbij uu uren zijn en tussen 0 en 23, en mm minuten zijn en tussen 0 en 59 kunnen zijn.

<TimePicker SelectedTime="14:15"/>

Opmerking

Zie voor belangrijke informatie over datum- en tijdwaarden datum- en tijdwaarden in het artikel Datum- en tijdbesturingselementen.

De tijdwaarden gebruiken

Als u de tijdwaarde in uw app wilt gebruiken, gebruikt u doorgaans een gegevensbinding met de eigenschap SelectedTime of Time , gebruikt u de tijdeigenschappen rechtstreeks in uw code of verwerkt u de gebeurtenis SelectedTimeChanged of TimeChanged .

Zie voor een voorbeeld van het gebruik van een DatePicker en TimePicker bij elkaar om één DateTime-waarde bij te werken Agenda-, datum- en tijdsbesturingselementen: Gebruik een datum- en tijdkiezer samen.

Hier wordt de SelectedTime eigenschap gebruikt om de geselecteerde tijd te vergelijken met de huidige tijd.

U ziet dat omdat de SelectedTime eigenschap nullable is, u deze expliciet moet casten naarDateTime, zoals deze: DateTime myTime = (DateTime)(DateTime.Today + checkTimePicker.SelectedTime); De eigenschap Time kan echter zonder cast worden gebruikt, zoals deze: DateTime myTime = DateTime.Today + checkTimePicker.Time;.

Een tijdkiezer, knop en tekstlabel. 

<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 en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

API's voor deze controle bevinden zich in de naamruimte Windows.UI.Xaml.Controls.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie Hoekstraal voor meer informatie.

  • Last updated on