Creare un controllo da oggetti esistenti

La funzionalità Crea controllo di Microsoft Expression Blend consente di creare un modello di controllo da un qualsiasi oggetto sulla tavola da disegno. Tramite lo strumento Crea controllo gli oggetti vengono inclusi in una risorsa stile che è possibile riutilizzare.

Suggerimento:

In Expression Blend il termine oggetto indica qualsiasi elemento che è possibile posizionare sulla tavola da disegno, ad esempio un pannello di layout, una forma, un controllo testo, un'immagine, un pulsante, un modello del controllo o qualsiasi altro elemento di progettazione dell'interfaccia utente. Quando si posiziona un elemento dell'interfaccia utente nella tavola da disegno, viene creata un'istanza di oggetto dell'elemento nell'applicazione.

Per creare un pulsante da un ellisse

1. Aprire o creare un nuovo progetto, qualora questa operazione non sia già stata eseguita.

   Per ulteriori informazioni, vedere Creare un nuovo progetto.

2. Nella tavola da disegno disegnare un cerchio utilizzando lo strumento Ellisse nel pannello Strumenti. Per rendere più visibile l'ellisse, è possibile modificarne l'aspetto cambiando le relative proprietà in Pennelli nel pannello Proprietà.

   Per ulteriori informazioni, vedere Applicare un pennello tinta unita o sfumatura al riempimento o al tratto di un oggetto.

3. Fare clic con il pulsante destro del mouse sull'ellisse, scegliere Raggruppa, quindi fare clic sul nome di un contenitore di layout, ad esempio Griglia.

4. Con la griglia selezionata nel pannello Oggetti e sequenza temporale, fare clic su Crea controllo nel menu Strumenti per convertire la griglia in un pulsante.

   Verrà visualizzata la finestra di dialogo Crea controllo.

5. In Tipo di controllo fare clic sul tipo di controllo che si desidera creare, ad esempio Button.

6. In Nome (chiave) selezionare il primo pulsante di opzione, che corrisponde all'impostazione predefinita, e immettere un nome da utilizzare per identificare lo stile del pulsante. In alternativa, è possibile selezionare l'opzione Applica a tutti per applicare lo stile a tutti i pulsanti nella tavola da disegno che non fanno già riferimento a uno stile tramite il nome.

7. In Posizione definizione fare clic sull'opzione corrispondente alla posizione in cui si desidera definire lo stile del pulsante. Fare clic su Applicazione per rendere disponibile lo stile del pulsante per tutti i documenti dell'applicazione. Fare clic su Documento corrente (Window: Window) per rendere disponibile lo stile del pulsante solo per il documento corrente. Fare clic su Dizionario risorse per definire lo stile del pulsante in un dizionario risorse nell'applicazione.

8. Fare clic su OK per chiudere la finestra di dialogo Crea risorsa Style e creare lo stile del pulsante.

   Si noti che nel pannello Oggetti e sequenza temporale l'oggetto ellisse viene convertito in oggetto pulsante il cui stile è impostato in base al nuovo stile del pulsante.

   Lo stile del pulsante viene inoltre visualizzato nella scheda Risorse nel nodo in cui è stato definito, ad esempio il nodo Window.

   Nuovo stile del pulsante visualizzato nella scheda Risorse di Expression Blend

   

Per modificare lo stile del pulsante

1. Per modificare lo stile del pulsante appena creato, fare clic con il pulsante destro del mouse sul nuovo oggetto pulsante nel pannello Oggetti e sequenza temporale, scegliere Modifica modello, quindi fare clic sull'opzione relativa alla modifica del modello corrente.

   Nella tavola da disegno verrà visualizzato l'ambito di modifica del modello del controllo.

   Suggerimento:

   È possibile passare all'ambito di modifica di un modello del controllo in diversi modi. Ad esempio, è possibile visualizzare lo stile del pulsante nella scheda Risorse e quindi fare clic sul pulsante Modifica risorsa accanto al nome della risorsa. In questo modo, si passa all'ambito di modifica dello stile, dal quale è possibile accedere all'ambito di modifica del modello di controllo. A tale scopo fare clic con il pulsante destro del mouse sull'oggetto stile nel pannello Oggetti e sequenza temporale, scegliere Modifica modello, quindi fare clic sull'opzione relativa alla modifica del modello corrente. Per uscire dall'ambito di modifica di un modello di controllo, fare clic su Reimposta l'ambito nel pannello Oggetti e sequenza temporale. Se si è passati all'ambito di modifica del modello del controllo dall'ambito di modifica dello stile, si passerà di nuovo allo stile. Fare di nuovo clic sul pulsante Reimposta l'ambito per tornare alla modalità di modifica del documento.

   Suggerimento:
   Tramite lo strumento Crea controllo l'oggetto originale, ovvero l'ellisse, viene incluso in una risorsa stile che contiene un modello del controllo. Lo stile definisce le proprietà impostate per l'oggetto a cui lo stile stesso è applicato, in questo caso un oggetto pulsante. Il modello del controllo definisce gli stati, la struttura e l'aspetto dell'oggetto.

2. Nel modello del controllo sono presenti un pannello Grid contenente l'oggetto originale, ovvero l'ellisse, e un oggetto ContentPresenter che consente di visualizzare il contenuto dell'oggetto pulsante. Posizionando l'oggetto in un pannello Grid, è possibile aggiungere e disporre rapidamente altri oggetti.

   Struttura del modello del controllo per il nuovo stile del pulsante

   

   È possibile visualizzare la correlazione tra lo stile e il modello del controllo analizzando il file XAML (Extensible Application Markup Language) per la risorsa. La struttura dello stile del pulsante potrebbe ad esempio avere un aspetto simile al seguente:

     <Window.Resources>
       <Style x:Key="ButtonStyle1" ...>  
         <Setter Property="Template">
           <Setter.Value>
             <ControlTemplate TargetType="{x:Type Button}">  
               <Grid>
                 <Ellipse>
                   ...
                 </Ellipse>
                 <ContentPresenter .../>
               </Grid>
               <ControlTemplate.Triggers>
                 ...
               </ControlTemplate.Triggers>
             </ControlTemplate>  
           </Setter.Value>
         </Setter>
       </Style>  
     </Window.Resources>
   

3. Nel pannello Trigger definire gli stati desiderati per il pulsante. Fare ad esempio clic su IsMouseOver = True per attivare la registrazione del trigger per lo stato in cui l'utente posiziona il mouse sul pulsante. Selezionare l'ellisse nel pannello Oggetti e sequenza temporale e in Aspetto nel pannello Proprietà cambiare la proprietà Fill dell'ellisse selezionando un colore diverso. Si noti che in Proprietà per stato attivo nel pannello Trigger viene aggiunta una nuova modifica della proprietà, ellipse.Fill, come illustrato nella figura seguente.

   [!NOTA]

   Per visualizzare la sezione Proprietà per stato attivo, potrebbe essere necessario modificare le dimensioni del pannello Trigger. A tale scopo, fare clic sui bordi del pannello e sul bordo all'interno dello stesso, quindi trascinare.

   Pannello Trigger dopo avere modificato la proprietà Fill dell'ellisse relativa al passaggio del puntatore del mouse sul pulsante.

   

4. È inoltre possibile aggiungere un'animazione al pulsante. Nel pannello Trigger fare ad esempio clic su IsPressed = True per attivare la registrazione del trigger per lo stato in cui l'utente fa clic sul pulsante. Con l'ellisse ancora selezionata nel pannello Oggetti e sequenza temporale, tenere premuti i tasti MAIUSC e ALT mentre si trascina un angolo del controllo contenente l'ellisse. La combinazione di tasti di scelta rapida MAIUSC+ALT consente di mantenere il punto centrale dell'oggetto.

   In alternativa, è possibile aggiungere un'animazione più complessa creando un nuovo storyboard e attivandolo da un trigger per l'evento IsPressed.

   Per ulteriori informazioni, vedere Scrittura di codice che risponde agli eventi.

5. Dopo aver definito gli stati desiderati per il pulsante, fare clic su Reimposta l'ambito nel pannello Oggetti e sequenza temporale per tornare all'ambito di modifica del documento.

6. Per eseguire un test degli stati, scegliere Esegui progetto dal menu Progetto o premere F5 e verificare se gli stati del pulsante funzionano correttamente. Quando, ad esempio, si sposta il puntatore sul pulsante, il colore di riempimento deve cambiare.

Per applicare uno stile a un pulsante

1. Verificare di utilizzare l'ambito di modifica desiderato. È possibile applicare uno stile a un pulsante in qualsiasi ambito, incluso quello di un controllo del modello.

2. Nella tavola da disegno disegnare un pulsante utilizzando lo strumento Button nel pannello Strumenti.

3. Fare clic con il pulsante destro del mouse sul nuovo oggetto pulsante nel pannello Oggetti e sequenza temporale, scegliere Modifica modello, fare clic su Applica risorsa, quindi selezionare lo stile nell'elenco.

   Per applicare una risorsa stile è inoltre possibile utilizzare i comandi Modifica stile e Modifica modello del menu Oggetto.

   Applicazione di uno stile a un oggetto pulsante tramite clic con il pulsante destro del mouse

   

Per rimuovere o cambiare lo stile di un pulsante

• Poiché lo stile del pulsante è una risorsa, considerarlo come tale.

  Per informazioni sulla rimozione o la modifica delle risorse stile, vedere Ripristinare il valore predefinito di una proprietà e Creazione di risorse riutilizzabili.

Vedere anche

Attività

Creare un controllo utente da oggetti esistenti

Concetti

Suggerimenti di stile per controlli di Silverlight comuni
Applicazione di stili alle parti di un modello controllo di Silverlight

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.