Panoramica degli stili e dei modelli

È possibile personalizzare i controlli di Windows Presentation Foundation (WPF) e di Silverlight 2 in molti modi, anche tramite la creazione di modelli e stili per i controlli, conferendo un aspetto esclusivo e coerente all'applicazione.

[!NOTA]

Stili e modelli non sono supportati nei progetti di Microsoft Silverlight 1.0, ma è possibile creare classi JavaScript per definire controlli riutilizzabili. Per un esempio, vedere la classe Button nell'esempio ButtonGallery disponibile nella scheda Esempi della schermata iniziale, a cui si accede dal menu ?. Per ulteriori informazioni, vedere l'area risorse di Silverlight.

I modelli e gli stili definiscono le parti che costituiscono rispettivamente un controllo e il comportamento del controllo. Per creare modelli e stili, è necessario eseguire copie degli stili e dei modelli di sistema predefiniti per un controllo, in quanto tali stili e modelli di sistema non possono essere modificati. La modifica di modelli e stili rappresenta un metodo semplice per creare essenzialmente nuovi controlli nella visualizzazione Struttura di Microsoft Expression Blend senza che sia necessario utilizzare codice.

Differenza tra stili e modelli

Nella tabella seguente è incluso un confronto dettagliato tra gli stili e i modelli, che consente di determinare se modificare lo stile o il modello di un controllo oppure entrambi.

Caratteristica	Stili	Modelli
Finalità	Tramite gli stili è possibile modificare i valori predefiniti delle proprietà impostate nel controllo a cui è applicato lo stile. È possibile, ad esempio, specificare colori predefiniti per lo sfondo, il bordo e il livello di primo piano di un controllo, ad esempio un pulsante. Tali proprietà degli stili possono essere sostituite dai valori impostati nel controllo stesso quando questo viene disegnato nella tavola da disegno. Se, ad esempio, si imposta un colore di sfondo blu nello stile di un pulsante, il pulsante verrà visualizzato di colore blu quando viene disegnato nella tavola da disegno, ma sarà possibile modificarne il colore. È possibile impostare solo proprietà preesistenti nello stile. Non è possibile, ad esempio, impostare un valore predefinito per una proprietà che appartiene a una nuova parte aggiunta al modello. È possibile, infine, utilizzare stili per specificare il comportamento predefinito di un controllo. In uno stile per un pulsante, ad esempio, è possibile specificare un trigger per fare in modo che, quando gli utenti spostano il puntatore del mouse sul pulsante, il colore di sfondo cambi. Queste modifiche dei valori delle proprietà hanno effetto immediato e non è possibile applicarvi un'animazione graduale.	Tramite i modelli è possibile modificare la struttura del controllo a cui è applicato il modello. È possibile modificare il modello di un controllo per riorganizzare, aggiungere o eliminare gli elementi, o parti, all'interno del controllo. È possibile, ad esempio, aggiungere un'immagine di sfondo o una struttura a un controllo, ad esempio un pulsante. È inoltre possibile modificare i valori delle proprietà, ad esempio il colore di sfondo, impostate nel controllo a cui è applicato il modello. Tali valori dei modelli non possono essere sostituiti dai valori impostati nel controllo stesso quando questo viene disegnato nella tavola da disegno. È tuttavia possibile utilizzare la funzionalità di associazione a modello per impostare le proprietà di un modello in base ai valori delle proprietà del controllo quando questo viene disegnato nella tavola da disegno. Quando si modifica un modello, è possibile accedere a più parti di un controllo rispetto a quando si modifica uno stile. È possibile, ad esempio, modificare il modo in cui l'elenco popup viene visualizzato in una casella combinata oppure modificare l'aspetto del pulsante che attiva l'elenco popup nella casella combinata modificando il modello degli elementi. Alcuni modelli sono costituiti dalle parti seguenti: Visualizzatore di contenuto   Il visualizzatore di contenuto è un segnaposto nel modello del controllo che consente di visualizzare il contenuto del controllo a cui è applicato il modello. Può corrispondere al valore di una proprietà Content, ad esempio in un pulsante, o di una proprietà Text, ad esempio in una casella di testo. Intestazione   Alcuni controlli hanno più proprietà che includono contenuto. In questo caso, nel modello viene utilizzato un altro visualizzatore di contenuto come segnaposto per il tipo di contenuto utilizzato come intestazione. Un esempio di controllo con intestazione è costituito da un controllo elemento scheda in cui l'intestazione è l'etichetta della scheda e il contenuto viene visualizzato al di sotto dell'intestazione. Host di elementi   L'host di elementi viene utilizzato come segnaposto per gli elementi figlio di un controllo. La parte host di elementi di un modello è identificata da Is_Items_Host = True nel pannello Proprietà. ItemContainerTemplate   Un modello di contenitore di elementi è applicato a un controllo che contiene elementi, ad esempio un controllo Menu o List. Questo modello viene utilizzato quando gli elementi vengono aggiunti all'elenco. È possibile, infine, specificare il comportamento di qualsiasi parte nuova ed esistente in un modello tramite l'utilizzo di trigger. È possibile, ad esempio, specificare un trigger per fare in modo che quando gli utenti spostano il puntatore del mouse su un pulsante, il colore di una delle parti cambi. Queste modifiche dei valori delle proprietà possono essere immediate o associate a un'animazione che produce una transizione più graduale. Nota: Non è possibile applicare un'animazione dal valore di una proprietà associata mediante modello o una risorsa colore a un altro valore. Quando si utilizzano animazioni nei trigger, utilizzare valori di proprietà specifici.
Come modificare	È possibile attivare la modalità di modifica per uno stile nei modi seguenti: Tramite il menu In Oggetti e sequenza temporale selezionare il controllo. Scegliere Modifica stile dal menu Oggetto. Eseguire una delle operazioni seguenti: Fare clic su Modifica stile se si desidera modificare lo stile applicato al controllo. Fare clic su Modifica copia per creare una nuova copia dello stile applicato al controllo e contemporaneamente applicare il nuovo stile al controllo. L'opzione Modifica stile non è disponibile se al controllo è applicato lo stile di sistema. Per un esempio, vedere Creare una risorsa stile. Tramite il pannello Risorse (per modificare uno stile esistente) Nota: Gli stili e i modelli sono risorse applicabili ai controlli in modi diversi e archiviabili in diverse posizioni nell'applicazione. Per un esempio di creazione di uno stile, vedere Creare una risorsa stile.	È possibile attivare la modalità di modifica per un modello di un controllo nei modi seguenti: Tramite il menu In Oggetti e sequenza temporale selezionare il controllo. Eseguire una delle operazioni seguenti: Scegliere Modifica parti del controllo (modello) dal menu Oggetto. Fare clic con il pulsante destro del mouse sul controllo e quindi scegliere Modifica parti del controllo (modello). Fare clic su Modifica modello se si desidera modificare il modello applicato al controllo oppure su Modifica copia se si desidera creare una nuova copia del modello applicato al controllo e contemporaneamente applicare il nuovo modello al controllo. L'opzione Modifica modello non è disponibile se al controllo è applicato il modello di sistema. Per un esempio, vedere Creare o modificare il modello di un controllo. Tramite il pannello Risorse (per modificare un modello esistente) Nel pannello Risorse individuare lo stile contenente il modello e quindi fare clic sul pulsante Modifica risorsa accanto allo stile. In Oggetti e sequenza temporale fare clic con il pulsante destro del mouse sugli elementi Style, scegliere Modifica parti del controllo(modello) e quindi fare clic su Modifica modello. Suggerimento: I modelli dei controlli sono contenuti negli stili, in modo che lo stile applicato a un controllo includa sia l'aspetto (le parti) sia il comportamento del controllo. È per questo motivo che è necessario fare clic su Modifica modello anziché su Modifica copia, in quanto nella copia dello stile è incluso il modello.Per tornare all'ambito di modifica del documento principale, è necessario fare clic sul pulsante per l'impostazione dell'ambito padre  due volte, perché con il primo clic si torna alla modalità di modifica dello stile. Nota: Gli stili e i modelli sono risorse applicabili ai controlli in modi diversi e archiviabili in diverse posizioni nell'applicazione. Per un esempio di creazione di un modello, vedere Creare o modificare il modello di un controllo.
Come applicare	È possibile applicare uno stile esistente a un controllo nella tavola da disegno nei modi seguenti: Tramite il menu In Oggetti e sequenza temporale selezionare il controllo. Scegliere Modifica stile dal menu Oggetto, fare clic su Applica risorsa e quindi selezionare lo stile nell'elenco a discesa visualizzato. Nell'elenco a discesa vengono visualizzati solo gli stili disponibili per il controllo selezionato. Non è possibile, ad esempio, applicare uno stile casella di testo a un pulsante. Utilizzo della Libreria per disegnare un controllo a cui è applicato uno stile nella tavola da disegno Aprire la Libreria . Eseguire una delle operazioni seguenti: Se lo stile è stato creato nel documento attualmente utilizzato, fare clic sulla scheda Stili locali. Se lo stile è stato creato in un dizionario risorse (solo WPF), fare clic sulla scheda Controlli e quindi selezionare il dizionario. Selezionare lo stile desiderato e quindi disegnarlo nella tavola da disegno.	È possibile applicare un modello esistente a un controllo nella tavola da disegno nei modi seguenti: Tramite il menu In Oggetti e sequenza temporale selezionare il controllo. Eseguire una delle operazioni seguenti: Scegliere Modifica parti del controllo (modello) dal menu Oggetto. Fare clic con il pulsante destro del mouse sul controllo e quindi scegliere Modifica parti del controllo (modello). Fare clic su Modifica modello se si desidera modificare il modello applicato al controllo oppure su Modifica copia se si desidera creare una nuova copia del modello applicato al controllo e contemporaneamente applicare il nuovo modello al controllo. L'opzione Modifica modello non è disponibile se al controllo è applicato il modello di sistema. Per un esempio, vedere Creare o modificare il modello di un controllo. Tramite il pannello Risorse (per modificare un modello esistente) Nel pannello Risorse individuare lo stile contenente il modello e quindi fare clic sul pulsante Modifica risorsa accanto allo stile. In Oggetti e sequenza temporale fare clic con il pulsante destro del mouse sugli elementi Style, scegliere Modifica parti del controllo (modello) e quindi fare clic su Modifica modello. Per tornare all'ambito di modifica del documento principale, è necessario fare clic sul pulsante per l'impostazione dell'ambito padre  due volte, perché con il primo clic si torna alla modalità di modifica dello stile.

Expression Blend offre un insieme di stili semplici e modelli inclusi in un dizionario risorse nei progetti WPF. È possibile utilizzare i dizionari risorse per progettare un tema per l'applicazione. Per ulteriori informazioni, vedere la sezione Simple styles and resource dictionaries.

Torna all'inizio

Modifica di stili e modelli

Quando ci si trova nell'ambito di modifica di uno stile o di un modello in Expression Blend 2, viene visualizzata una barra di navigazione nella parte superiore sinistra della tavola da disegno.

Barra di navigazione con selezionata la modalità di modifica del modello

Se si fa clic sui pulsanti della barra di navigazione, è possibile spostarsi rapidamente tra modalità di modifica del modello, modalità di modifica dello stile e ambito di modifica dell'oggetto per l'oggetto selezionato. La barra di navigazione viene visualizzata per qualsiasi oggetto selezionato a cui sia applicato uno stile o un modello personalizzato.

Per informazioni sulla modifica di uno stile o di un modello, vedere Modificare uno stile e Creare o modificare il modello di un controllo. Quando si modificano stili o modelli, verificare di utilizzare le Best practices seguenti.

Torna all'inizio

Procedure consigliate

Attenzione:
Quando si modificano stili e modelli, è necessario ricordare le indicazioni seguenti per garantire il corretto funzionamento del controllo di sistema a cui è applicato lo stile o il modello:

• Evitare di modificare i trigger esistenti, a meno che non ci si limiti a modificare solo i pennelli colore.

• Non rinominare o modificare gli elementi il cui nome inizia con "PART_", perché il codice di implementazione del controllo fa riferimento a tali elementi.

• Non rimuovere alcun elemento di supporto, ad esempio l'elemento TabPanel in SimpleTabControl oppure l'elemento Track in SimpleScrollBar. È necessario che tali elementi siano presenti per mantenere le funzionalità del controllo.

• Non reimpostare né modificare le eventuali associazioni nel pannello Proprietà. Tali associazioni sono identificate da un'evidenziazione gialla intorno alla proprietà o da un pulsante Opzioni avanzate proprietà  giallo. L'associazione mediante modello viene utilizzata per associare proprietà nel modello alle proprietà del controllo a cui è applicato il modello.

• Se il modello include un elemento visualizzatore, ad esempio un elemento ContentPresenter o ItemsPresenter, verificare che tale elemento venga mantenuto nel modello. Gli elementi visualizzatore consentono di visualizzare il contenuto definito nel controllo a cui è applicato il modello.

Torna all'inizio

Temi

Un tema è un insieme di stili e modelli che consente di conferire un aspetto coerente a tutti i controlli dell'interfaccia utente. Windows Presentation Foundation, ad esempio, utilizza un tema per le applicazioni WPF in esecuzione in Microsoft Windows XP e un tema diverso per le applicazioni WPF in esecuzione in Windows Vista. È per questo motivo che lo stesso pulsante avrà un aspetto diverso nei due sistemi operativi.

Per determinare l'aspetto di un controllo, ad esempio un pulsante, l'applicazione esegue una ricerca nelle posizioni seguenti:

1. Proprietà impostate in un controllo   Se, ad esempio, si crea un pulsante in Expression Blend e quindi si modifica il colore di sfondo direttamente nel pulsante. L'impostazione di una proprietà direttamente in un controllo comporta la sostituzione di tutti i valori per la proprietà impostati in altri punti.

2. Proprietà impostate nello stile o nel modello personalizzato utilizzato da un controllo   Se, ad esempio, si crea un pulsante in Expression Blend e quindi si modifica una copia del modello per impostare il colore di sfondo nel modello. Tale colore di sfondo verrà utilizzato per il pulsante se la proprietà Background non è impostata direttamente nel pulsante. È possibile definire risorse nel documento che contiene il controllo oppure definire risorse a livello di applicazione, rendendo le risorse disponibili per tutti i documenti nell'applicazione. Le risorse a livello di documento sostituiscono quelle a livello di applicazione.

3. Proprietà non impostate nel modello di sistema utilizzato da un controllo   In Windows Presentation Foundation il modello di sistema viene determinato in base al tema, ovvero in base al sistema operativo.

Torna all'inizio

Stili semplici e dizionari risorse

[!NOTA]

Gli stili semplici e i dizionari risorse non sono supportati nei progetti di Silverlight 2.

È possibile creare un tema creando risorse proprietà, di stile e modello in un singolo file denominato dizionario risorse. I dizionari risorse consentono di riutilizzare un tema in più applicazioni. È inoltre possibile creare temi interscambiabili definendo più dizionari risorse contenenti gli stessi tipi di risorse ma con valori diversi. L'applicazione Expression Blend stessa, ad esempio, utilizza dizionari risorse diversi per un tema scuro e uno chiaro, tra cui è possibile passare scegliendo Opzioni dal menu Strumenti e quindi modificando l'impostazione di Tema per Area di lavoro.

Per le applicazioni personalizzate, Expression Blend offre un dizionario risorse pronto per l'uso denominato SimpleStyles.xaml che contiene un insieme di stili per controlli comuni come pulsanti, caselle di riepilogo e altri. È possibile accedere a tali stili in Simple Styles nella scheda Controlli della Libreria. Quando si utilizza uno degli stili semplici per disegnare un controllo nella tavola da disegno, viene simultaneamente creata la versione di sistema del controllo e viene applicato lo stile semplice. Se, ad esempio, si crea un controllo Button di sistema nella tavola da disegno, il codice XAML risultante sarà il seguente:

<Button Content="Button" ... />

Se si crea un controllo SimpleButton nella tavola da disegno, il codice XAML risultante includerà un riferimento allo stile SimpleButton:

<Button Content="Button" Style="{DynamicResource SimpleButton}" ... />

Dopo avere aggiunto un controllo stile semplice alla tavola da disegno, il file del dizionario risorse SimpleStyles.xaml viene aggiunto al progetto e viene collegato al file app.xaml, in modo che gli stili siano definiti nell'ambito dell'applicazione. È possibile visualizzare tutti gli stili nel pannello Risorse.

Per esempi relativi all'utilizzo di stili semplici, vedere l'argomento in Stili semplici. Per ulteriori informazioni sulla gestione delle risorse, vedere Cenni preliminari sulle risorse.

Torna all'inizio