Merhaba.
Bu makalemizde Expression Studio ailesini tanıyıp Expression
Blend 2 ve Expression Design kullanarak SilverLight uygulamalarına giriş
yapacağız.
Öncelikle programları biraz tanıyalım.Expression Design
Vektörel çizim programıdır.Microsoft’un grafik tasarımı için değil program
arayüzü tasarımı adına çıkardığı ve başarılı olduğu söylenebilen bir
uygulamadır.Expression Design 2’nin Silverlight’ı desteklemesi sayesinde bizde
bu uygulamayı SilverLight çalışmalarımızda kullanabiliyoruz.
Expression Blend Bir bakıma Flash tasarım programına
benziyor fakat getirdiği kolaylıklar ve yeniklikler hem tasarımcının hemde
programlamacının gerçek zamanlı ortak çalışabilmesi adına mükemmel bir uygulama.Programın
büyük yarar sağladığı noktalardan birisi yaptığınız animasyonun xaml olarak eş
zamanlı kodlanmasıdır.Bu kodlama otomatik olarak yapıldığı için sizi
uğraştırmaz.Resimde belirtilen panelden Split kodlarını tasarım sırasında kodlarıda görebilir,
sadece tasarım yada xaml paneli ile çalışabilirsiniz.
Resim 1:
Programlarımızı biraz tanıdıktan sonra Expression Studio 2
ailesinin yada Expression Blend 2 ve Expression Design 2 Programlarının hangi
adreslerden indirebileceğinizi belirtelim.
Expression Studio 2 için http://www.microsoft.com/downloads/details.aspx?FamilyId=7AE2720C-72BA-489B-ADBB-EE6F3C79066D&displaylang=en
Expression Studio 2’yi indirmek istemeyenler için yalnız
Expression Blend 2 ‘nin bağlantı adresi:
http://www.microsoft.com/downloads/details.aspx?FamilyId=5FF08106-B9F4-43CD-ABAD-4CC9D9C208D7&displaylang=en
ve son olarak Expression Design
http://www.microsoft.com/downloads/details.aspx?FamilyId=369B8681-57F9-49E9-A585-ECC5CAC40959&displaylang=en
Expression Blend 2’nin Sp1’ini kurmanızda da yarar var bunun
için bağlantı adresimiz :
http://www.microsoft.com/downloads/details.aspx?FamilyId=EB9B5C48-BA2B-4C39-A1C3-135C60BBBE66&displaylang=en
Kurulumları yaptınız … Expression Design programını açalım.File>New…
Karşımıza gelen pencerede pixel ve çözünürlük ayarlarını belirleyip birde
dosyasına isim verip ‘OK’ butonuna basıyoruz.
Basit bir uygulama olsun diye ekrandaki tool’dan ellipse’i
seçip Shift’e basılı tutarak design panelimizde bir daire çiziyoruz.Resim 2:
Daha sonra dairemizin içini herhangi bir renkle dolduralım
bunun için dairemize bir kere tıklayın ve sağ paneldeki Properties kısmından
bir renk seçin:) İsterseniz şeffaflık ayarlarınıda aynı panelden
değiştirebilirsiniz.
Panel şu şekilde Resim 3:
Ardından File>Export diyoruz ve karşımıza bir pencere
geliyor.Bu pencerede “Xaml Silverlight Canvas”ı seçiyoruz ve Location Kısmından
hangi klasöre kayıt edilmesini istiyorsak belirtiyoruz ve Export All butonuna
basıyoruz.
Sonrasında XAML kodumuza bir göz atalım (birde tümünü seçip kopyalayın ).
<?xml
version="1.0" encoding="utf-8"?>
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Örnek" Width="405.949" Height="555.93"
Clip="F1 M 0,0L 405.949,0L 405.949,555.93L 0,555.93L 0,0">
<Canvas
x:Name="Layer_1" Width="405.949" Height="555.93"
Canvas.Left="0" Canvas.Top="0">
<Ellipse
x:Name="Ellipse" Width="214.973" Height="214.973"
Canvas.Left="71.9909" Canvas.Top="132.483"
Stretch="Fill" StrokeLineJoin="Round"
Stroke="#FF000000" Fill="#FFFF0000"/>
</Canvas>
</Canvas>
Göründüğü üzere bir adet ana kanvas yerleştirilmiş boyutları
ve özellikleri belirtilmiş şekilde
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Örnek" Width="405.949" Height="555.93"
Clip="F1 M 0,0L 405.949,0L 405.949,555.93L 0,555.93L 0,0">
Ayrıca bir de Adı Layer_1 olan bir canvasımız daha mevcut
<Canvas
x:Name="Layer_1" Width="405.949" Height="555.93"
Canvas.Left="0" Canvas.Top="0">
Burada gözümüze çarpan bir nokta var Expression Design’da
layer katmanlı çalışabilmemiz mümkün.Bu katmanlar Silverlight kısmına canvas
olarak aktarılıyor.
Kodumuzda çizmiş olduğumuz elipsin yüksekliği genişliği letf
ve right mesafeleri rengi belirtilmiş.
Şimdi kodumuzu kopyalayıp Expression Design Programını
kapatıyoruz ve Expression Blend 2 Programımızı açıyoruz.
Karşımıza gelen ekranda New Project Diyoruz ve Silverligth 1
Site’yi seçiyoruz.
Öncelikle Blend 2 ‘nin şu özelliğine değinmek
istiyorum.Tools>Options’a tıkladığınızda karşınıza gelen Options panelinde
WorkSpace Zoom seçeneği var.(resimdeki gibi).Burdan tüm panellerin ve araçların
boyutlarını ayarlayabilirsiniz.Bu özellik blend 2 nin arayüzünün tamamen vektörel
çizimler ile tasarlanmasından kaynaklanmaktadır.
Ardından sağ panelimizdeki Siplit’i seçiyoruz.Bu,bize XAML
kodlarımızı yazarken gerçek zamanlı olarak çiziminde tasarım panelinde görmemizi
sağlayacaktır.
Alt tarafa gelecek olan XAML editörümüze daha önce Design
programında tasarladığımız ve XAML olarak kaydettiğimiz kodları hafızaya
kopyalamıştık şimdi bu paneldeki tüm kodları silip önceki kodlarımızı
yapıştırıyoruz.
Design paneline elipsimiz geldi fakat tek sorun ana
canvasımızın boyutlarının XAML’de belirtilmemiş olması nedeniyle arka planı
göremiyoruz.
Onuda XAML editöründen ana canvasımıza ekliyoruz.
<?xml
version="1.0" encoding="utf-8"?>
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Örnek" Clip="F1 M 0,0L 405.949,0L 405.949,555.93L
0,555.93L 0,0">
Kodumuzun Canvas ve xmlns arasına Width="600"
Height="600"
Yerleştiriyoruz ve properties panelinden şekildeki kutucuğa
basıp background rengini seçiyoruz.
Yada XAML panelinden ana canvasımızın özelliklerinin
belirtildiği yere Background="#FF000000"
ekleyebilirsiniz ( renklerin hex kodlarını siz seçin)
Sonrasında sol taraftaki panelimizden StoryBoard
ekliyoruz. Resim ;
Karşımıza çıkan ekranda “Create as a Resource” seçeneğini
seçin burada bir kaynak kod olarak oluştur diyoruz.Bu bizim için
önemli,animasyonumuzu kaynak kodu olarak bi’ kenarda tutuyor olacağız ki daha
sonra JavaScript koduyla bu animasyonun ne zaman çalışacağını ve ekstralara
karar vereceğiz.
“OK” Butonuna bastık ve sol tarafdaki panelimize StoryBoard
eklendi şimdi sol taraftaki Elipse’imize bir kere basıp storyboard’da 0.
saniyeye geliyoruz ve keyframe ekliyoruz Resim:
Ardından timeline’da ikinci sanineye tıklayıp design
panelindeki elipsimizi tutup bir köşeye çekiyoruz.ve 5.saniyey tıklayıp yine
tasarımımızı başka bir köşeye çekiyoruz.
ve Play butonuna basıyoruz Resim :
Şimdi XAML kodlarımızdaki değişikliklere bir göz atalım
Kodlarımıza bir < Canvas.Resources> ve storyboard
eklenmiş animasyonun hangi saniyede nerde olacağı belirtilmiş.
Projemizi kaydetin (save all )
Sağ paneldeki Project kısmına gelelim orda dikkatimizi çeken html,xaml,xaml.js
ve silverlight.js dosyalarını görüceksiniz şuanda F5’e basarsanız ASP.net
Development Server çalıştırılacak ve Localhost’ta dosyasımızı görememize
yardımcı olacaktır.fakat şuanda JavaScript kodlarında animasyonun ne zaman
başlıyacağını belirtmediğimiz için bunu js dosyasında belirtmemiz
gerekmektedir..
Buradaki silverlight.js dosyasının içindeki kodlar istemci
bilgisayarda silverlight uygulamasının olup olmadığını kontrol edip gerekli
indirme adreslerini kişiye sunmak içindir.
Animasyonumuzun zaman ayarı için Xaml.Js koduna dönmemiz
gerekiyor…
Sağ tıklayıp edit externally diyoruz ve
İçindeki tüm kodları silip aşağıdaki kodu ekliyoruz:
if (!window.isim)
isim = {};
isim.Page = function()
{
}
isim.Page.prototype =
{
handleLoad: function(control,
userContext, rootElement)
{ rootElement.findname("storyboard
adi").begin();
}
}
Storyboarda verdiğiniz adi belirtin hatirlamiyor iseniz xaml
panelinde storyboard’un adına
bakabilirsiniz.
<Storyboard x:Name="boardismi ">
Şimdi tekrar F5 ‘e basıyoruz ve animasyonumuz ilk açılışta
çalıştı.Biz bunu set time ile belirlediğimiz zamanda da animasyonun başlamasını
ayarlayabiliriz.
Çalışan hali ektedir.
İyi Çalışmalar.
Uğur KAZDAL
isim.rar (4,85 kb)