Takvim, tarih ve saat denetimleri

Tarih ve saat denetimleri, kullanıcının uygulamanızda tarih ve saat değerlerini görüntülemesine ve ayarlamasına izin vermek için standart, yerelleştirilmiş yollar sunar. Bu makale tasarım yönergeleri sağlar ve doğru denetimi seçmenize yardımcı olur.

WinUI 3 Galeri uygulamasını açın ve Tarih ve Saat denetimlerini çalışır durumda görün

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Hangi tarih veya saat denetimini kullanmalısınız?

Aralarından seçim yapabileceğiniz dört tarih ve saat denetimi vardır; kullandığınız denetim senaryonuza bağlıdır. Uygulamanızda kullanılacak doğru denetimi seçmek için bu bilgileri kullanın.

Yönetim	Example	Description
Takvim görünümü	örneği	Her zaman görünür bir takvimden tek bir tarih veya tarih aralığı seçmek için kullanın.
Takvim tarih seçicisi		Bağlamsal takvimden tek bir tarih seçmek için kullanın.
Tarih seçici		Bağlamsal bilgilerin önemli olmadığı tek bir bilinen tarih seçmek için kullanın.
Saat seçici		Tek bir saat değeri seçmek için kullanın.

Takvim görünümü

CalendarView , kullanıcının aya, yıla veya on yıla göre gezinebileceği bir takvimi görüntülemesini ve takvimle etkileşim kurmasına olanak tanır. Kullanıcı tek bir tarih veya tarih aralığı seçebilir. Seçici yüzeyi yoktur ve takvim her zaman görünür.

Takvim görünümü 3 ayrı görünümden oluşur: ay görünümü, yıl görünümü ve on yıllık görünüm. Varsayılan olarak, ay görünümü açık olarak başlar, ancak başlangıç görünümü olarak herhangi bir görünümü belirtebilirsiniz.

• Kullanıcının birden çok tarih seçmesine izin vermeniz gerekiyorsa CalendarView kullanmanız gerekir.
• Bir kullanıcının yalnızca tek bir tarih seçmesine izin vermeniz gerekiyorsa ve takvimin her zaman görünür olması gerekmiyorsa CalendarDatePicker veya DatePicker denetimi kullanmayı göz önünde bulundurun.

Takvim tarih seçicisi

CalendarDatePicker , haftanın günü veya takvimin doluluğu gibi bağlamsal bilgilerin önemli olduğu takvim görünümünden tek bir tarih seçmek için iyileştirilmiş bir açılan liste denetimidir. Ek bağlam sağlamak veya kullanılabilir tarihleri sınırlamak için takvimi değiştirebilirsiniz.

Tarih ayarlanmamışsa giriş noktası yer tutucu metni görüntüler; aksi takdirde, seçilen tarihi görüntüler. Kullanıcı giriş noktasını seçtiğinde, kullanıcının tarih seçimi yapması için bir takvim görünümü genişler. Takvim görünümü diğer kullanıcı arabirimini katmanlar; diğer kullanıcı arabirimini yoldan çekmez.

• Randevu veya kalkış tarihi seçme gibi işlemler için takvim tarihi seçici kullanın.

Tarih seçici

DatePicker denetimi, belirli bir tarihi seçmek için standartlaştırılmış bir yol sağlar.

Giriş noktası seçilen tarihi görüntüler ve kullanıcı giriş noktasını seçtiğinde, kullanıcının seçim yapması için bir seçici ortadan dikey olarak genişler. Tarih seçici diğer kullanıcı arabiriminin üzerine gelir; diğer kullanıcı arabirimini yerinden oynatmaz.

• Kullanıcının, takvimin bağlamının önemli olmadığı, doğum tarihi gibi bilinen bir tarih seçmesine izin vermek için tarih seçici kullanın.

Saat seçici

TimePicker, randevular veya kalkış saati gibi şeyler için tek bir saat değeri seçmek için kullanılır. Kullanıcı tarafından veya kodda ayarlanan statik bir görüntüdür, ancak geçerli saati görüntüleyecek şekilde güncelleştirilmez.

Giriş noktası, seçilen saati gösterir ve kullanıcı giriş noktasını seçtiğinde, kullanıcının bir seçim yapması için bir seçici yüzey ortasından dikey olarak genişler. Zaman seçici, diğer kullanıcı arabiriminin üzerine gelir ama diğer kullanıcı arabirimini yerinden kıpırdatmaz.

• Kullanıcının tek bir saat değeri seçmesine izin vermek için zaman seçici kullanın.

Tarih veya saat denetimi oluşturma

Her tarih ve saat denetimine özgü bilgiler ve örnekler için bu makalelere bakın.

• Takvim görünümü
• Takvim tarih seçici
• Tarih seçici
• Zaman Seçici

Tarih seçici ve saat seçiciyi birlikte kullanma

Bu örnek, bir DatePicker ve TimePicker'i birlikte kullanarak bir kullanıcının varış tarih ve saatini nasıl seçebileceğini göstermektedir. SelectedDateChanged ve SelectedTimeChanged olaylarını işleyerek adlı tek bir arrivalDateTime örneğini güncelleştirirsiniz. Kullanıcı, ayarlandıktan sonra tarih ve saat seçicilerini de temizleyebilir.

<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

XAML tarih denetimleri, Windows tarafından desteklenen takvim sistemlerinin her birini destekler. Bu takvimler Windows.Globalization.CalendarIdentifiers sınıfında belirtilir. Her denetim uygulamanızın varsayılan dili için doğru takvimi kullanır veya CalendarIdentifier özelliğini belirli bir takvim sistemini kullanacak şekilde ayarlayabilirsiniz.

Zaman seçici denetimi , Windows.Globalization.ClockIdentifiers sınıfında belirtilen saat sistemlerinin her birini destekler. ClockIdentifier özelliğini 12 saatlik veya 24 saatlik bir saat kullanacak şekilde ayarlayabilirsiniz. Özelliğin türü String'dir, ancak ClockIdentifiers sınıfının statik dize özelliklerine karşılık gelen değerleri kullanmanız gerekir. Bunlar: TwelveHour ("12HourClock" dizesi - "On İki Saat") ve TwentyFourHour ("24HourClock" dizesi - "Yirmi Dört Saat"). "12HourClock" varsayılan değerdir.

DateTime ve Calendar değerleri

XAML tarih ve saat denetimlerinde kullanılan tarih nesnelerinin, programlama dilinize bağlı olarak farklı bir gösterimi vardır.

• C# ve Visual Basic, .NET parçası olan System.DateTimeOffset yapısını kullanır.
• C++/CX Windows::Foundation::DateTime yapısını kullanır.

İlgili kavram, tarihlerin bağlamda nasıl yorumlandığına etki eden Takvim sınıfıdır. Tüm Windows Runtime uygulamaları Windows.Globalization.Calendar sınıfını kullanabilir. C# ve Visual Basic uygulamaları alternatif olarak çok benzer işlevlere sahip System.Globalization.Calendar sınıfını kullanabilir. (Windows Runtime uygulamalar Temel .NET Takvim sınıfını kullanabilir ancak belirli uygulamaları kullanamaz; örneğin, GregoryenCalendar.)

.NET ayrıca DateTime adlı ve DateTimeOffset'e örtük olarak dönüştürülebilen bir türü de destekler. .NET kodunda aslında DateTimeOffset olan değerleri ayarlamak için kullanılan "DateTime" türünü görebilirsiniz. DateTime ile DateTimeOffset arasındaki fark hakkında daha fazla bilgi için bkz. DateTimeOffset sınıfında açıklamalar.

Uyarı

Windows Runtime XAML ayrıştırıcısının, dizeleri DateTime/DateTimeOffset nesneleri olarak tarihlere dönüştürmek için bir dönüştürme mantığı olmadığından; tarih nesnelerini alan özellikler XAML öznitelik dizesi olarak ayarlanamaz. Bu değerleri genellikle kodda ayarlarsınız. Başka bir olası teknik, veri nesnesi olarak veya veri bağlamında kullanılabilen bir tarih tanımlamak ve ardından özelliği, tarihe veri olarak erişebilen {Binding} işaretleme uzantısı ifadesine başvuran bir XAML özniteliği olarak ayarlamaktır.

Örnek kodunu alma

• WinUI 3 Galeri örneği
• Calendar örneği
• Tarih ve saat biçimlendirme örneği

İlgili konular

Geliştiriciler için (XAML)

• CalendarView sınıfı
• CalendarDatePicker sınıfı
• DatePicker sınıfı
• TimePicker sınıfı