Megosztás a következőn keresztül:

Naptár-, dátum- és idővezérlők

A dátum- és idővezérlők szabványos, honosított módszerekkel teszik lehetővé a felhasználók számára a dátum- és időértékek megtekintését és beállítását az alkalmazásban. Ez a cikk tervezési irányelveket tartalmaz, és segít kiválasztani a megfelelő vezérlőt.

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a dátum- és idővezérlőket működés közben

WinUI 3 Katalógus ikon A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Melyik dátum- vagy időszabályozást érdemes használnia?

Négy dátum- és idővezérlő közül választhat; a használt vezérlő a forgatókönyvtől függ. Ezen információk segítségével kiválaszthatja az alkalmazásban használni kívánt vezérlőt.

Vezérlő Example Description
Naptár nézet Példa a naptár nézetre Egyetlen dátumot vagy dátumtartományt választhat egy mindig látható naptárból.
Naptárdátumválasztó Képernyőkép egy naptárdátumválasztóról. Válasszon egyetlen dátumot egy környezetfüggő naptárból.
Dátumválasztó Példa a dátumválasztóra Használja egyetlen ismert dátum kiválasztására, amikor a környezeti információk nem fontosak.
Időválasztó Időbeállító példája Egyetlen időérték kiválasztására használható.

Naptár nézet

A CalendarView lehetővé teszi a felhasználók számára, hogy hónap, év vagy évtized szerint navigálva tekinthessék meg és használják a naptárakat. A felhasználók egyetlen dátumot vagy dátumtartományt választhatnak. Nincs választófelület, és a naptár mindig látható.

A naptárnézet 3 különálló nézetből áll: a hónap nézetből, az évnézetből és az évtized nézetből. Alapértelmezés szerint a megnyitott hónap nézettel kezdődik, de bármilyen nézetet megadhat indítási nézetként.

Képernyőkép három naptárnézetről, amelyek egy Hónap nézetet, egy Év nézetet és egy Évtized nézetet mutatnak.

  • Ha engedélyeznie kell egy felhasználónak, hogy több dátumot jelöljön ki, naptárnézetet kell használnia.
  • Ha azt szeretné, hogy a felhasználó csak egyetlen dátumot válasszon, és nincs szüksége naptárra, hogy mindig látható legyen, fontolja meg a CalendarDatePicker vagy a DatePicker vezérlő használatát.

Naptárdátumválasztó

A CalendarDatePicker egy legördülő vezérlő, amely egyetlen dátum naptárnézetből való kiválasztására van optimalizálva, ahol fontos a környezetfüggő információ, például a hét napja vagy a naptár teljessége. Módosíthatja a naptárt úgy, hogy további környezetet adjon meg, vagy korlátozza a rendelkezésre álló dátumokat.

A belépési pont helyőrző szöveget jelenít meg, ha nincs beállítva dátum; ellenkező esetben megjeleníti a kiválasztott dátumot. Amikor a felhasználó kiválasztja a belépési pontot, a felhasználó naptárnézete kinyílik a dátumkijelöléshez. A naptár nézet átfedi a többi felhasználói felület elemet; nem tolja félre őket.

Képernyőkép egy naptárdátumválasztóról, amelyen egy üres dátum szövegmező látható, majd az alatta lévő naptár.

  • Naptárdátumválasztót használhat olyan dolgokhoz, mint a találkozó vagy az indulási dátum kiválasztása.

Dátumválasztó

A DatePicker vezérlő szabványosított módot biztosít egy adott dátum kiválasztására.

A belépési pont megjeleníti a kiválasztott dátumot, és amikor a felhasználó kiválasztja az indulási pontot, a választófelület függőlegesen kinyílik középről, hogy a felhasználó kiválaszthassa. A dátumválasztó átfedi a többi felhasználói felületet; nem tolja el a többi felhasználói felületet.

Példa a dátumválasztó kibontására

  • Dátumválasztóval lehetővé teszi a felhasználó számára, hogy egy ismert dátumot( például születési dátumot) válasszon, ahol a naptár környezete nem fontos.

Időválasztó

A TimePicker használatával egyetlen időértéket választhat ki például találkozókhoz vagy indulási időpontokhoz. Ez egy statikus kijelző, amelyet a felhasználó vagy a kód állít be, de nem frissül az aktuális idő megjelenítéséhez.

A belépési pont megjeleníti a kiválasztott időpontot, és amikor a felhasználó rákattint, a választófelület középről függőlegesen kinyílik, lehetővé téve a kijelölést. Az időválasztó átfedi a többi felhasználói felületet; nem tolja félre a többi elemet.

Példa egy bővülő időválasztóra

  • Egy időválasztóval lehetővé teszi, hogy a felhasználó egyetlen időértéket válasszon.

Dátum- vagy idővezérlő létrehozása

Ezek a cikkek az egyes dátum- és időszabályozásokra vonatkozó információkat és példákat ismertetik.

Dátumválasztó és időválasztó együttes használata

Ez a példa bemutatja, hogyan használhatja DatePicker és TimePicker együtt, hogy a felhasználó kiválaszthassa az érkezési dátumát és időpontját. Név szerint SelectedDateChanged és SelectedTimeChanged eseményeket kezel, hogy frissítsen egyetlen DateTime példányt arrivalDateTime néven. A felhasználó a beállítás után törölheti a dátum- és időválasztókat is.

Dátumválasztó, időválasztó, gomb és szövegfelirat. 

<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

Az XAML dátumvezérlői támogatják a Windows által támogatott naptárrendszereket. Ezek a naptárak a Windows.Globalization.CalendarIdentifiers osztályban vannak megadva. Minden vezérlő a megfelelő naptárt használja az alkalmazás alapértelmezett nyelvéhez, vagy beállíthatja a CalendarIdentifier tulajdonságot egy adott naptárrendszer használatára.

Az időválasztó vezérlő támogatja a Windows.Globalization.ClockIdentifiers osztályban megadott összes órarendszert. A ClockIdentifier tulajdonságot beállíthatja 12 órás vagy 24 órás használatra. A tulajdonság típusa Sztring, de a ClockIdentifiers osztály statikus sztringtulajdonságainak megfelelő értékeket kell használnia. Ezek a következők: TwelveHour (a "12HourClock") és TwentyFourHour (a "24HourClock" string). A "12HourClock" az alapértelmezett érték.

DátumIdő és Naptár értékek

Az XAML dátum- és idővezérlőkben használt dátumobjektumok a programozási nyelvtől függően eltérő megjelenítéssel rendelkeznek.

A kapcsolódó fogalom a Naptár osztály, amely befolyásolja a dátumok kontextusban való értelmezését. Minden Windows Runtime alkalmazás használhatja a Windows.Globalization.Calendar osztályt. A C# és a Visual Basic-alkalmazások használhatják a System.Globalization.Calendar osztályt, amely nagyon hasonló funkciókkal rendelkezik. (Windows Runtime alkalmazások használhatják az alap .NET Naptár osztályt, de nem az adott implementációkat, például GregorianCalendar.)

.NET támogatja a DateTime nevű típust is, amely implicit módon átalakítható DateTimeOffset-típussá. Így előfordulhat, hogy egy "DateTime" típust használnak .NET kódban, amely a valóban DateTimeOffset típusú értékek beállítására szolgál. A DateTime és a DateTimeOffset közötti különbségről további információt a DateTimeOffset osztály Megjegyzései című témakörben talál.

Megjegyzés:

A dátumobjektumokat átadó tulajdonságok nem állíthatók be XAML attribútumsztringként, mert a Windows Runtime XAML-elemző nem rendelkezik konverziós logikával a sztringek dátummá alakításához DateTime/DateTimeOffset objektumként. Ezeket az értékeket általában kódban állítja be. Egy másik lehetséges módszer egy dátumnak adatobjektumként vagy adatkörnyezetben való definiálása, majd annak XAML attribútumként való beállítása egy {Binding} markupkiterjesztés kifejezéssel, amely adatként eléri a dátumot.

A mintakód lekérése

Fejlesztőknek (XAML)

  • Last updated on