MerhabalarNe zamandır Silverlight ile ilgili bir yazı dizisi hazırlamayı düşünüyordum fakat bir türlü vakit bulup da başlayamamıştım. Uzun zamandan beri programımdaki dengesiz yoğunluktan dolayı bloguma da bir şeyler yazmamış olmanın rahatsızlığı ile artık zamanı geldi sanıyorum =)İlk olarak Silverlight için gerekli olan program ve araçları anlatayım. Sonra Visual Studio, Expression Design ve Expression Blend ile ufak bir uygulama yapalım.http://silverlight.net/getstarted/ adresinden VS için gerekli tool ve diğer uygulamaları indirebilirsiniz.VS için gerekli eklentiyi kurduktan sonra VS’yi açıp Silverlight projemizi başlatabiliriz.
new project
Projeyi başlatmak için OK düğmesine bastıktan sonra VS bize Silverlight projemizle birlikte birde Web Uygulama Projesi oluşturayım mı diye soracak. Silverlight webte çalışan bir uygulama olduğu için server’la iletişim kurması falan gibi durumlardan dolayı bir web sayfasına ihtiyacı var. OK diyerek Silverlight ile birlikte birde web application oluşturuyoruz.
Proje dosyalarımız oluştuğunda VS’nin aşağıdakine benzer bir görüntüde karşınıza gelmesi gerekiyor.
Burada tanıdık bir tema var aslında. Web sayfası tasarlar gibi, altta html kodlar, üstte çıktı hali şeklinde bir görüntü. Silverlight’taki kodlar xaml olarak yazılıyor. Kodlara hızlıca bakacak olursak eğer her şeyin bir UserControl içinde olduğunu görüyoruz. Genişlik, yükseklik gibi özellikleri var. Bunun içinde birde default olarak Grid geliyor. Silverlight’ta şuanda 5 tane layoutContainer var. Bunlar Grid, Canvas, StackPanel, ScroolViewer, Border. Birbirlerinden ne farkları olduğunu ve kullanımlarını ilerleyen yazılarda anlatacağım.Şimdi Grid içine örnek bir kod yazıp Preview ekranında çıktıyı görelim.
VS ile tasarım yönünden yapabileceklerimiz biraz sınırlı. Her şeyin kodunu elle yazamayız. İşte tam burda XAML kodlarını otomatik oluşturmak adına Expression Studio yardıma koşuyor. Expression Design programını açıp bir şekil çizelim ve bunun xaml kodlarını alıp nasıl kullanacağımıza bakalım şimdide.
Expression Design’i açtıktan sonra yeni bir doküman oluşturalım ve ekrana bir tane rectangle(kare) çizelim.
Kodları rahat okumanız açısından Kare’yi tercih ettim. Siz diğer araçları kullanarak farklı çizimler yapıp, oluşan xaml kodlarına bakabilirsiniz =)Burada yaptığımız çizimlerin hepsi vektöreldir. Vekörel demek oluşan her şeklin koordinatlarının matematiksel olarak tanımlanmış olması anlamına gelir. Şeklin boyutlarında değişiklik yaptığımız zaman herhangi bir bozulma olmadan oranlar hesaplanarak yeniden çizilir.Şeklimizin xaml kodunu almak için, seçiliyken Ctrl+Shift+C veya Edit – Copy XAML yapıyoruz.
Şimdi tekrar VS’yi açarak aldığımız kodu Grid içine yapıştıralım.
Şeklimiz ekranda göründü. Biraz büyük ve sayfadan taşmış olabilir fakat bu önemli değil. Zaten burada tasarım yapmayacağız. Tasarım ve animasyon işlemleri için Expressin Blend’e bakabiliriz artık. VS ve Expression Blend aynı proje üzerinde anlık olarak çalışabiliyorlar. Tasarımcı tasarımla ilgili düzenlemeleri yaparken, aynı anda programcıda VS’de kodları yazabilir.Expression Blend’i kendimiz açıp silverlight projemizin yolunu bularak çalıştırabileceğimiz gibi Solution Explorer’da bulunan Silverlight sayfamızın üzerine sağ tıklayarak ta açabiliriz.
Çizimi Expression Design’den aldığımızda bize birde oluşturduğumuz sayfanın ölçülerinde Canvas verdiği için şuanda UserControl’ün 400×300’lük sınırını aşmış bulunuyoruz. Kod kısmına girerek Rectangle’mi canvas dışına çıkarabiliriz istersek.Kolay gelsin…
