Koray Kırdinli

Yazılım ve İş Yaşamı Hakkında Paylaşımlar

ASP.NET Temalar (Themes)

   Örneğin bir B2B uygulamasında farklı müşterilere farklı logo ve tasarım verme durumunda kalabiliriz. Böyle
durumlarda temalar imdadımıza yetişir ve sadece tek bir dosya ile bu isteğimizi yerine getirebiliriz. Ayrıca sayfadaki kontrollere font,renk,nesne yerleşimleri gibi bir çok görsel özellik burada tanımlanabilir ve bütün sayfalardaki görsel
bütünlük sağlanabilir.

    Asp.net projemizde temaları <App_Themes> klasörü altına eklenir. Bu klasör temalar için kullanılan özel bir
klasördür. Web projemize sağ tıklayarak Add ASP.NET Folder diyerek bu klasörü projemize ekleyebiliriz. Daha sonra bu klasöre Add New Item diyerek Skin File eklenir.

    Bir sayfaya skin file’daki özellikleri uyglamak için @ Page direktiflerine Theme=”Blue” (Bu durumda temadaki
özellik baskındır ve kontrolde lokal olarak uygulanan özelliği ezer)

veya
StylesheetTheme
=”Green”
(Bu da tam tersi olarak kontrolde lokal olarak özellik eklenirse lokal özellik temayı ezer)yapılır.

 Bir skin file’ı bütün web projesine uygulamak istersek de web.config’e
<pages theme=red/> şeklinde ekleyebiliriz.

Bir sayfadaki temayı EnableTheming=”false” diyerek sayfa bazında iptal edilebilir.

Global temalar ise bir serverdaki bütün web sayfalarına uygulanmak üzere kullanılır. IIS üzerindeki web sayfalarına uygulanması için

<iis_default_root>\Aspnet_client\System_web\<version>\Themes

File sistem bazlı web uygulamaları için

%SystemRoot%\Microsoft.NET\Framework\<version>\ASP.NETClientFiles\Themes.

Visual Studio global temaları tanımaz , browserda web sayfası çalıştığı zaman
uygulanır.

Skin dosyası içerisinde aşağıdaki gibi asp.net kontrollere özellikler
verilebilir. SkinId verilmezse bütün projedeki kontrole özellikler eklenir.

<asp:Image runat=”server” ImageUrl=”~/images/image1.jpg”/>

 

<asp:GridView runat=”server” SkinId=”gridviewSkin” BackColor=”White” >

<AlternatingRowStyle BackColor=”Blue” />

</asp:GridView>

Temanın bulunduğu klasöre css dosyaları da ekleyerek html elementlere style’lar
eklenebilir. Css’ler ASP.NET’e özgü değildir bütün web sitelerinde
kullanılabilir.

body
 {text-align:center;

font-family:Arial; 

font-size:10pt;}

.footer

 {margin:20px

0px 20px
0px;
}

Programatik olarak temayı değiştirmek için sayfanın Page_PreInit metodunda  Page.Theme = “blue” diyerek
değiştirilebilir. Herhangi bir kontrolün temasını değiştirmek için de yine aynı şekilde control1.SkinID=”blue” yaparak uygulanabilir.

November 20, 2011 - Posted by | ASP.NET | , , , ,

1 Comment »

  1. Bir sorum olacak
    Her temaya ait aynı isimde farklı özelliklerde CSS kullanabilirmiyiz. Sadece Tema değiştiğinde o temaya bağlı CSS devreye girsin istiyorsak nasıl yaparız?

    Comment by Mehmet | March 28, 2012 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s