Aracılığıyla paylaş


Takvim görünümü

Takvim görünümü, 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çim yüzeyi yoktur ve takvim her zaman görünür durumdadır.

Doğru kontrol bu mu?

Kullanıcının her zaman görünür bir takvimden tek bir tarih veya tarih aralığı seçmesine izin vermek için takvim görünümünü kullanın.

Bir kullanıcının aynı anda birden çok tarih seçmesine izin vermeniz gerekiyorsa, takvim görünümü kullanmanız gerekir. Kullanıcının yalnızca tek bir tarih seçmesine izin vermeniz gerekiyorsa ve takvimin her zaman görünür olması gerekmiyorsa, takvim tarih seçici veya tarih seçici denetimi kullanmayı göz önünde bulundurun.

Doğru denetimi seçme hakkında daha fazla bilgi için Tarih ve saat denetimleri makalesine bakın.

Örnekler

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. DisplayMode özelliğini ayarlayarak bir başlangıç görünümü belirtebilirsiniz.

Takvim görünümünün 3 görünümü

Kullanıcılar, yıl görünümünü açmak için ay görünümündeki üst bilgiye tıklayın ve on yıllık görünümü açmak için yıl görünümünde üst bilgiye tıklayın. Kullanıcılar yıl görünümüne dönmek için on yıllık görünümde bir yıl seçer ve ay görünümüne dönmek için yıl görünümünde bir ay seçer. Üst bilginin yan tarafındaki iki ok aya, yıla veya on yıla göre ileri veya geri gider.

Takvim görünümü oluşturma

WinUI 3 Galeri simgesi 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.

Bu örnekte basit bir takvim görünümünün nasıl oluşturulacağı gösterilmektedir.

<CalendarView/>

Sonuçta elde edilen takvim görünümü şöyle görünür:

Takvim görünümü örneği

Tarih seçme

Varsayılan olarak, SelectionMode özelliği Singleolarak ayarlanır. Bu, kullanıcının takvimde tek bir tarih seçmesine olanak tanır. Tarih seçimini devre dışı bırakmak için SelectionMode None olarak ayarlayın.

Kullanıcının birden çok tarih seçmesine izin vermek için SelectionMode'Birden Çok olarak ayarlayın. Burada gösterildiği gibi, SelectedDates koleksiyonuna /DateTimeOffset nesneleri ekleyerek birden çok tarihi program aracılığıyla seçebilirsiniz:

calendarView1.SelectedDates.Add(DateTimeOffset.Now);
calendarView1.SelectedDates.Add(new DateTime(1977, 1, 5));

Kullanıcı, takvim kılavuzunda bu tarihe tıklayarak veya dokunarak seçili tarihin seçimini kaldırabilir.

SelectedDates koleksiyonu değiştiğinde bildirim almak için SelectedDatesChanged olayını işleyebilirsiniz.

Uyarı

Tarih değerleri hakkında önemli bilgiler için Tarih ve saat denetimleri makalesindeki DateTime ve Calendar değerleri bölümüne bakın.

Takvim görünümünün görünümünü özelleştirme

Takvim görünümü hem ControlTemplate içinde tanımlanan XAML öğelerinden hem de doğrudan denetim tarafından işlenen görsel öğelerden oluşur.

  • Denetim şablonunda tanımlanan XAML öğeleri, denetimi çevreleyen kenarlık, başlık, önceki ve sonraki düğmeler ve DayOfWeek öğelerini içerir. Bu öğelere herhangi bir XAML denetimi gibi stil ekleyebilir ve yeniden şablon oluşturabilirsiniz.
  • Takvim kılavuzu, CalendarViewDayItem nesnelerinden oluşur. Bu öğelere stil uygulayamaz veya yeniden şablon uygulayamazsınız, ancak görünümlerini özelleştirmenize olanak sağlamak için çeşitli özellikler sağlanır.

Bu diyagramda takvimin ay görünümünü oluşturan öğeler gösterilir. Daha fazla bilgi için bkz. CalendarViewDayItem sınıfındaki Açıklamalar.

Takvim ayı görünümünün öğeleri

Bu tabloda, takvim öğelerinin görünümünü değiştirmek için değiştirebileceğiniz özellikler listelenmiştir.

Öğe Özellikler
HaftanınGünü HaftaGünüFormatı
TakvimÖğesi TakvimÖgesiArkaPlan, TakvimÖgesiKenarlıkFırçası, TakvimÖgesiKenarlıkKalınlığı, TakvimÖgesiÖnPlan
DayItem GünÖgesiYazıTipiAilesi, GünÖgesiYazıTipiBoyutu, GünÖgesiYazıTipiStili, GünÖgesiYazıTipiKalınlığı, YatayGünÖgesiHizalaması, DikeyGünÖgesiHizalaması, TakvimGörünümGünÖgesiStili
MonthYearItem (yıl ve on yıllık görünümlerde, DayItem'e eşdeğer) MonthYearItemFontFamily, MonthYearItemFontSize, MonthYearItemFontStyle, MonthYearItemFontWeight
AyınİlkGünüEtiketi Ayın İlk Günü Etiketi Yazı Tipi Ailesi , Ayın İlk Günü Etiketi Yazı Boyutu, Ayın İlk Günü Etiketi Yazı Tipi Stili, Ayın İlk Günü Etiketi Yazı Tipi Ağırlığı, Yatay Ayın İlk Günü Etiketi Hizalaması, Dikey Ayın İlk Günü Etiketi Hizalaması, Grup Etiketi Görünür mü
FirstofYearDecadeLabel (yıl ve on yıllık görünümlerde, FirstOfMonthLabel ile eşdeğer) FirstOfYearDecadeLabelFontFamily, FirstOfYearDecadeLabelFontSize, FirstOfYearDecadeLabelFontStyle, FirstOfYearDecadeLabelFontWeight
Görsel Durum Kenarlıkları OdakSınırFırçası, ÜzerineGelmeSınırFırçası, BasılıSınırFırçası, SeçiliSınırFırçası, SeçiliÖnPlan, SeçiliÜzerineGelmeSınırFırçası, SeçiliBasılıSınırFırçası
Kapsam Dışı IsOutOfScopeEnabled, OutOfScopeBackground, OutOfScopeForeground
Bugün IsTodayHighlighted, TodayFontWeight, TodayForeground

Varsayılan olarak, ay görünümü bir kerede 6 hafta gösterir. NumberOfWeeksInView özelliğini ayarlayarak gösterilen hafta sayısını değiştirebilirsiniz. Gösterilecek en az hafta sayısı 2'dir; maksimum değer 8'dir.

Varsayılan olarak, yıl ve on yıllık görünümler 4x4 kılavuzda gösterilir. Satır veya sütun sayısını değiştirmek için SetYearDecadeDisplayDimensions çağırın istediğiniz satır ve sütun sayısıyla birlikte. Bu, hem yıl hem de on yıllık görünümlerin kılavuzunu değiştirir.

Burada yıl ve on yıllık görünümler 3x4 ızgarada gösterilecek şekilde ayarlanmış.

calendarView1.SetYearDecadeDisplayDimensions(3, 4);

Varsayılan olarak, takvim görünümünde gösterilen en düşük tarih geçerli tarihten 100 yıl öncesidir ve gösterilen en yüksek tarih geçerli tarihten 100 yıl geçmiştir. Takvimin gösterdiği en düşük ve en yüksek tarihleri, MinDate ve MaxDate özelliklerini ayarlayarak değiştirebilirsiniz.

calendarView1.MinDate = new DateTime(2000, 1, 1);
calendarView1.MaxDate = new DateTime(2099, 12, 31);

Takvim günü öğelerini güncelleştirme

Takvimdeki her gün bir CalendarViewDayItem nesnesiyle gösterilir. Tek bir günlük öğeye erişmek ve özelliklerini ve yöntemlerini kullanmak için CalendarViewDayItemChanging olayını işleyin ve CalendarViewDayItem'a erişmek için olay args öğesinin Item özelliğini kullanın.

CalendarViewDayItem.IsBlackout özelliğini true ayarlayarak takvim görünümünde bir günün seçilemez olmasını sağlayabilirsiniz.

CalendarViewDayItem.SetDensityColors yöntemini çağırarak bir gündeki olayların yoğunluğu hakkında bağlamsal bilgileri gösterebilirsiniz. Her gün için 0 ila 10 yoğunluk çubuğu gösterebilir ve her çubuğun rengini ayarlayabilirsiniz.

Takvimdeki bazı günlük öğeler aşağıdadır. 1. ve 2. günler karardı. 2, 3 ve 4. günler çeşitli yoğunluk çubuklarına sahiptir.

takvim günleri yoğunluk çubukları

Aşamalı işleme

Takvim görünümü çok sayıda CalendarViewDayItem nesnesi içerebilir. Kullanıcı arabiriminin yanıt vermesini sağlamak ve takvimde sorunsuz gezintiyi etkinleştirmek için takvim görünümü aşamalı işlemeyi destekler. Bu, bir gün öğesinin işlenmesini aşamalara ayırmanızı sağlar. Tüm aşamalar tamamlanmadan bir gün görünümden çıkarılırsa, bu öğeyi işlemek ve görüntülemek için artık zaman kullanılmaz.

Bu örnek, randevuları zamanlamak için bir takvim görünümünün aşamalı olarak işlenmesini gösterir.

  • 0. aşamada varsayılan gün öğesi işlenir.
  • 1. aşamada, rezervasyon yapılamayan tarihler karartılır. Buna geçmiş tarihler, Pazar günleri ve zaten tamamen ayrılmış olan tarihler dahildir.
  • 2. aşamada, gün için rezervasyon yapılan her randevuyu kontrol edin. Onaylanan her randevu için bir yeşil yoğunluk çubuğu ve belirsiz randevular için mavi yoğunluk çubuğu gösterirsiniz.

Bu örnekteki Bookings sınıfı kurgusal bir randevu uygulamasındandır ve gösterilmiyor.

<CalendarView CalendarViewDayItemChanging="CalendarView_CalendarViewDayItemChanging"/>
private void CalendarView_CalendarViewDayItemChanging(CalendarView sender,
                                   CalendarViewDayItemChangingEventArgs args)
{
    // Render basic day items.
    if (args.Phase == 0)
    {
        // Register callback for next phase.
        args.RegisterUpdateCallback(CalendarView_CalendarViewDayItemChanging);
    }
    // Set blackout dates.
    else if (args.Phase == 1)
    {
        // Blackout dates in the past, Sundays, and dates that are fully booked.
        if (args.Item.Date < DateTimeOffset.Now ||
            args.Item.Date.DayOfWeek == DayOfWeek.Sunday ||
            Bookings.HasOpenings(args.Item.Date) == false)
        {
            args.Item.IsBlackout = true;
        }
        // Register callback for next phase.
        args.RegisterUpdateCallback(CalendarView_CalendarViewDayItemChanging);
    }
    // Set density bars.
    else if (args.Phase == 2)
    {
        // Avoid unnecessary processing.
        // You don't need to set bars on past dates or Sundays.
        if (args.Item.Date > DateTimeOffset.Now &&
            args.Item.Date.DayOfWeek != DayOfWeek.Sunday)
        {
            // Get bookings for the date being rendered.
            var currentBookings = Bookings.GetBookings(args.Item.Date);

            List<Color> densityColors = new List<Color>();
            // Set a density bar color for each of the days bookings.
            // It's assumed that there can't be more than 10 bookings in a day. Otherwise,
            // further processing is needed to fit within the max of 10 density bars.
            foreach (booking in currentBookings)
            {
                if (booking.IsConfirmed == true)
                {
                    densityColors.Add(Colors.Green);
                }
                else
                {
                    densityColors.Add(Colors.Blue);
                }
            }
            args.Item.SetDensityColors(densityColors);
        }
    }
}