Modificare l'aspetto di un sistema di controllo in stati diversi
L'aspetto dei controlli varia in funzione dello stato in cui si trova il controllo stesso. Un pulsante cambia leggermente colore, ad esempio, quando si sposta su di esso il puntatore del mouse. "MouseOver" è uno degli stati di un pulsante. È possibile personalizzare l'aspetto dei diversi stati dei controlli di sistema.
Nella procedura che segue viene utilizzato un pulsante, tuttavia è possibile personalizzare qualsiasi controllo incluso in Microsoft Expression Blend o qualsiasi controllo personalizzato importato da Microsoft Silverlight che eredita dalla classe Control.
Per modificare l'aspetto di un pulsante in stati diversi
Creare un modello riutilizzabile per un controllo di sistema, ad esempio per il controllo Button
.png "Dd185522.05df1779-a68f-436b-b834-a91b7995a3ec(it-it,Expression.40).png")
.Se non si è già nella modalità di modifica dello stile di un modello, fare clic con il pulsante destro del mouse su un controllo nella tavola da disegno, scegliere Modifica modello e quindi fare clic su Modifica corrente. In alternativa, è possibile selezionare l'oggetto e fare clic su Modello nella barra di navigazione.
.png "Dd185522.5bb586ea-6adc-4672-b316-0fab8215ff8c(it-it,Expression.40).png")
Durante la fase di modifica del modello, gli stati del pulsante (ad esempio Normal e MouseOver) vengono visualizzati nel pannello Stati. Gli stati sono contenuti negli StateGroup (ad esempio CommonStates e FocusStates).
.png "Dd185522.7740762c-1a9d-490f-898e-2886ac1cf541(it-it,Expression.40).png")
Nel pannello Oggetti e sequenza temporale sono visualizzate le parti del modello. Queste sono le parti di cui è possibile modificare l'aspetto per un determinato stato.
.png "Dd185522.c3a4acee-4285-4bcd-ac0d-ac6fbd26b306(it-it,Expression.40).png")
Fare clic su MouseOver nel pannello Stati. Si noti che viene visualizzato un cerchio rosso nella parte alta della tavola da disegno, per segnalare che è in corso la registrazione dello stato. Qualsiasi modifica alle proprietà in questa modalità verrà registrata per lo stato in questione.. Nel pannello Oggetti e sequenza temporale le parti del modello che presentano proprietà impostate diversamente rispetto a quando si è selezionato Base vengono selezionate e identificate con cerchi rossi attorno ai pulsanti di espansione.
.png "Dd185522.a95c671a-5639-40b9-83db-1e6b214330d5(it-it,Expression.40).png")
Per modificare le dimensioni del pulsante nello stato MouseOver, fare clic su [Grid] nel pannello Oggetti e sequenza temporale.
.gif "tip note")
Suggerimento:L'oggetto Grid
.png "Dd185522.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(it-it,Expression.40).png")
è un pannello di layout che consente di disporre gli oggetti figlio in base all'allineamento orizzontale, verticale e in base ai margini. Per ulteriori informazioni sui pannelli di layout, vedere Disposizione degli oggetti e Utilizzo del pannello di layout Grid.Nel pannello Proprietà nel menu Trasforma, fare clic sulla scheda Modifica scala
.png "Dd185522.7a93944e-a7f5-4607-babd-768bb5f56185(it-it,Expression.40).png")
. Impostare i valori X e Y su 1.1.Salvare i dati CTRL+S) e quindi premere F5 per compilare e testare l'applicazione. Una volta aperta l'applicazione in una finestra del browser, spostare il puntatore del mouse sul pulsante e notare come si espande.
Risoluzione dei problemi
Alcune parti di modello presentano proprietà associate a valori esterni al modello.. La proprietà Fill della parte Background, ad esempio, è associata mediante modello alla proprietà Background del pulsante. Quando si disegna un pulsante che utilizza questo modello, pertanto, il modello acquisirà il valore che si è impostato sul pulsante stesso. L'associazione mediante modello consente di progettare un controllo personalizzato, pur consentendo alcune modifiche quando si inseriscono i controlli nell'applicazione.
Le proprietà associate vengono identificate nel modello mediante un rettangolo di selezione giallo. Per modificare una proprietà associata mediante modello, fare clic su Opzioni avanzate
.png "Dd185522.12e06962-5d8a-480d-a837-e06b84c545bb(it-it,Expression.40).png")
accanto alla proprietà in questione, quindi scegliere Reimposta..png "Dd185522.31f58be3-51bc-4806-af37-e32422465e8c(it-it,Expression.40).png")
Non è possibile aggiungere stati personalizzati né StateGroup a modelli di controlli di sistema. È tuttavia possibile creare un controllo utente personalizzato e quindi definire stati personalizzati aggiungendo codice per la modifica degli stati in base all'interazione con l'utente.
Per ulteriori informazioni, vedere gli argomenti seguenti:
In caso di problemi durante la visualizzazione dell'applicazione in un browser, è possibile che non sia installato il corretto runtime di Silverlight.
Per ulteriori informazioni, vedere Installare gli strumenti e il runtime Silverlight.
Passaggi successivi
È possibile modificare il tempo impiegato dal pulsante per espandersi quando il puntatore del mouse viene spostato su di esso. Per ulteriori informazioni, vedere Modificare il tempo di transizione tra i cambiamenti di stato.
È possibile aggiungere un'animazione, ad esempio far girare il pulsante quando il puntatore del mouse vi passa sopra. Per ulteriori informazioni, vedere Aggiungere animazione che viene riprodotta dopo un cambiamento di stato.
È possibile applicare questo modello a un altro pulsante del progetto o disegnare un nuovo pulsante a cui è già assegnato il modello. Per ulteriori informazioni, vedere Applicare una risorsa stile.
Vedere anche
Attività
Disegnare un nuovo controllo nel progetto
Modificare il tempo di transizione tra i cambiamenti di stato
Creare un modello riutilizzabile per applicare stile a un sistema di controllo
Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.