In questa lezione vedremo come applicare un tema in fase di runtime, per consentire ad esempio ad un utente, di scegliere il tema che gli piace.
A tale scopo, riprendiamo il progetto realizzato nella precedente lezione. Nella cartella App_Themes aggiungiamo un nuovo tema chiamiamo "Moderno" e vi aggiungiamo skin per definire l'aspetto dei controlli presenti nell' applicazione. Infine in Esplora Soluzioni, saranno visibili i due temi con i relativi file skin.
Usiamo la pagina "Default3.aspx" per realizzare gli skin del tema Moderno in modo visuale e poi copiare il contenuto nei file di interfaccia.
Nella Default.aspx,invece, aggiungiamo una DropDownList, che servirà all'utente per scegliere il tema, ed accanto ad esso un Button, che servirà a dare l'invio per impostare il tema scelto.
Per collegare la lista dei temi disponibili al controllo di selezione (DropDownList) dobbiamo scrivere qualche riga di codice nel gestore dell'evento Page_Load. Si tratta di trovare la cartella App_Themes e le sue sottocartelle per poi inserirle tra gli elementi della DropDownList.
Listato 51. Inserire i temi nella DropDownList
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string[] temi = Directory.GetDirectories(Request.PhysicalApplicationPath + "App_Themes");
DropDownList1.Items.Clear();
foreach(string tema in temi)
DropDownList1.Items.Add(tema.Substring(tema.LastIndexOf("\") + 1));
}
}
NOTA: Per gestire i dati delle cartelle dobbiamo ricordare di includere il namespace System.IO nella pagina di codice.
Una volta selezionato il tema, perché venga applicato dobbiamo implementare il gestore di Page_PreInit, evento che viene generato prima del rendering dei componenti.
Listato 52. Impostare il tema selezionato prima del rendering
protected void Page_PreInit(object sender, EventArgs e)
{
string tema = Request["DropDownList1"];
Page.Theme = tema;
if (tema == null)
Page.Theme = "Classico";
}
Possiamo ora mandare in esecuzione la piccola applicazione creata.
Proviamo a selezionare il tema "Moderno".
Ai temi possiamo anche associare dei CSS scegliendo ad esempio Aggiungi nuovo elemento>Foglio di Stile, dopo aver cliccato con il tasto destro sul tema. Ad esempio creiamo il file "Button.css" nel tema "Classico" ed impostiamo lo stile per l'elemento <input>.
Listato 53. Aggiungere un foglio di stile al tema
input
{
font-style:italic;
font-family:Verdana;
color:Fuchsia;
}
Se proviamo a fare un test, ci accorgiamo che solo il tema Classico è affetto dal CSS, come è lecito aspettarsi, e lo stile italic viene preso da entrambi i pulsanti, mentre il colore fucsia solo da uno, quello con il tema disabilitato, infatti è presente uno skin che definisce il colore e comanda sul CSS.
L'esempio realizzato nel corso di questa lezione può essere scaricato da qui.
