Delen via

Besturingselementen voor agenda, datum en tijd

Met besturingselementen voor datum en tijd kunt u standaard, gelokaliseerde manieren gebruiken om een gebruiker datum- en tijdwaarden in uw app weer te geven en in te stellen. Dit artikel bevat ontwerprichtlijnen en helpt u bij het kiezen van het juiste besturingselement.

Open de WinUI 3 Gallery-app en bekijk de besturingselementen voor datum en tijd 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

Welke datum- of tijdcontrole moet u gebruiken?

Er zijn vier datum- en tijdbesturingselementen waaruit u kunt kiezen; het besturingselement dat u gebruikt, is afhankelijk van uw scenario. Gebruik deze informatie om het juiste besturingselement te kiezen dat u in uw app wilt gebruiken.

Beheersing Example Description
Agendaweergave Voorbeeld van agendaweergave Gebruik deze optie om één datum of een bereik met datums te kiezen uit een altijd zichtbare agenda.
Kalenderdatumkiezer Schermopname van een kalenderdatumkiezer. Gebruik deze optie om één datum uit een contextuele agenda te kiezen.
Datumkiezer voorbeeld van datumkiezer Gebruik deze optie om één bekende datum te kiezen wanneer contextuele informatie niet belangrijk is.
Tijdkiezer Voorbeeld van tijdkiezer Gebruik dit om één keer een waarde te kiezen.

Agendaweergave

Met CalendarView kan een gebruiker een agenda bekijken en gebruiken die ze per maand, jaar of decennium kunnen navigeren. Een gebruiker kan één datum of een datumbereik selecteren. Het heeft geen kiezeroppervlak en de agenda is altijd zichtbaar.

De kalenderweergave bestaat uit drie afzonderlijke weergaven: de maandweergave, de jaarweergave en de decenniumweergave. Standaard wordt de maandweergave geopend, maar u kunt elke weergave opgeven als opstartweergave.

Schermopname van drie kalenderweergaven met een maandweergave, een jaarweergave en een decenniumweergave.

  • Als u een gebruiker meerdere datums wilt laten selecteren, moet u een CalendarView gebruiken.
  • Als u een gebruiker slechts één datum wilt laten kiezen en geen agenda nodig hebt om altijd zichtbaar te zijn, kunt u overwegen een besturingselement CalendarDatePicker of DatePicker te gebruiken.

Kalenderdatumkiezer

CalendarDatePicker is een vervolgkeuzelijst die is geoptimaliseerd voor het kiezen van één datum in een agendaweergave, waarbij contextuele informatie zoals de dag van de week of de volledige agenda belangrijk is. U kunt de agenda wijzigen om extra context te bieden of om de beschikbare datums te beperken.

In het invoerpunt wordt tekst van tijdelijke aanduidingen weergegeven als er geen datum is ingesteld; anders wordt de gekozen datum weergegeven. Wanneer de gebruiker het invoerpunt selecteert, wordt een agendaweergave uitgebreid zodat de gebruiker een datumselectie kan maken. De agendaweergave overlays andere gebruikersinterfaces; het verplaatst geen andere gebruikersinterfaces opzij.

Schermopname van een kalenderdatumkiezer met een leeg tekstvak voor een datum selecteren en vervolgens een ingevuld met een agenda eronder.

  • Gebruik een kalenderdatumkiezer voor zaken als het kiezen van een afspraak of vertrekdatum.

Datumkiezer

Het besturingselement DatePicker biedt een gestandaardiseerde manier om een specifieke datum te kiezen.

Het ingangspunt geeft de gekozen datum 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 datumkiezer dekt andere delen van de gebruikersinterface; hij verplaatst niets.

voorbeeld van het uitbreiden van de datumkiezer

  • Gebruik een datumkiezer om een gebruiker een bekende datum te laten kiezen, zoals een geboortedatum, waarbij de context van de agenda niet belangrijk is.

Tijdkiezer

De TimePicker wordt gebruikt om één tijdwaarde te selecteren voor zaken zoals afspraken of een vertrektijd. Het is een statische weergave die is ingesteld door de gebruiker of in code, maar het wordt niet bijgewerkt om de huidige tijd weer te geven.

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

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

Een datum- of tijdbeheer maken

Zie deze artikelen voor informatie en voorbeelden die specifiek zijn voor elke datum- en tijdcontrole.

Een datumkiezer en tijdkiezer samen gebruiken

In dit voorbeeld ziet u hoe u een DatePicker en TimePicker samen kunt gebruiken om een gebruiker de aankomstdatum en -tijd te laten selecteren. U kunt de en SelectedDateChanged gebeurtenissen afhandelen om één SelectedTimeChanged met de naam arrivalDateTimebij te werken. De gebruiker kan ook de datum- en tijdkiezers wissen nadat deze zijn ingesteld.

Een datumkiezer, tijdkiezer, knop en tekstlabel. 

<StackPanel>
    <DatePicker x:Name="arrivalDatePicker" Header="Arrival date"
                DayFormat="{}{day.integer} ({dayofweek.abbreviated})"
                SelectedDateChanged="ArrivalDatePicker_SelectedDateChanged"/>
    <StackPanel Orientation="Horizontal">
        <TimePicker x:Name="arrivalTimePicker" Header="Arrival time"
                MinuteIncrement="15"
                SelectedTimeChanged="ArrivalTimePicker_SelectedTimeChanged"/>
        <Button Content="Clear" Click="ClearDateButton_Click"
                VerticalAlignment="Bottom" Height="30" Width="54"/>
    </StackPanel>
    <TextBlock x:Name="arrivalText" Margin="0,12"/>
</StackPanel>

public sealed partial class MainPage : Page
{
    DateTime arrivalDateTime;

    public MainPage()
    {
        this.InitializeComponent();

        // Set minimum to the current year and maximum to five years from now.
        arrivalDatePicker.MinYear = DateTimeOffset.Now;
        arrivalDatePicker.MaxYear = DateTimeOffset.Now.AddYears(5);
    }

    private void ArrivalTimePicker_SelectedTimeChanged(TimePicker sender, TimePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalTimePicker.SelectedTime != null)
        {
            arrivalDateTime = new DateTime(arrivalDateTime.Year, arrivalDateTime.Month, arrivalDateTime.Day,
                                           args.NewTime.Value.Hours, args.NewTime.Value.Minutes, args.NewTime.Value.Seconds);
        }
        arrivalText.Text = arrivalDateTime.ToString();
    }

    private void ArrivalDatePicker_SelectedDateChanged(DatePicker sender, DatePickerSelectedValueChangedEventArgs args)
    {
        if (arrivalDatePicker.SelectedDate != null)
        {
            if (VerifyDateIsFuture((DateTimeOffset)arrivalDatePicker.SelectedDate) == true)
            {
                arrivalDateTime = new DateTime(args.NewDate.Value.Year, args.NewDate.Value.Month, args.NewDate.Value.Day,
                                               arrivalDateTime.Hour, arrivalDateTime.Minute, arrivalDateTime.Second);
                arrivalText.Text = arrivalDateTime.ToString();
            }
            else
            {
                arrivalDatePicker.SelectedDate = null;
                arrivalText.Text = "Arrival date must be later than today.";
            }
        }
    }

    private bool VerifyDateIsFuture(DateTimeOffset date)
    {
        if (date > DateTimeOffset.Now)
        {
            return true;
        }
        return false;
    }

    private void ClearDateButton_Click(object sender, RoutedEventArgs e)
    {
        arrivalDateTime = new DateTime();
        arrivalDatePicker.SelectedDate = null;
        arrivalTimePicker.SelectedTime = null;
        arrivalText.Text = string.Empty;
    }
}

Globalization

De XAML-datumbesturingselementen ondersteunen elk van de agendasystemen die door Windows worden ondersteund. Deze agenda's worden opgegeven in de klasse Windows.Globalization.CalendarIdentifiers . Elk besturingselement gebruikt de juiste agenda voor de standaardtaal van uw app of u kunt de eigenschap CalendarIdentifier instellen op een specifiek agendasysteem.

Het besturingselement tijdkiezer ondersteunt elk van de kloksystemen die zijn opgegeven in de klasse Windows.Globalization.ClockIdentifiers . U kunt de eigenschap ClockIdentifier instellen voor gebruik van een 12-uurs klok of een 24-uurs klok. Het type eigenschap is String, maar u moet waarden gebruiken die overeenkomen met de statische tekenreekseigenschappen van de klasse ClockIdentifiers. Dit zijn: TwaalfHour (de tekenreeks "12HourClock")en TwentyHour (de tekenreeks "24HourClock"). "12HourClock" is de standaardwaarde.

Datum/tijd- en kalenderwaarden

De datumobjecten die worden gebruikt in de besturingselementen voor datum en tijd van XAML hebben een andere weergave, afhankelijk van uw programmeertaal.

Een gerelateerd concept is de klasse Agenda, die invloed heeft op de manier waarop datums in context worden geïnterpreteerd. Alle Windows Runtime-apps kunnen de klasse Windows.Globalization.Calendar gebruiken. C# en Visual Basic-apps kunnen ook de klasse System.Globalization.Calendar gebruiken, die zeer vergelijkbare functionaliteit heeft. (Windows Runtime-apps kunnen de basisklasse .NET Calendar gebruiken, maar niet de specifieke implementaties, bijvoorbeeld GregorianCalendar.)

.NET ondersteunt ook een type met de naam DateTime, dat impliciet kan worden omgezet in een DateTimeOffset. U ziet dus mogelijk een type DateTime dat wordt gebruikt in .NET-code die wordt gebruikt om waarden in te stellen die echt DateTimeOffset zijn. Zie Opmerkingen in de klasse DateTimeOffset voor meer informatie over het verschil tussen DateTime en DateTimeOffset .

Opmerking

Eigenschappen die datumobjecten aannemen, kunnen niet worden ingesteld als een XAML-kenmerktekenreeks, omdat de Windows Runtime XAML-parser geen conversielogica heeft voor het converteren van tekenreeksen naar datums als DateTime/DateTimeOffset-objecten. Normaal gesproken stelt u deze waarden in code in. Een andere mogelijke techniek is het definiëren van een datum die beschikbaar is als een gegevensobject of in de gegevenscontext, en de eigenschap vervolgens instelt als een XAML-kenmerk dat verwijst naar een extensie-expressie voor {Binding}-markeringen die toegang heeft tot de datum als gegevens.

De voorbeeldcode halen

Voor ontwikkelaars (XAML)

  • Last updated on