Skin ve Themes (1)

[SaidX]

Skin ve Themes (1)


Günümüzde MediaPlayer,Winamp yada Messanger gibi uygulamalarda artık tek bir klikle tüm görselliği degiştirebilmekteyiz.. Windows ugulamalarında durum böyleken, neden Web uygulamalrında olmasın dediğim olmuştur. İşte tamda bu noktada .Net 2.0 ile gelen, Skin ve Theme desteği işimiz kolaylaştıracak ve kullanıclarımıza web sitelerimizi daha sevimli gösterecektir. Kısmende olsa theme desteğini CSS dosyaları kullanarakda bir sayfanın görselliğini degiştirebilmekteydik. Skin lerin CSS dosyalarından farkı sunucu taraflı kontroller de kullanılabilir olmasıdır. Örneklerle bu konuyu detaylı bi sekilde inceleyelim.

Yeni bir web site acıp asagıdaki gibi bir sayfa dizayn edelim.




Görüldüğü gibi henüz bir grafiksel,sekilsel tasarım yok.Simdi bu kontroller için şekilsel tanımlar yapmak için bir skin dosyası oluşturalım. Yapmamız gereken ilk şey projemize App_Themes klasörü eklemek..Yaratacagım tüm skin ve hatta CSS dosyalarını bu klasör altında toplayacağz.(Asp.Net 2.0 ile gelen yeni yapı)




Olusan Theme1 klasörüne sağ klikleyip deneme isimli bir Skin File ekleyin.Olusturdğunuz deneme.skin dosyasına aşağıdaki kodları yazın.

Deneme.skin

Bu Bölümü Sadece Kayıtlı Kullanıcılar Görebilir.

Dikkat edecek olursanız sanki sunucu kontrolü oluşturuyoruz.tek farkı “ID=Label” yada ID=”Textbox1” gibi degerlerin olmamasıdır.Bunun sebebebi olusturğumuz degerler sayfaki kontrollerin tümüne etki edecektir. Yani

Bu Bölümü Sadece Kayıtlı Kullanıcılar Görebilir.

Sayfamızı derlediğimizde görüntü aşağıdaki şekilde olacaktır.








Su an yaptığımız .skin file sadece bu sayfa için geçerli .Bu file ın tüm uygulama için geçerli olmasını şağlayabilmek için yapmamız gereken şey Web.config dosyasında aşağıdaki gibi bir kaç ufak degişiklik yapmak.

Bu Bölümü Sadece Kayıtlı Kullanıcılar Görebilir.

Bu koddan sonra artık Projeye ekleğiniz tüm sayfalardaki textbox,label ve butonlar aynı görselliğe sahip olacaktır. Ancak eğer istenirse kimi kontrollerin uygulanan Tema dan etkilenmemeisni sağlayabiliriz.Bunun için tema nın uygulanmamasını istediğiniz kontrolün EnableTheming özelliğini false yapmanız yeterli olacaktır.



Simdi olayı biraz daha kurcalayalım.Sayfamızdaki Label yada Textbox kontrollerinin hepsini aynı sekilde olmasını istemeyebiliriz.Bunu saylayabilmemiz için oluşturcağımız .skin leri SkinID değeri ile birbirlerinden ayırmalıyız.Simdi bir örnekle inceleyelim.


Olustuduğumuz deneme.skin dosyasını aşagıdaki gibş düzenleyelim.


Deneme.skin

Bu Bölümü Sadece Kayıtlı Kullanıcılar Görebilir.

Görüldüğü gibi label ve textbox lar için kod ekleyip SkinID değeri atadım .Simdi yapmamız gereken istenilen kontrollerin SkinID degerlerini belirtmek ben sayfamdaki alttaki label ve textbox ın SkinID propertilerine “alttaki” degerini atadım.Bu işlemi properties panelinden yada sayfanın Source kısmından yapabilirsiniz.





Deneme.aspx

Bu Bölümü Sadece Kayıtlı Kullanıcılar Görebilir.

Sayfayı derlediğmizde görüntü aşağıdaki şekilde olacaktır..






.Skin file ları tüm asp kontrollerinde kullanabiliriz .Simdi birde listbox kontrolünde .skin file kullanımını inceleyelim.Listbox kontrolündeki item değerlerini bile .skin file değiştirebiliriz.Simdi bi örnekle listbox kullanımını inceleyelim.

İlk olarak sayfanıza bir listbox ekleyin ve hiçbir özelliğini degiştirmeyin. Daha
Theme1 klasörüne Listem.skin isimli bir Skin file ekleyelin ve aşağıdaki gibi yapılandırın.


Listem.skin

Bu Bölümü Sadece Kayıtlı Kullanıcılar Görebilir.

Sayfanızı derlediğinizde görüntü aşagıdaki sekilde olacaktır.







Tema ve Skin ile alakalı diger makalem Skin file larda resim kullanamı ve runtime da dinamic olarak tema degiştirebilme hakkında olacak.



İyi Çalışmalar..