Silverlight 2.0 Calendar ve DatePicker kontrolleri.

0 dakikada yazıldı

6293 defa okundu

Düzenle

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.
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.

<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.

<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.

<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.

        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.

        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.

        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.

        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.
SelectableDateve DisplayDate arasında fark.

Hepinize kolay gelsin.