Procedura dettagliata: creazione di un pulsante tramite 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 altre informazioni, vedere Creare 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. Start Expression Blend. (Fare clic su Avviare, scegliere Tutti i programmi, Microsoft Expression e quindi fare clic su Microsoft Expression Blend.

2. Ingrandire l'applicazione, se necessario.

3. Scegliere Nuovo progetto dal menu File.

4. Selezionare Applicazione standard (.exe).

5. Assegnare al progetto CustomButton il nome 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 Background proprietà 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 RadiusX proprietà e RadiusY . Impostare i valori di RadiusX e RadiusY su 20.

   

4. Modificare il rettangolo in un pulsante: selezionare il rettangolo. Scegliere Crea pulsante dal menu Strumenti.

   

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

   

   Per Nome risorsa (chiave) selezionare 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 pulsante risultante avrà ambito 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 per modificare l'aspetto del pulsante

1. Passare alla visualizzazione del modello 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 scegliere Modifica parti di controllo (modello) e quindi Modifica modello.

   

   Nell'editor di modelli si noti che il pulsante è ora separato in un Rectangle oggetto e .ContentPresenter L'oggetto ContentPresenter viene usato per presentare il contenuto all'interno del pulsante , ad esempio la stringa "Button". Sia il rettangolo che ContentPresenter sono disposti all'interno di un oggetto 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 Rectangle nome 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 "Transparent" e StrokeThickness su 5.

   

   Impostare quindi l'oggetto Stroke sul colore di qualsiasi elemento che sarà il modello. A tale scopo, fare clic sulla piccola casella bianca accanto a Stroke, selezionare CustomExpression e digitare "{TemplateBinding Background}" nella finestra di dialogo.

   

4. Creare un rettangolo interno: creare ora 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, perché innerRectangle si trova sopra myContentPresenter. Per risolvere il problema, trascinare myContentPresenter sotto innerRectangle. Riposizionare i rettangoli e myContentPresenter in modo che sia 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 RadiusXvalori , RadiusYe StrokeThickness su 20. Impostare inoltre l'oggetto Fill sullo sfondo del modello usando l'espressione personalizzata "{TemplateBinding Background}" e impostare su Stroke "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 della 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 di outerRectangle. Pertanto, creare il rettangolo semplicemente creando una copia di 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 in posizione.

9. Assegnare a glassCube una forma leggermente diversa da outerRectangle: modificare le proprietà di glassCube. Iniziare modificando le RadiusX proprietà e RadiusY su 10 e su StrokeThickness 2.

   

10. Rendere glassCube come il vetro: impostare su Fill un aspetto vetroso usando una sfumatura lineare che è 75% opaca e alterna tra il colore Bianco e Trasparente oltre 6 intervalli approssimativamente spaziati. Questo è l'elemento per impostare i cursori sfumatura su:

    • Cursore sfumatura 1: bianco con valore alfa pari al 75%

    • Cursore sfumatura 2: trasparente

    • Cursore sfumatura 3: bianco con valore alfa pari al 75%

    • Cursore sfumatura 4: trasparente

    • Cursore sfumatura 5: bianco con valore alfa pari al 75%

    • Cursore sfumatura 6: trasparente

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

    

11. Nascondi lo strato di vetro: ora che viene visualizzato l'aspetto del livello vetro, passare al riquadro Aspetto del pannello Proprietà e impostare Opacity su 0% per nasconderlo. Nelle sezioni successive si useranno trigger ed eventi delle proprietà per mostrare e modificare il livello 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 trigger di proprietà semplici e quindi aggiungere trigger e animazioni di eventi.

Per impostare i trigger delle proprietà

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

2. Impostare IsMouseOver sulla proprietà usata dal trigger: modificare la proprietà in IsMouseOver. In questo modo il trigger della proprietà viene attivato quando la IsMouseOver proprietà è true (quando l'utente punta al pulsante con il mouse).

   

3. IsMouseOver attiva l'opacità del 100% per glassCube: si noti che la registrazione del trigger è attivata (vedere la figura precedente). Ciò significa che tutte le modifiche apportate ai valori delle proprietà di glassCube mentre la registrazione è attiva diventeranno un'azione che si verifica quando IsMouseOver è true. Durante la registrazione, modificare il Opacity valore di glassCube su 100%.

   

   È stato creato il primo trigger di proprietà. Si noti che il pannello Trigger dell'editor ha registrato la Opacity modifica a 100%.

   

   Premere F5 per eseguire l'applicazione e spostare il puntatore del mouse sopra e fuori dal pulsante. Dovrebbe essere visualizzato lo strato di vetro quando si passa il mouse sul pulsante e scompare quando il puntatore esce.

4. IsMouseOver attiva la modifica del valore del tratto: associamo alcune altre azioni al IsMouseOver trigger. Mentre la registrazione continua, passare da glassCube a outerRectangle. Impostare quindi l'oggetto Stroke di outerRectangle sull'espressione personalizzata "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". In questo modo l'oggetto 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: associamo un'altra azione al trigger della IsMouseOver proprietà. Rendi il contenuto del pulsante un po 'sfocato quando il vetro appare sopra di esso. A tale scopo, è possibile applicare una sfocatura BitmapEffect a ContentPresenter (myContentPresenter).

   

   Nota

   Per restituire il pannello Proprietà a quello che era prima di eseguire la ricerca BitmapEffect, deselezionare il testo dalla casella di ricerca.

   A questo punto, è stato usato un trigger di proprietà con diverse azioni associate per creare un comportamento di evidenziazione per quando il puntatore del mouse entra e lascia l'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 IsFocused proprietà .

6. Crea trigger di proprietà per IsFocused: usando la stessa procedura di per IsMouseOver (vedere il primo passaggio di questa sezione), creare un altro trigger di proprietà per la IsFocused proprietà. Durante l'attivazione della registrazione del trigger, aggiungere le azioni seguenti al trigger:

   • glassCube ottiene un valore Opacity pari al 100%.

   • outerRectangle ottiene un Stroke valore di espressione personalizzato "{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 MouseEnter eventi e Click .

Per usare trigger di eventi e animazioni per aggiungere interattività

1. Creare un trigger di evento MouseEnter: aggiungere un nuovo trigger di evento e selezionare MouseEnter come evento da usare nel trigger.

   

2. Crea una sequenza temporale di animazione: associa quindi una sequenza temporale di animazione all'evento MouseEnter .

   

   Dopo aver premuto OK per creare una nuova sequenza temporale, viene visualizzato un pannello sequenza temporale e "La registrazione della sequenza temporale è attiva" è visibile nel pannello di progettazione. Ciò significa che è possibile avviare la registrazione delle modifiche delle proprietà nella sequenza temporale (modificare le proprietà).

   Nota

   Potrebbe essere necessario ridimensionare la finestra e/o i pannelli per visualizzare la visualizzazione.

   

3. Crea un fotogramma chiave: per creare un'animazione, seleziona l'oggetto che vuoi animare, crea due o più fotogrammi chiave nella sequenza temporale e, per questi fotogrammi chiave, imposta i valori delle proprietà tra cui vuoi interpolare l'animazione. La figura seguente illustra la creazione di un fotogramma chiave.

   

4. Compattare glassCube in questo fotogramma chiave: con il secondo fotogramma chiave selezionato, ridurre le dimensioni del glassCube al 90% delle dimensioni complete usando la trasformazione Size.

   

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

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

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

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

      

   3. Per questa sequenza temporale, creare due fotogrammi chiave, uno a 0,0 secondi e il secondo a 0,3 secondi.

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

      

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

Conclusione

È stato 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.

Tenere presente che durante la personalizzazione del modello, impostare la Fill proprietà innerRectangle e la Stroke proprietà outerRectangle sullo 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à. Provare ora a modificare gli sfondi. 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.

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 i trigger di evento. 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.

Vedi anche

• Creare un pulsante usando XAML
• Applicazione di stili e modelli
• Cenni preliminari sull'animazione
• Cenni sul disegno con colori a tinta unita e sfumature
• Panoramica sugli effetti bitmap