Silverlight'ı geniş bir şekilde anlatmamın ardından halen kafalarda soru işareti kalabilmesi ihtimaline karşın, şimdi ilk Silverlight uygulamamızı hazırlamak için ilk adımları atacağız. Eğer hala Silverlight nedir bilmiyorsanız, okumaya devam etmeden önce bu yazıyı okumalısınız.

Bildiğiniz üzere Silverlight XAML denilen bir dili kullanıyor ve XAML kodları bir Silverlight uygulamasının görsel arayüzünü oluşturuyor. XAML kodlarını öğrenmek, HTML bilen birisi için oldukça basit diyebiliyorum. Sadece oturup yazmak bazen sıkıcı olabiliyor. Bunun yerine Microsoft Blend yazılımını kullanıyoruz. Microsoft Blend, bir arayüz üzerinden görsel olarak herşeyi yaratmanıza imkan sağlıyor.

Yani, Silverlight aslında bir arayüzü olan bir program değil. Silverlight'ı kurduğunuzda, onunla uygulamalar geliştirebilmek için ekstra şeyler yapmanız gerekiyor.

Başlamadan önce

1. Bilgisayarınızda Silverlight 1.0 kurulu olduğundan emin olun. Hangi sürümün kurulu olduğunu öğrenmek için Microsoft'un sitesine bakabilirsiniz.
2. Eğer bilgisayarınızda Silverlight 1.0 yerine 2.0 veya 1.1 kuruluysa 1.0 uygulaması geliştiremezsiniz. Çünkü bu sürümler arasında birçok şey değişti ve yeni sürüm eskiyi yorumlamada zorlanıyor.
3. Neden Silverlight 2.0 ile uygulama geliştirmiyorum diyebilirsiniz. Çünkü 2.0 şuanda Microsoft tarafından önerilen sürüm değil, henüz deneme aşamasında. 1.0 ile çalışmaya başlamak size hiç birşey kaybettirmez. Aksine eliniz alışır, deneyim kazanırsınız.
4. XAML kodlarını oluşturmak için, Microsoft Blend 2.5 uygulamasını kurduğunuzdan emin olun. Eğer sisteminizde .Net Framework 3.5 yoksa bunu da kurmanız gerekecektir.
5. Az da olsa JavaScript dilini bilmelisiniz. Çünkü Silverlight 1.0 uygulamalarına JavaScript ile müdahale edeceğiz. JavaScript öğrenmek için W3Schools'a veya buradaki siteye bakabilirsiniz. JavaScript'i yutmuş olmanız gerekmiyor, sadece if, for gibi şartlamaları ve fonksiyon mantığını biraz bilmeniz yeterli.

Bu kısa adımlardan sonra artık Silverlight uygulaması geliştirmek için ilerleyebilirsiniz.

Devamını okuyun

XAML ve Expression Blend

Expression Blend programı, eğer görsel tasarım programlarına eliniz yatkınsa size hiç zor gelmeyecektir. Kısa sürede çözebilmek için tek yapmanız gereken şey: kurcalamak. Blend'i ilk açtığınızda size ne yapmak istediğinizi soracaktır, New Project diyerek Silverlight 1 Site seçeneğini seçip, uygulamanıza bir isim verin -mesela ilkUygulama-. Böylece Blend ilk projeniz için gerekli tüm dosya ve ayarları sizin için yapmış olacak. Bundan sonra karşılaşacağınız ekran ise şöyle olacak:

Görebildiğiniz üzere herşey derli toplu, anlaşılır. Aynı bir grafik programında çalışır gibi araçlarınız, katmanlarınız ve özellikler kutularınız var. Her ekleyeceğiniz objeyi araçlar tarafından seçiyor, çalışma alanınıza çiziyor ve ardından özellikler kutularından ayarlarını yapabiliyorsunuz.

İlk animasyonumuzu tasarlayalım

Eğer Blend'i yeterince kurcaladıysanız, ilk Silverlight projesi için fazla abartıya kaçmadan minik bir animasyon yapmaya başlayabiliriz.

Araç kutusundan, dikdörtgen'e basılı tutarsanız, çizebileceğiniz diğer objeleri görürsünüz. Ben topa benzer bir obje çizmek istediğim için yuvarlak aracı seçiyor ve ekrana çiziyorum. Obje ilk oluştuğunda sadece bir kenarlığı olacak. Bunu ekranın sağında Properties'den değiştirerek topa benzetmeye çalışacağız. Çirkin olduğunu düşündüğüm için objenin kenarlığını kaldırıyor ve Fill özelliğini Graident Brush'ı seçerek bir renk geçişi haline getiriyorum. Top çizim olarak hazır oldu bile. Eğer takip ettiyseniz, XAML editörü kısmında bir takım kodlar ortaya çıktı. Bu kodlar sayesinde Silverlight bizim objemizi yorumlayacak. Alışkanlık olması ve kolaylık sağlaması açısından, objeme Name kısmından bir de isim veriyorum: objeTop. Benim için ortaya çıkan XAML kodu şu:

<Ellipse Width="65" Height="65" Canvas.Left="296" Canvas.Top="196" StrokeThickness="1" x:Name="objeTop">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFBE70" Offset="0"/>
<GradientStop Color="#FFA55A00" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>

Aynen HTML gibi, belirli özellikleri olan kodlar düzeni.

Şimdi sıra geldi bu obje için bir animasyon hazırlamaya. Bunun için Animasyon diye belirttiğim bölümden + işaretine tıklıyoruz. Flash'daki movieClip'ler gibi burada da StoryBoard'lar yaratabiliyoruz. Ben animasyonuma ziplaTop ismini veriyorum. Bundan sonra karşılaşacağınız ekran ise şöyle olacak:

Şimdi topumuza biraz hareket kazandırmak için objeTop'u seçiyoruz ve üzerinde yeşil artı olan simgeye tıklıyoruz. Böylece ilk frame'i yaratmış olacağız. Sarı oku tepesinden sürükleyerek 1. saniyeye kadar çekiyorum ve orada bir kere daha yeşil artıya tıklıyorum. Böylece ikinci frame'i de yarattık. Şimdi topa hareket vererek, sayfanın aşağısına kadar çekiyorum. İşlem bittiğinde yukarıdan Play tuşuna basarsanız topun tam 1 saniyede aşağıya düşüşünü görebilirsiniz.

Aynı hareketin bir de geriye dönüşü olmalı muhakkak. Bunun için ilk tıkladığımız +'nın yanındaki aşağı oka basıyorum. Karşıma çıkan menüden Duplicate yani çoğaltı seçiyorum. Bana ziplaTop_Copy1 olarak ikinci bir animasyon yarattı. Az önceki menüden Rename'i seçerek ziplaTop_Copy1 ismini ziplaTopDon olarak değiştiriyorum. Yine menüyü açarak bu sefer Reverse yani döndür seçeneğini seçiyorum. Bu sayede animasyonumuz aynen tam tersine dönüyor, üstelik hiç uğraşmadan.

Böylece animasyon tamamlanmış oluyor.

Animasyonumuza hayat verelim!

Blend içerisinde herhangi bir zaman F5 tuşuna bastığınızda sanal bir web sunucusu devreye girecek ve size uygulamanızı tarayıcı içerisinde gösterecektir. Eğer F5'e basarsanız, açıldığında topumuzun hareket etmediğini göreceksiniz. E o halde, hadi hareketlendirelim.

Topu hareketlendirmek için bir JavaScript fonksionu yazacağız. Hareketin devamını sağlamak içinse bir tane daha fonksiyon. Şimdi, silverlight projenizin bulunduğu dizini açın. 4 adet dosya göreceksiniz, bunları daha sonra detaylı olarak açıklayacağım. Öncesinde Page.xaml.js dosyasını herhangi bir metin (javascript) editöründe açın ve en son satıra gidin. Burada animasyonu başlatmak için ilk fonksiyonumuzu yazacağız.

function animasyonBasla(sender)
{
sender.findName("ziplaTop").begin();
}

Fonksiyonumuzun ismi animasyonBasla. Yanındaki sender, hangi objeden (silverlight) geldiğimizi belirtiyor. Çalıştırılan kod kısmında ise, sender içindeki ziplaTop isimli obje/eylemi bul ve begin() yani başlat diyoruz. Gayet basit değil mi? Şimdi topun yukarı çıkma animasyonu için komut verelim.

function animasyonDevam(sender)
{
sender.findName("ziplaTopDon").begin();
}

Aynı şekilde bu sefer de ziplaTopDon eylemini başlattık.

Eğer heyecanla F5 'e basıp animasyonu izlemek isterseniz hayal kırıklığıyla karşılaşmayın. Çünkü henüz XAML kodlarından bu fonksiyonları çağırmadık.

Tekrar Blend'e dönüyoruz ve XAML kodları içine dalıyoruz. Kodların başlarına doğru 2 tane Storyboard göreceksiniz. Birisi ziplaTop ve diğeri ziplaTopDon olarak isimlendirilmiş. Şimdi bu animasyonların tamamlanma eyleminde birer JavaScript fonksiyonu çağıralım.

<Storyboard x:Name="ziplaTop">
...
<Storyboard x:Name="ziplaTopDon">

Kodlarını:

<Storyboard x:Name="ziplaTop" Completed="animasyonDevam">
...
<Storyboard x:Name="ziplaTopDon" Completed="animasyonBasla">

Olarak değiştirdim. Birinci animasyonumuz ilk kare olduğu için bitince ikinci animasyonu, ikinci animasyon da son kare olduğu için bitince ilk animasyonu çağırmalı.

Son bir adım olarak, animasyonumuzun ilk başlangıcını topa tıkladığımızda gerçekleşmesini sağlayalım. Bu sefer:

<Ellipse x:Name="objeTop"...

Diye giden satırımıza:

<Ellipse MouseLeftButtonDown="animasyonBasla" x:Name="objeTop"...

Farenin sol butonuna basıldığında komutunu veriyoruz. Yine aynı javascript çalışıyor. Artık gönül rahatlığıyla F5'e basabilir ve topa tıkladığınızda animasyonun sonsuza kadar devam ettiğini görebilirsiniz.

Neler öğrendik?

Bu giriş yazısıyla:

1. Silverlight'ı nasıl kullanacağımızı,
2. Blend programını ve XAML kodlarının yapılarını,
3. Basit bir obje çizip, özellikleriyle oynamayı,
4. Bu objeye animasyon tanımlamayı,
5. Animasyonların bittiğinde fonksiyon çağırmayı,
6. Objeye tıklandığında fonksiyon çağırmayı,

Giriş seviyesinde öğrenmiş bulunuyoruz. Artık bir sonraki yazıya kadar gerisi size kalmış.

Yaptığımız animasyonun örnek kodlarını indirmek için buraya, animasyonu izlemek için ise buraya tıklayabilirsiniz.

Lütfen çekinmeden konuya ilişkin tüm sorularınızı yorum olarak sorun.