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.
