Procedura dettagliata: Creare un pulsante usando Microsoft Expression Blend

Questa procedura dettagliata illustra il processo di creazione di un pulsante personalizzato WPF con Microsoft Expression Blend.

Importante

Microsoft Expression Blend funziona generando xaml (Extensible Application Markup Language) che viene quindi compilato per rendere il programma eseguibile. Se si preferisce usare direttamente XAML, è disponibile un'altra procedura dettagliata che crea la stessa applicazione di questa usando XAML con Visual Studio anziché Blend. Per ulteriori informazioni, vedi Crea un pulsante usando XAML.

La figura seguente mostra il pulsante personalizzato che verrà creato.

Convertire una forma in un pulsante

Nella prima parte di questa procedura dettagliata si crea l'aspetto personalizzato del pulsante personalizzato. A tale scopo, convertire prima un rettangolo in un pulsante. Si aggiungono quindi altre forme al modello del pulsante, creando un pulsante di visualizzazione più complesso. Perché non iniziare con un pulsante normale e personalizzarlo? Poiché un pulsante ha funzionalità predefinite che non è necessario; per i pulsanti personalizzati, è più facile iniziare con un rettangolo.

Per creare un nuovo progetto in Expression Blend

1. Avvia Expression Blend. Fare clic su Start, scegliere Tutti i programmi, puntare su Microsoft Expressione quindi fare clic su Microsoft Expression Blend.

2. Ingrandire l'applicazione, se necessario.

3. Nel menu File fare clic su Nuovo progetto.

4. Selezionare applicazione standard (.exe).

5. Assegnare al progetto il nome CustomButton e premere OK.

A questo punto è disponibile un progetto WPF vuoto. È possibile premere F5 per eseguire l'applicazione. Come ci si può aspettare, l'applicazione è costituita solo da una finestra vuota. Successivamente, si crea un rettangolo arrotondato e lo si converte in un pulsante.

Per convertire un rettangolo in un pulsante

1. Impostare la proprietà Sfondo finestra su nero: Selezionare la finestra, fare clic sulla scheda Proprietà e impostare la proprietà Background su Black.

   

2. Disegnare un rettangolo approssimativamente le dimensioni di un pulsante nella finestra: Selezionare lo strumento rettangolo nel pannello degli strumenti a sinistra e trascinare il rettangolo nella finestra.

   

3. Arrotondare gli angoli del rettangolo: trascinare i punti di controllo del rettangolo o impostare direttamente le proprietà RadiusX e RadiusY. Impostare i valori di RadiusX e RadiusY su 20.

   

4. Modificare il rettangolo in un pulsante: Selezionare il rettangolo. Sul menu Strumenti, fare clic su Crea Pulsante.

   

5. Specificare l'ambito dello stile/modello: viene visualizzata una finestra di dialogo simile alla seguente.

   

   Per nome risorsa (chiave), seleziona Applica a tutti. In questo modo il modello di stile e pulsante risultante verrà applicato a tutti gli oggetti che sono pulsanti. Per Definisci in, selezionare applicazione. In questo modo il modello di stile e di pulsante risultante avranno effetto sull'intera applicazione. Quando si impostano i valori in queste due caselle, lo stile e il modello del pulsante si applicano a tutti i pulsanti all'interno dell'intera applicazione e qualsiasi pulsante creato nell'applicazione userà per impostazione predefinita questo modello.

Modificare il modello di pulsante

È ora disponibile un rettangolo che è stato modificato in un pulsante. In questa sezione si modificherà il modello del pulsante e si personalizza ulteriormente l'aspetto.

Per modificare il modello di pulsante e cambiare l'aspetto del pulsante

1. Vai alla visualizzazione dei modelli di modifica: Per personalizzare ulteriormente l'aspetto del pulsante, è necessario modificare il modello di pulsante. Questo modello è stato creato quando il rettangolo è stato convertito in un pulsante. Per modificare il modello di pulsante, fare clic con il pulsante destro del mouse sul pulsante e selezionare Modifica parti di controllo (modello) e quindi Modifica modello.

   

   Nell'editor di modelli, nota che il pulsante è ora separato in un Rectangle e il ContentPresenter. Il ContentPresenter viene usato per presentare il contenuto all'interno del pulsante (ad esempio, la stringa "Button"). Sia il rettangolo che ContentPresenter sono posizionati all'interno di un Grid.

   

2. Modificare i nomi dei componenti del modello: fare clic con il pulsante destro del mouse sul rettangolo nell'inventario dei modelli, modificare il nome Rectangle da "[Rectangle]" a "outerRectangle" e modificare "[ContentPresenter]" in "myContentPresenter".

   

3. Modificare il rettangolo in modo che sia vuoto all'interno (ad esempio un anello): Selezionare outerRectangle e impostare Fill su "Trasparente" e StrokeThickness su 5.

   

   Quindi, imposta il Stroke sul colore che avrà il modello. A tale scopo, fare clic sulla piccola casella bianca accanto a Tratto, selezionare CustomExpressione digitare "{TemplateBinding Background}" nella finestra di dialogo.

   

4. Creare un rettangolo interno: Ora creare un altro rettangolo (denominarlo "innerRectangle") e posizionarlo simmetricamente all'interno di outerRectangle . Per questo tipo di lavoro, probabilmente vuoi ingrandire il pulsante nell'area di modifica.

   Nota

   Il rettangolo potrebbe avere un aspetto diverso da quello nella figura( ad esempio, potrebbe avere angoli arrotondati).

   

5. Sposta ContentPresenter nella parte superiore: A questo punto, è possibile che il testo "Button" non sia più visibile. In questo caso, questo avviene perché innerRectangle è sopra myContentPresenter. Per risolvere questo problema, trascinare myContentPresenter sotto innerRectangle. Riposizionare i rettangoli e myContentPresenter per avere un aspetto simile al seguente.

   Nota

   In alternativa, è anche possibile posizionare myContentPresenter in alto facendo clic con il pulsante destro del mouse e premendo Invia avanti.

   

6. Modificare l'aspetto di innerRectangle: Impostare i valori RadiusX, RadiusYe StrokeThickness su 20. Impostare inoltre il Fill sullo sfondo del modello usando l'espressione personalizzata "{TemplateBinding Background}" ) e impostare Stroke su "transparent". Si noti che le impostazioni per Fill e Stroke di innerRectangle sono l'opposto di quelle per outerRectangle .

   

7. Aggiungere uno strato di vetro in alto: Il pezzo finale di personalizzazione dell'aspetto del pulsante consiste nell'aggiungere uno strato di vetro in cima. Questo strato di vetro è costituito da un terzo rettangolo. Poiché il vetro coprirà l'intero pulsante, il rettangolo di vetro è simile alle dimensioni del outerRectangle. Pertanto, crea il rettangolo semplicemente facendo una copia del outerRectangle. Evidenziare outerRectangle e usare CTRL+C e CTRL+V per creare una copia. Assegnare al nuovo rettangolo il nome "glassCube".

8. Riposiziona glassCube se necessario: Se glassCube non è già posizionato in modo da coprire l'intero pulsante, trascinalo nella posizione corretta.

9. Dai a glassCube una forma che sia leggermente diversa da outerRectangle: Cambia le proprietà di glassCube. Iniziare modificando le proprietà RadiusX e RadiusY su 10 e il StrokeThickness su 2.

   

10. Make glassCube assomiglia al vetro: Impostare il Fill su un aspetto vetroso usando una sfumatura lineare che è 75% opaca e alterna tra il colore Bianco e Trasparente oltre 6 intervalli approssimativamente spaziati. Ecco come impostare i punti di gradiente a:

    • Punto di gradiente 1: bianco con alfa di 75%

    • Cursore sfumatura 2: trasparente

    • Gradient Stop 3: Bianco con valore alfa pari a 75%

    • Cursore sfumatura 4: trasparente

    • Cursore sfumatura 5: bianco con valore alfa 75 (%)

    • Cursore sfumatura 6: trasparente

    In questo modo si crea un aspetto di vetro "ondulato".

    

11. Nascondere lo strato di vetro: Ora che viene visualizzato l'aspetto dello strato vetroso, passare al riquadro Aspetto del pannello Proprietà e impostare Opacity su 0% per nasconderlo. Nelle sezioni successive, useremo trigger ed eventi delle proprietà per mostrare e modificare lo strato di vetro.

    

Personalizzare il comportamento del pulsante

A questo punto, è stata personalizzata la presentazione del pulsante modificandone il modello, ma il pulsante non reagisce alle azioni dell'utente come i pulsanti tipici (ad esempio, la modifica dell'aspetto al passaggio del mouse, la ricezione dello stato attivo e il clic). Le due procedure successive illustrano come compilare comportamenti simili a questi nel pulsante personalizzato. Inizieremo con semplici trigger di proprietà e quindi aggiungeremo i trigger di eventi e le animazioni.

Per impostare i trigger delle proprietà

1. Crea un nuovo trigger di proprietà: Con glassCube selezionato, fare clic su + Proprietà nel pannello Triggers (vedere la figura che segue il passaggio successivo). Questo crea un trigger di proprietà con un trigger di proprietà predefinito.

2. Make IsMouseOver la proprietà usata dal trigger: Modificare la proprietà in IsMouseOver. In questo modo, il trigger della proprietà si attiva non appena la proprietà IsMouseOver è true (quando l'utente punta al pulsante con il mouse).

   

3. IsMouseOver attiva l'opacità di 100% per glassCube: Si noti che la registrazione del trigger è in (vedere la figura precedente). Ciò significa che qualsiasi modifica apportata ai valori delle proprietà di glassCube mentre la registrazione è attiva diventerà un'azione che viene eseguita quando IsMouseOver è true. Durante la registrazione, cambia il Opacity di glassCube a 100%.

   

   Hai appena creato il tuo primo trigger di proprietà. Nota che il pannello dei trigger dell'editor ha registrato che il Opacity è stato modificato in 100%.

   

   Premere F5 per eseguire l'applicazione e spostare il puntatore del mouse sopra e fuori dal pulsante. Dovrebbe apparire lo strato di vetro quando si passa il mouse sul pulsante e scomparire quando il puntatore si allontana.

4. IsMouseOver attiva un cambiamento del valore del tratto: Associamo altre azioni al trigger di IsMouseOver. Mentre la registrazione continua, selezionare da glassCube a outerRectangle. Impostare, quindi, il Stroke di outerRectangle sull'espressione personalizzata di "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". In questo modo il Stroke viene impostato sul colore di evidenziazione tipico utilizzato dai pulsanti. Premere F5 per visualizzare l'effetto quando si passa il mouse sul pulsante.

   

5. IsMouseOver attiva il testo sfocato: Associa un'altra azione al trigger della proprietà IsMouseOver. Rendi il contenuto del pulsante un po' sfocato quando è coperto dal vetro. A tale scopo, è possibile applicare una sfocatura BitmapEffect al ContentPresenter (myContentPresenter).

   

   Nota

   Per ripristinare il pannello Proprietà a com'era prima della ricerca di BitmapEffect, cancella il testo dalla casella di ricerca .

   A questo punto, abbiamo utilizzato un trigger di proprietà con diverse azioni associate per creare un effetto di evidenziazione quando il puntatore del mouse entra o esce dall'area del pulsante. Un altro comportamento tipico per un pulsante consiste nell'evidenziare quando ha lo stato attivo (come dopo che è stato fatto clic). È possibile aggiungere questo comportamento aggiungendo un altro trigger di proprietà per la proprietà IsFocused.

6. Creare un trigger di proprietà per IsFocused: Utilizzando la stessa procedura di IsMouseOver (vedere il primo passaggio di questa sezione), creare un altro trigger di proprietà per la proprietà IsFocused. Mentre la registrazione del trigger è in, aggiungi le seguenti azioni al trigger:

   • glassCube ottiene un Opacity pari a 100%.

   • outerRectangle riceve un valore di espressione personalizzato Stroke "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}".

Come passaggio finale di questa procedura dettagliata, aggiungeremo animazioni al pulsante. Queste animazioni verranno attivate dagli eventi, in particolare gli eventi MouseEnter e Click.

Per usare trigger di eventi e animazioni per aggiungere interattività

1. Crea un trigger di evento MouseEnter: Aggiungi un nuovo trigger di evento e seleziona MouseEnter come evento da usare nel trigger.

   

2. Crea una sequenza temporale di animazione: Avanti, associare una sequenza temporale di animazione all'evento MouseEnter.

   

   Dopo aver premuto OK per creare una nuova sequenza temporale, viene visualizzata una pannello sequenza temporale e "Registrazione sequenza temporale attivata" è visibile nel pannello di progettazione. Ciò significa che possiamo iniziare a registrare i cambiamenti delle proprietà nella sequenza temporale (animare i cambiamenti delle proprietà).

   Nota

   Potrebbe essere necessario ridimensionare la finestra e/o i pannelli per vedere lo schermo.

   

3. Crea un fotogramma chiave: Per creare un'animazione, selezionare l'oggetto da animare, creare due o più fotogrammi chiave nella sequenza temporale e, per tali fotogrammi chiave, impostare i valori delle proprietà tra cui eseguire l'interpolazione dell'animazione. La figura seguente illustra la creazione di un fotogramma chiave.

   

4. Shrink glassCube in questo fotogramma chiave: Con il secondo fotogramma chiave selezionato, ridurre le dimensioni del glassCube a 90% delle dimensioni complete usando l'Size Transform .

   

   Premere F5 per eseguire l'applicazione. Spostare il puntatore del mouse sul pulsante. Si noti che lo strato di vetro si riduce al di sopra del pulsante.

5. Creare un altro trigger evento e associare un'animazione diversa a esso: Aggiungiamo un'altra animazione. Usare una procedura simile a quella usata per creare l'animazione del trigger di eventi precedente:

   1. Creare un nuovo attivatore di evento usando l'evento Click.

   2. Associare una nuova sequenza temporale all'evento Click.

      

   3. Per questa linea temporale, crea due fotogrammi chiave: uno a 0,0 secondi e l'altro a 0,3 secondi.

   4. Con il fotogramma chiave a 0,3 secondi evidenziati, impostare il Ruota angolo di trasformazione su 360 gradi.

      

   5. Premere F5 per eseguire l'applicazione. Fare clic sul pulsante . Si noti che lo strato di vetro ruota intorno.

Conclusione

Hai completato un pulsante personalizzato. Questa operazione è stata eseguita usando un modello di pulsante applicato a tutti i pulsanti nell'applicazione. Se si lascia la modalità di modifica del modello (vedere la figura seguente) e si creano altri pulsanti, si noterà che sembrano e si comportano come il pulsante personalizzato anziché come il pulsante predefinito.

Premere F5 per eseguire l'applicazione. Fare clic sui pulsanti e notare come si comportano tutti gli stessi.

Ricorda che mentre personalizzavi il modello, hai impostato la proprietà Fill di innerRectangle e la proprietà StrokeouterRectangle allo sfondo del modello ({TemplateBinding Background}). Per questo motivo, quando imposti il colore di sfondo dei singoli pulsanti, lo sfondo impostato verrà usato per le rispettive proprietà. Prova a modificare gli sfondi ora. Nella figura seguente vengono usate sfumature diverse. Pertanto, anche se un modello è utile per la personalizzazione complessiva di controlli come il pulsante, i controlli con modelli possono comunque essere modificati per apparire diversi l'uno dall'altro.

Pulsanti

In conclusione, nel processo di personalizzazione di un modello di pulsante si è appreso come eseguire le operazioni seguenti in Microsoft Expression Blend:

• Personalizzare l'aspetto di un controllo.

• Impostare i trigger delle proprietà. I trigger di proprietà sono molto utili perché possono essere usati nella maggior parte degli oggetti, non solo nei controlli.

• Impostare gli attivatori di eventi. I trigger di evento sono molto utili perché possono essere usati nella maggior parte degli oggetti, non solo nei controlli.

• Creare animazioni.

• Varie: creare sfumature, aggiungere BitmapEffects, usare trasformazioni e impostare le proprietà di base degli oggetti.

Vedere anche

• Creare un pulsante con XAML
• Stili e gestione dei modelli
• Panoramica dell'animazione
• Panoramica di pittura con colori a tinta unita e sfumature
• Panoramica effetti bitmap