Silverlight 2.0 Calendar ve DatePicker kontrolleri.

XiLoNeN · 26-05-2008, 01:35

Silverlight 2.0 ile beni en çok şaşırtan özelliklerden biri de WPF'in web sürümü diyebileceğimiz ve WPF'e kıyasla bir çok eksiği olan bir torun olarak Silverlight ile beraber artık WPF'de bulunmayan bazı kontrollerin geliyor olması. Tahminen uzun vadede her iki taraf da birbirinden besleniyor olacaktır. Bugün baktığımızda ilk dikkati çeken kontrollerden biri de maalesef WPF tarafında olmayan Calendar ve DateTimePicker kontrolleri. Bu yazımızda bu iki kontrolü ve bu kontrollerle neler yapabileceğimizi inceleyeceğiz.

Calendar kontrolü şekilden şekilde girebiliyor.

Yukarıdaki şekli ile birer Calender kontrolü yaratmak için tek yapmanız gereken XAML kodunuzu aşağıdaki şekilde düzenlemek.

HTML-Kodu:

<UserControl x:Class="Calendar.Page"
     xmlns="http://schemas.microsoft.com/client/2007"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Width="400" Height="300">
   <Grid x:Name="LayoutRoot" Background="White">
     <Calendar Margin="21,20,145,57"/>
   </Grid>
 </UserControl>

Tek yaptığımız bir Calendar tagı açarak kenarlardan olan uzaklığını belirtmek. "Çocuk oyuncağı" denen bu olsa gerek. Peki daha neler yapabiliriz? Aslında bu aşamadan sonra bahsedeceğimiz tüm özellikler Calendar ve DatePicker kontrolleri için birebir aynı. O nedenle gelin öncesinde bir de DatePicker kontrolünün XAML koduna bakalım.

HTML-Kodu:

<DatePicker Height="20" Margin="42,0,156,23" VerticalAlignment="Bottom"/>

DatePicker kontrolünü de sahneye yerleştirmek en az Calendar kontrolü kadar basit. Bu durumda hızlıca programatik işlevselliklere göz atabiliriz. Aşağıdaki gibi bir Silverlight uygulaması hazırlayarak kodlamaya başlayalım.

HTML-Kodu:

<UserControl x:Class="Calendar.Page"
     xmlns="http://schemas.microsoft.com/client/2007"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Width="400" Height="300">
   <Grid x:Name="LayoutRoot" Background="White">
     <Calendar Margin="21,20,145,57"  x:Name="Takvim"/>
     <DatePicker Height="20" Margin="42,0,156,23" VerticalAlignment="Bottom"  x:Name="TarihSecici"/>
   </Grid>
 </UserControl>

Uygulamamızda Takvim adında bir Calendar kontrolü ve TarihSecici adında bir DateTimePicker bulunuyor. Bu kontroller Silverlight uygulaması ile beraber ilk gösterildiklerinde içlerinde herhangi bir tarih seçili gelmiyor. Oysa aşağıdaki şekilde güncel tarihi seçili hale getirebilirsiniz.

HTML-Kodu:

  Takvim.SelectedDate = Date.Now
         TarihSecici.SelectedDate  = Date.Now

Makalemizin en üstündeki görsele baktığınızda Calendar kontrolünün iki farklı görsel durumunun bulunduğunu görebilirsiniz. Normal şartlarda Calendar kontrolü günleri gösterecek şekilde açılıyor, sonrasında eğer üstteki ay ismine tıklarsanız ayların seçilebileceği arayüz geliyor. Oysa isterseniz Calendar kontrolü sayfada ilk açıldığında da ayların seçilebileceği arayüzün otomatik gelmesini sağlayabilirsiniz.

HTML-Kodu:

   Takvim.DisplayMode = CalendarMode.Year

Eğer Calender nesnesinin DisplayMode özelliği Month olursa tam bir ayı gösteriyor, Year şeklinde düzenlendiğinde ise tüm yılı yani ayları gösteriyor. Bunun haricinde isterseniz her iki kontrolün de hangi tarih aralıklarını gösterebileceğini ek olarak düzenleyebilirsiniz.

HTML-Kodu:

  TarihSecici.SelectableDateStart = Date.Today.Subtract(New TimeSpan(5, 0, 0, 0))
         TarihSecici.SelectableDateEnd = Date.Today.AddDays(5)

Yukarıdaki kod içerisinde DatePicker kontrolümüzün SelectableDateStart ve SelectableDateEnd özelliklerine DatePicker içerisinde seçilebilecek başlangıç ve bitiş tarihlerini aktarıyoruz. Bunu yaparken söz konusu tarihlerin hesaplamalarını da tabi ki dinamik olarak yapabilirsiniz. Böylece bu örneğimizde kontrol sürekli olarak mevcut tarihden 5 gün öncesinin ve 5 gün sonrasının seçilebilmesine olanak tanıyacaktır.

HTML-Kodu:

 TarihSecici.DisplayDateStart = Date.Today.Subtract(New TimeSpan(5, 0, 0, 0))
         TarihSecici.DisplayDateEnd = Date.Today.AddDays(5)

Seçili tarihleri belirlemenin yanı sıra isterseniz belirli tarihleri seçilemez yapmanın yanı sıra tamamen o tarihlerin gösterilmemesini de sağlayabilirsiniz. Bunun için DisplayDateStart ve DisplayDateEnd özelliklerinden faydalanabilirsiniz.

SelectableDateve DisplayDate arasında fark.

Hepinize kolay gelsin.

Kaynak: [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]