Silverlight Öğreniyorum - Visual State Manager ve Custom State Yapısı

Yusuf Karakaş tarafindan 04:42 tarihinde Silverlight | Silverlight Eğitim Serisi kategorisine eklenmistir.

Visual State Manager

Geçtiğimiz bölümde nesnelerin şablonlarına ulaşıp , nesneler üzerinde değişikliklerin nasıl yapıldığına değinmiştik.Bu aşamada Visual State Manager karşımıza çıkıyor.Visual state manager ile nesnelerin durumlarına göre farklı tasarımlar çıkarıp bu tasarımları animasyon şeklinde göstrebiliyoruz.

· İlk olarak yeni bir buton oluşturalım.Daha sonra butonumuzun şablonuna girerek istediğimiz şekilde bir tasarım oluşturalım.

· Şimdi ise Visual state Manager yapısını inceleyelim.Aşağıdaki şekilde Common States ve Focus States olmak üzere iki farklı states görüyoruz.Nesnelere uygulayacağımız bu durumlarda bu iki durum gruplarından yalnızca bir tanesini kullanabiliyoruz.Örneğin buton nesnesi MouseOver ve Focused olabilir.Bir başka deyişle bu iki state gruptan yalnızca birer state kullanabiliyoruz.

· Artık çalışma zamanında butonun üstüne geldiğimizde MouseOver durumu aktif olacak , ayrıldığımızda ise Normal durumu aktif olacaktır.Böylelikle çok daha rahat bir şekilde durum bazlı şablonlarda değişiklik yapıp kullanabiliyoruz.Bu işlemler gerçekleşirken herhangi bir kod yazılmaması iş akışı açısından büyük bir kolaylık sağlamaktadır.

· Yukarıdaki uygulamamızda örnek olarak bir buton kullandık.Peki farklı bir nesne kullansaydık ne olurdu?Genel olarak yukarıdaki pencereyi göz önüne alacak olursak kullanacağımız her nesneye ait belli özelliklerin statelerinin geleceğini görürüz.Böylelikle farklı her nesnenin kendi özellikleri ile kolayca animasyon yapıp kullanabiliriz.

Custom State

Yukarıdaki bölümümüzde standart kontroller için halihazırda bulunan state yapılarını inceledik.Peki kendi oluşturduğumuz kontroller de bu state yapısını nasıl kullanırız.?

· İlk olarak projemizde yeni bir User Control oluşturalım.User kontrolümüz içinde aşağıdaki şekilde tasarlayalım.

Yukarıdaki şekilde basit bir şekilde kapı açılma tasarımı görünmekte.Şimdi yukarıdaki yapıya uygun olacak şekilde kendi statelerimizi oluşturalım.

· Yukarıda belirlediğimiz durumlara göre animasyon oluşturarak , User kontrolümüzü kaydedelim.Şimdi ise oluşturduğumuz Custom State yapısını kod kısmına göz atalım.Aşağıdaki şekilde durumları nasıl kontrol edebileceğimizi görmekteyiz.

Böylelikle basit bir şekilde kendi State yapımızı oluşturup kullanmış olduk.Artık oluşturmuş olduğumuz bu User Controlü tüm uygulamalarımızda çok rahat bir şekilde kullanabiliriz.