Bu yazımda sitemdeki silverlight saati nasıl yaptığımı anlatacağım.Bir kaç sene önce İzmire giderken trende can sıkıntısına yapmıştım :) geçtiğimiz günlerde neden bunu siteme eklemiyorum deyip sağ alana yapıştırdım :)
Kodlaması inanılmaz basit ve şık bir görüntü sunduğunu düşünüyorum. Aslında dört adet grafikten başka birşey değil. En altta zemin, üzerinde saat,dakika ve saniye çubukları var. Bilgisayardan zamanı alıp bir timer ile bu çubukların açısını değiştiriyoruz :) Saatin görüntüsü yandaki şekildeki gibidir. Eğer makinanızda microsoft silverlight runtime ı yoksa yandaki şekil yerine install microsoft silverlight yazan bir şekil göreceksiniz. Buna tıklayarak microsoftun sunucularından 4-5mb civarı olan silverlight runtime ı indirip kurabilirsiniz. (Bunu macromedia nın flash playerı olarak düşünün) Bu sayede silverlight uygulamalarını sorunsuzca görüntüleyebilirsiniz. Şimdi saati nasıl yaptığıma geçelim.
Ben herşeyi sıfırdan oluşturdum. Kullandığım grafikleri expression design 3 te tasarladım.Boş bir sayfa açıp katman katman grafikleri tasarlayabilirsiniz.Hayalinize ve tasarımınıza bağlı olarak ortaya orjinal birşeyler çıkacaktır. Yada direk google images e girip bir şeylerde aşırabilirsiniz :) Ben expression design da hazırladığım grafikleri png olarak export ettim (Yanlış hatırlamıyorsam XAML olarakta alıp expression blendde kullanabiliyorduk). Aşağıdaki şekilde expression design 3 programından tasarımı gösteren bir ekran görüntüsü görülüyor.
Grafikleri export ettikten sonra expression blend 3 te projeye ekleyin ve çalışma alanına image kontrolleri ekleyip source olarak grafikleri gösterin.Üst üste gelecek şekilde hizzalayın.Saat çerçevesi en altta, üzerinde saat çubuğu, üzerinde dakika ve saniye çubuğu olmalı. Bir timer ile bu çubukların açılarını değiştirerek döndüreceğimiz söylemiştik.Dönüş çubukların en alt noktasından olacağı için transform origin noktasını çubukların en altına taşıyın.Bu nokta aynı zamanda saat çerçevesinin tam ortası olmalı. Aksi halde çubuklar sayıların üzerinden dönmek yerine kendi etraflarında dönerler :) Aşağıdaki expression blend 3 ten bir ekran görüntüsü görülüyor. Çerçevenin tam ortasında çubukların üzerinde mavi bir yuvarlak gözüküyor. Bahsettiğim transform origin point budur.Çubuklar bu noktayı merkez alarak dönerler.
Çubukları döndürmeyi ise Rotate Transform un “Angle” propertysinin değerini değiştirerek yapıcaz. Angle değerini C# kod tarafında değiştirebilmek için Rotate Transforma aşağıdaki gibi isim verin, ben imgSaniye için Saniye ismini verdim. Bunu tüm çubuklar için yapmalısınız.Bu sayede C# tarafından isim ile çağırarak açı değerini değiştirebiliriz. Bizim için önemli olan Rotate Transformdur, diğerlerini blend otomatik ekliyor, isterseniz kaldırabilirsiniz.
Şimdi yukarıda verdiğimiz isimleri kullanarak çubukların açısını değiştirelim.Bunun için bir timer nesnesi oluşturalım ve 1sn de çalışacak şekilde kuralım.Timerın tick olayında çubukların açılarını hesaplayıp değiştirelim. Örneğin daire 360 derece olduğundan ve bir dakika 60 saniye olduğundan her bir saniye için 6 derece ilerlememiz gerekmektedir.
public partial class MainPage : UserControl
{
DispatcherTimer t = new DispatcherTimer();
public MainPage()
{
InitializeComponent();
t.Tick += new EventHandler(t_Tick);
t.Interval = new TimeSpan(0, 0, 0, 0, 1000);
t.Start();
}
void t_Tick(object sender, EventArgs e)
{
Saniye.Angle = DateTime.Now.Second * 6;
Dakika.Angle = DateTime.Now.Minute * 6 + DateTime.Now.Second / 10;
Saat.Angle = DateTime.Now.Hour * 30 + DateTime.Now.Minute / 2;
}
}
Bir yazının daha sonuna geldik. Bir sonkinde görüşmek üzere :)