Procedura: definire temi delle pagine ASP.NET

Aggiornamento: novembre 2007

In Visual Web Developer è possibile definire temi di pagine che possono essere applicati a una o più pagine dell'applicazione in uso. È anche possibile creare temi a livello di computer, che possono essere utilizzati in più applicazioni sul server.

I temi sono costituiti da diversi file di supporto, inclusi fogli di stile per gestire l'aspetto della pagina, interfacce dei controlli per definire l'aspetto dei controlli server e tutte le altre immagini o gli altri file di supporto necessari per comporre un tema. Il contenuto di un tema è identico sia se il tema viene definito come tema della pagina, sia che venga definito come tema globale.

I temi possono essere applicati utilizzando l'attributo Theme o StyleSheetTheme della direttiva @ Page oppure impostando l'elemento Elemento pages (schema delle impostazioni ASP.NET) nel file di configurazione dell'applicazione. In Visual Web Developer i temi applicati verranno rappresentati solo mediante l'attributo StyleSheetTheme.

Per creare il tema di una pagina

1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web per il quale si desidera creare un tema di pagina e scegliere Aggiungi cartella ASP.NET.

2. Fare clic su Tema.

   Se la cartella App_Themes non esiste ancora, viene creata in Visual Web Developer. Viene quindi creata una nuova cartella per il tema come cartella figlio della cartella App_Themes.

3. Digitare il nome da assegnare alla nuova cartella.

   Il nome di questa cartella corrisponde al nome del tema della pagina. Ad esempio, se si crea una cartella denominata \App_Themes\FirstTheme, il nome del tema è FirstTheme.

4. Aggiungere alla nuova cartella i file relativi alle interfacce dei controlli, ai fogli di stile e alle immagini che compongono il tema.

Per aggiungere un file di interfaccia e un'interfaccia a un tema di pagina

1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul tema e scegliere Aggiungi nuovo elemento.

2. Nella finestra di dialogo Aggiungi nuovo elemento fare clic su File di interfaccia.

3. Nella casella Nome digitare un nome per il file skin e quindi scegliere Aggiungi.

   La convenzione tipica consiste nel creare un file skin per ogni controllo, ad esempio Button.skin o Calendar.skin. È tuttavia possibile creare un numero indefinito di file skin, in base alle esigenze specifiche.

4. Nel file skin aggiungere una normale definizione di controllo utilizzando la sintassi dichiarativa, ma includere solo le proprietà che si desidera impostare per il tema. Nella definizione di controllo è necessario includere l'attributo , mentre non deve essere incluso l'attributo ID="".

   Nell'esempio di codice riportato di seguito viene illustrata un'interfaccia predefinita relativa a un controllo Button, che definisce il colore e il tipo di carattere per tutti i controlli Button del tema.

   <asp:Button  
     BackColor="Red" 
     ForeColor="White" 
     Font-Name="Arial" 
     Font-Size="9px" />
   

   Nell'interfaccia di questo controllo Button non è presente un attributo skinID. L'interfaccia sarà applicata a tutti i controlli Button dell'applicazione con temi in cui non è specificato l'attributo skinID.

   Nota:

   Il modo più semplice per creare l'interfaccia per un controllo consiste nell'aggiungere il controllo a una pagina e configurarla in modo che assuma l'aspetto desiderato. È possibile, ad esempio, aggiungere un controllo Calendar a una pagina e impostarne l'intestazione del giorno, la data selezionata e altre proprietà. Sarà quindi possibile copiare la definizione del controllo dalla pagina in un file di interfaccia; tuttavia sarà necessario rimuovere l'attributo ID.

5. Ripetere i passaggi 2 e 3 per ogni interfaccia del controllo da creare.

   Nota:
   È possibile definire una sola interfaccia predefinita per controllo. Utilizzare l'attributo SkinID nella dichiarazione del controllo dell'interfaccia per creare interfacce specifiche per lo stesso tipo di controllo.

Per aggiungere un file di foglio di stile CSS al tema della pagina

1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul tema e scegliere Aggiungi nuovo elemento.

2. Nella finestra di dialogo Aggiungi nuovo elemento scegliere Foglio di stile.

3. Nella casella Nome digitare un nome per il file css, quindi scegliere Aggiungi.

   Quando il tema viene applicato a una pagina, in ASP.NET viene aggiunto un riferimento al foglio di stile all'elemento Head della pagina. Per ulteriori informazioni, vedere Procedura: applicare temi ASP.NET.

Creazione di temi globali

I temi globali si applicano a tutti i site Web di un server. Il percorso nel quale viene creata una cartella per i temi globali dipende dall'eventualità che per il sito Web si utilizzi IIS (Internet Information Services) o che il test del sito venga effettuato mediante il server di sviluppo ASP.NET.

Nota:
Se si sta utilizzando un sito Web di file system, per impostazione predefinita il sito Web viene eseguito per il test in Visual Web Developer mediante il server di sviluppo ASP.NET. Per altri tipi di siti Web, per il test viene utilizzato IIS in Visual Web Developer.

Per creare un tema globale

1. Creare una cartella Themes utilizzando il percorso indicato di seguito.

   %windows%\Microsoft.NET\Framework\version\ASP.NETClientFiles\Themes
   

   Nota:
   Il nome della cartella relativa ai temi globali è Themes, non App_Themes, che è specifica invece dei temi della pagina.

   Creare una sottocartella della cartella Themes in cui inserire i file di tema globale.

   Il nome della sottocartella corrisponde al nome del tema. Ad esempio, se si crea una cartella denominata \Themes\FirstTheme, il nome del tema è FirstTheme.

2. Aggiungere alla nuova cartella i file relativi alle interfacce dei controlli, ai fogli di stile e alle immagini che compongono il tema globale.

   Nota:
   Quando si definisce un tema globale, non è possibile aggiungere direttamente al tema i file relativi alle interfacce e ai fogli di stile utilizzando Visual Web Developer. Potrebbe risultare più semplice definire ed eseguire il test del tema come tema della pagina e poi copiarlo nella cartella utilizzata per i temi globali, sul server Web in uso.

3. Se il sito Web in uso è un sito Web di file system per il quale si sta eseguendo il test con il server di sviluppo ASP.NET, il tema è pronto per il test.

4. Se, invece, si sta eseguendo il test del sito Web mediante un sito Web IIS locale, aprire una finestra di comando ed eseguire aspnet_regiis -c per installare il tema sul server in cui è in esecuzione IIS.

5. Se, infine, si sta eseguendo il test del tema su un sito Web remoto oppure su un sito Web FTP, è necessario creare manualmente una cartella Temi mediante il percorso indicato di seguito.

   IISRootWeb\aspnet_client\system_web\version\Themes
   

Vedere anche

Concetti

Cenni preliminari su temi e interfacce ASP.NET