Makale Özeti

Merhaba bu makalede Expression Blend 3 Preview ile hazırlanan bir Silverlight 3 sitesi için buton düzenlemeyi anlatacağım.

Makale

Başlayalım. Sitemizde alttaki butonu kullanmak istiyoruz. Over'ı da yanındaki imaj olacak. Ve bu iki buton yumuşak bir fade in/out ile geçiş yapacak.



Yeni bir proje açıyoruz.



Silverlight 3 Application + Website'yi seçiyoruz.



Project tabımızda proje ismine sağ tıklayıp açılan menüde "Add New Folder" a tıklıyoruz.



Bu yeni klasörün ismini images olarak belirliyoruz.



images klasörüne sağ tıklayıp açılan menüde "Add Existing Item" a tıklıyoruz.



Ve daha önce hazırlamış olduğumuz buton ve over imajlarını projemize alıyoruz.



Tool bardan Button kontrolünü seçiyoruz.



Çalışma alanımızda mouse u sürükleyerek Button u yaratıyoruz.


Breadcrumb da Button>Edit Control Parts (Template)>Create Empty'e tıklayarak boş bir buton template i yaratıyoruz.



ControlTemplate'e istediğimiz ismi veriyoruz.



State tabına geçiyoruz.



Normal State'ine tıklıyoruz. Blend kayıta başlamıştır.



Project tabına geçip butonun normal hali için imajımıza çift tıklıyoruz.



İmajımız Object and Timeline a eklenmiş olmalı ve üstünde küçük kırmızı bir daire gözükmeli.



State tabına geri dönüyoruz.



Normal state i için üstünde artı olan küçük okçuğa, "Add transition" ikonuna tıklıyoruz. Açılan menüden Normal - MouseOver'a tıklıyoruz.



Transition ın süresini 1sn olarak belirliyoruz. Butonun normal hali için işlemlerimiz bitmiştir. Şimdi over ı ile ilgilenelim.



MouseOver state'ine tıklıyoruz.



Proje tabına geri dönüp, over imajına çift tıklıyoruz.



Over imajı da eklenmiştir.



MouseOver için MouseOver - Normal transition unu seçiyoruz.



Bunun içinde süremiz 1sn.



İşlemlerimiz bitmiştir. Her şeyi doğru yaptıysak butonumuz alttaki gibi gözükmeli ve  yumuşak bir fade in/out a sahip olmalı.




Bu makalede Expression Blend 3 Preview ile Silverlight 3 için buton kontrolünü düzenlemeyi anlatmaya çalıştım.

İyi çalışmalar

Teşekkürler.
Erbuğ Kaya
www.erbugkaya.com