Gestire centralmente l'aspetto di una applicazione Asp.Net

In un sito Asp.Net è possibile creare uno i più Temi (Theme), i quali a loro volta includono fogli di stile Css e skin.

Gli stili Css definiscono l'aspetto degli elementi definiti nella pagina lato client, mentre le skin servono a definire l'aspetto dei controlli lato server. Una volta renderizzate nella pagina web finale, le definizioni delle skin si traducono in codice html oppure  stili css in linea.

L'obiettivo resta sempre quello di definire l'aspetto dell'intero sito da un'unica posizione, in modo da non dover modificare tutte le pagine web. Ad esempio se voglio che tutte le caselle di testo della mia applicazione abbiano un bordo rosso e lo sfondo grigio, posso farlo agendo solo su un file .skin senza dover modificare le decine di textbox sparse per il sito.
Le skin sono applicabili anche a controlli più complessi come i GridView.

Creare un Tema (Theme)

Per attivare i Temi in Visual Studio 2010 bisogna creare una cartella speciale App_Themes:

Solution Explorer >> Tasto destro sul sito >> Add Asp.Net Folder >> App_Themes

Un sito può contenere uno o più temi, pertanto si crea una sottocartella per ogni tema.

Tasto destro sulla cartella App_Themes >> Add Asp.Net Folder >> Theme >> Dare un nome alla cartella

Ogni cartella del Tema può contenere più file di tipo .css per i fogli di stile e .skin per le Skin.

Aggiungere un foglio di stile:

Tasto destro sulla cartella del tema >> Add Item >> Style Sheet

Aggiungere una Skin:

Tasto destro sulla cartella del tema >> Add Item >> Skin File

Definire una Skin

Nel file .skin si possono definire i controlli come si fa normalmente in una pagina .aspx; la sola differenza è che non si definisce l'attributo Id del controllo.
In questo esempio si definisce il colore di sfondo, il bordo e la larghezza di tutti i controlli textbox ai quali viene applicato il tema.

<asp:TextBox runat="server" BackColor="#CCCCCC" BorderColor="#ED427C" Width="180px" />

In molti casi può essere più conveniente specificare la classe Css di un controllo, che dovrà essere definita all'interno di un file .css nello stesso tema.

<asp:TextBox runat="server" CssClass="pulsante" />

Si può anche specificare uno SkinId. In questo caso la skin viene applicata solo ai controlli in cui è specificato lo SkinId. Questo offre una maggiore flessibilità.

<asp:TextBox runat="server" BackColor="#CCCCCC" BorderColor="#ED427C" SkinId="RedButton" />

Applicare un Tema

I temi vengono elaborati a runtime. Quando un tema è applicato a una pagina web, questa include tutti i fogli di stile .css presenti nella cartella del tema. Questo si traduce nelle istruzioni html all'interno dei tag head per l'inclusione dei file:

<link href="../App_Themes/Bianco/StyleSheet.css" type="text/css" rel="stylesheet" />

Se un foglio di stile è uguale per tutti i temi del sito (es. css specifici per la stampa) è comodo definirlo in una cartella separata e includerlo nella master page o direttamente nella pagina aspx.

Applicare un tema a tutto il sito web

Per applicare un tema ad un intero sito web oppure a tutti i file contenuti in una cartella si agisce sul file web.config:

<configuration>
	<system.web>
		<pages theme="Bianco"></pages>
	</system.web>
</configuration>

Ad esempio si può usare un tema per il front end del sito e uno per il back end.

Applicare un tema a una singola pagina web

In questo caso si aggiunge la proprietà Theme alla direttiva Page della singola pagina aspx.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"
		Inherits="Default_Skin" Theme="Bianco" %>

Applicare un tema in modo programmatico

E' anche possibile applicare un tema a livello di codice VB/C#, ad esempio leggendolo da una variabile di configurazione o da un cookie.

Page.Theme = "Bianco"

Autore: Sergio Roberto Boarina