Utilizzare stili semplici
.png "Questa pagina si applica solo ai progetti di WPF")
Durante la progettazione dell'interfaccia utente di un'applicazione in Microsoft Expression Blend è possibile fare molto più che utilizzare i controlli predefiniti o di sistema. È infatti possibile personalizzare e progettare controlli in base alle proprie preferenze per definirne il funzionamento nel modo desiderato e, utilizzando le risorse disponibili in Expression Blend, conferire un aspetto esclusivo e interessante per distinguere l'applicazione dalle altre e creare un'esperienza fortemente personalizzata o un'interfaccia utente coerente in tutte le applicazioni.
[!NOTA]
Gli stili semplici di Expression Blend non sono disponibili 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.
Che cosa sono gli stili semplici?
Gli stili semplici sono un insieme di risorse stile personalizzate e pronte per l'uso per un insieme di controlli di sistema comuni, ad esempio i controlli Button e ListBox. Queste risorse stile semplice sono disponibili in Expression Blend perché la modifica dello stile di un controllo di sistema richiede una certa familiarità con gli stili e i modelli di Windows Presentation Foundation (WPF) per garantire il corretto funzionamento del controllo. È possibile utilizzare gli stili semplici in Expression Blend come insieme di risorse completo da modificare rapidamente per conferire un aspetto esclusivo all'applicazione, senza che sia necessario acquisire familiarità con gli stili e i modelli di Windows Presentation Foundation.
.gif "Cc294894.7e183f1f-37d8-4dcb-980c-19a5d61ca087(it-it,Expression.10).gif")
Torna all'inizio
Creare un controllo stile semplice
Gli stili semplici sono disponibili nella Libreria e possono essere visualizzati facendo clic su Simple Styles nella scheda Controlli. Per visualizzare tutti gli stili semplici disponibili, selezionare la casella di controllo Mostra tutto. Se si seleziona uno stile semplice nella Libreria, l'icona dello stile verrà visualizzata sopra il pulsante Libreria.png "Cc294894.0224cabd-5da1-4e01-bddd-4a647401a098(it-it,Expression.10).png")
e risulterà automaticamente selezionata, per consentire di disegnare direttamente lo stile sulla tavola da disegno. Disegnando uno stile semplice, ad esempio uno stile SimpleButton, nella tavola da disegno, viene creata un'istanza del controllo di sistema, ad esempio il controllo Button, ma con lo stile SimpleButton applicato.
Se si desidera applicare gli stili semplici agli strumenti disponibili negli elenchi a discesa della casella degli strumenti, è possibile fare clic sul pulsante Imposta come predefinito nella Libreria quando è selezionata l'opzione Simple Styles nella scheda Controlli.
Libreria contenente i controlli stile semplice disponibili e l'opzione per impostarli come stili predefiniti
.png "Cc294894.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(it-it,Expression.10).png")
Nella tabella seguente sono inclusi gli stili semplici disponibili e i controlli a cui sono associati.
Stile semplice |
Controllo associato |
Icona |
|---|---|---|
SimpleButton |
Button |
.png "Cc294894.05df1779-a68f-436b-b834-a91b7995a3ec(it-it,Expression.10).png") |
SimpleCheckBox |
CheckBox |
.png "Cc294894.91bc7bff-27d2-4dfe-93ab-844f2952186f(it-it,Expression.10).png") |
SimpleComboBox |
ComboBox |
.png "Cc294894.b174a511-dd12-4a45-a986-034de7693de9(it-it,Expression.10).png") |
SimpleComboBoxItem |
ComboBoxItem |
|
SimpleExpander |
Expander |
.png "Cc294894.a9e00db8-c14d-404f-88cb-5f37a41bc783(it-it,Expression.10).png") |
SimpleLabel |
Label |
.png "Cc294894.a27042f1-4067-4239-b99a-8b2e4c223de0(it-it,Expression.10).png") |
SimpleListBox |
ListBox |
.png "Cc294894.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(it-it,Expression.10).png") |
SimpleListBoxItem |
ListBoxItem |
|
SimpleMenu |
Menu |
.png "Cc294894.015a263c-0b2b-4253-ac57-b86fcb8c9591(it-it,Expression.10).png") |
SimpleMenuItem |
MenuItem |
.png "Cc294894.82c89430-1209-4aa1-b534-cf1cedac74c7(it-it,Expression.10).png") |
SimpleProgressBar |
ProgressBar |
.png "Cc294894.1a4a4117-497e-4920-acaa-d84cb5a1ce83(it-it,Expression.10).png") |
SimpleRadioButton |
RadioButton |
.png "Cc294894.33646a24-f5a1-4b74-9496-e0aaddb922c6(it-it,Expression.10).png") |
SimpleRepeatButton |
RepeatButton in un controllo ListBox |
|
SimpleScrollBar |
ScrollBar |
.png "Cc294894.6513a026-499e-4296-8a67-7558b466bd33(it-it,Expression.10).png") |
SimpleScrollBarRepeatButtonStyle |
RepeatButton in un controllo ScrollBar |
|
SimpleScrollViewer |
ScrollViewer |
.png "Cc294894.5ca26a94-31cd-4fda-83c5-a9564b5b019d(it-it,Expression.10).png") |
SimpleSeparator |
Separator in un controllo ListBox, Menu o ToolBar |
|
SimpleSlider |
Slider |
.png "Cc294894.bf689d92-3c74-4218-815c-e98c930ac189(it-it,Expression.10).png") |
SimpleSliderThumb |
Thumb in un controllo Slider |
|
SimpleTabControl |
TabControl |
.png "Cc294894.f13847cd-7fdf-4757-a648-d5ece98fcaea(it-it,Expression.10).png") |
SimpleTabItem |
TabItem in un controllo TabControl |
|
SimpleTextBox |
TextBox |
.png "Cc294894.343296b4-5c7d-4145-84cc-91b08ba67a1b(it-it,Expression.10).png") |
SimpleThumbStyle |
Thumb in un controllo ScrollBar in un controllo ListBox |
|
SimpleTreeView |
TreeView |
.png "Cc294894.39c99139-8723-49c9-a3e7-f99232d939cb(it-it,Expression.10).png") |
SimpleTreeViewItem |
TreeViewItem in un controllo TreeView |
|
SimpleTreeViewItemToggleButton |
ToggleButton in un controllo TreeView |
Torna all'inizio
Modificare stili semplici
Le risorse stile semplice sono incluse in un dizionario risorse denominato SimpleStyles.xaml. In seguito all'aggiunta di uno stile semplice alla tavola da disegno dalla casella degli strumenti, il dizionario risorse SimpleStyles.xaml viene aggiunto al progetto e tutte le risorse stile semplice risultano visibili nel pannello Risorse.
Il dizionario risorse SimpleStyles.xaml include risorse pennello e altri modelli utilizzati dagli stili semplici. Di seguito vengono indicate tutte le modifiche che è possibile apportare agli stili semplici:
**Modificare i colori ** I colori utilizzati da tutti gli stili semplici sono archiviati come risorse che è possibile modificare. Per modificare una delle risorse colore, fare clic sulla freccia a discesa accanto alla risorsa colore nel pannello Risorse. Per informazioni sui pennelli, vedere Cenni preliminari sull'aspetto.
Modifica di una risorsa pennello nel pannello Risorse
.png "Cc294894.64136c65-52bc-4225-a948-b1171634baca(it-it,Expression.10).png")
**Modificare lo stile ** In Expression Blend è possibile utilizzare lo stile di un controllo per specificare le proprietà e i trigger che verranno utilizzati come impostazioni predefinite dal controllo a cui è applicato lo stile. Le proprietà, ad esempio il colore di sfondo del pennello, influiranno sull'aspetto del controllo e i trigger influiranno sulla modalità di risposta del controllo alle modifiche delle proprietà e agli eventi. Lo stile SimpleButton, ad esempio, include un trigger per la proprietà IsMouseOver che fa sì che l'aspetto del pulsante cambi quando l'utente sposta il puntatore del mouse sul controllo. Il trigger viene attivato quando il valore della proprietà IsMouseOver viene modificato da False a True. Per modificare uno stile semplice, fare clic sul pulsante Modifica risorsa accanto allo stile semplice nel pannello Risorse.
Modifica di una risorsa stile nel pannello Risorse
.png "Cc294894.a6080791-03cf-43ae-9476-22d33e9d8ce4(it-it,Expression.10).png")
**Modificare il modello del controllo ** Il modello di un controllo ne definisce l'aspetto determinando i controlli figlio in esso contenuti. Il modello del controllo per l'elemento SimpleTextBox, ad esempio, contiene un elemento Grid, che a sua volta contiene un elemento Border, che contiene infine un elemento ScrollViewer denominato PART_ContentHost. L'elemento ScrollViewer visualizza il contenuto del controllo TextBox quando si applica lo stile SimpleTextBox a un controllo TextBox nella tavola da disegno. Come avviene per gli stili, nel modello del controllo è possibile impostare proprietà e trigger di evento. Per modificare il modello del controllo per uno stile semplice, fare clic sul pulsante Modifica risorsa accanto allo stile semplice nel pannello Risorse, fare clic con il pulsante destro del mouse sull'elemento di stile visualizzato in Oggetti e sequenza temporale, scegliere Modifica parti del controllo (modello) e quindi fare clic su Modifica modello.
Scelta del comando per la modifica del modello del controllo a partire dall'ambito di modifica dello stile
.png "Cc294894.a64c8f57-1243-4482-87ad-b9d5aac62867(it-it,Expression.10).png")
.gif "Suggerimento")
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. Si tratta di un aspetto importante da ricordare quando si sceglie tra Modifica copia e Modifica modello.
Per un confronto dettagliato tra stili e modelli, vedere Stili e modelli. Per informazioni specifiche sugli stili semplici ed esempi di modifica di stili semplici e modelli di controllo, vedere gli argomenti elencati in Riferimenti ed Esercitazioni in Stili semplici.
Torna all'inizio
Applicare una risorsa stile a un controllo esistente nella tavola da disegno
Gli stili semplici sono risorse che è possibile applicare e gestire come qualsiasi altra risorsa. Per un esempio, vedere Applicare una risorsa stile in questo Manuale dell'utente. Per ulteriori informazioni sulle risorse, vedere Cenni preliminari sulle risorse in questo Manuale dell'utente.
Torna all'inizio