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

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.