Procedura dettagliata: creazione di un pulsante tramite Microsoft Expression BlendWalkthrough: Create a Button by Using Microsoft Expression Blend

In questa procedura dettagliata è illustrato il processo di creazione di un WPFWPF pulsante personalizzato mediante Microsoft Expression Blend.This walkthrough steps you through the process of creating a WPFWPF customized button using Microsoft Expression Blend.

Importante

Microsoft Expression Blend funziona generando Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) che viene quindi compilata per rendere il programma eseguibile.Microsoft Expression Blend works by generating Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) that is then compiled to make the executable program. Se si preferisce utilizzare con Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) direttamente, è disponibile un'altra procedura dettagliata che consente di creare utilizzando la stessa applicazione Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) con Visual Studio anziché Blend.If you would rather work with Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) directly, there is another walkthrough that creates the same application as this one using Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) with Visual Studio rather than Blend. Vedere creare un pulsante utilizzando il codice XAML per ulteriori informazioni.See Create a Button by Using XAML for more information.

Nella figura seguente mostra il pulsante personalizzato che verrà creato.The following illustration shows the customized button that you will create.

Pulsante personalizzato che si creerannoThe customized button that you will create

Convertire una forma in un pulsanteConvert a Shape to a Button

Nella prima parte di questa procedura dettagliata creare l'aspetto del pulsante personalizzato.In the first part of this walkthrough you create the custom look of the custom button. A tale scopo, innanzitutto è necessario convertire un rettangolo a un pulsante.To do this, you first convert a rectangle to a button. Aggiungere quindi altre forme per il modello del pulsante di creazione di un pulsante esaminando più complesso.You then add additional shapes to the template of the button, creating a more complex looking button. Perché non dispone di un pulsante normale e personalizzare il report?Why not start with a regular button and customize it? Poiché un pulsante è una funzionalità integrata che non è necessaria; per i pulsanti personalizzati, è facile iniziare con un rettangolo.Because a button has built-in functionality that you do not need; for custom buttons, it is easier to start with a rectangle.

Per creare un nuovo progetto in Expression BlendTo create a new project in Expression Blend

  1. Avviare Expression Blend.Start Expression Blend. (Fare clic su avviare, scegliere tutti i programmi, scegliere Microsoft Expression, quindi fare clic su Microsoft Expression Blend.)(Click Start, point to All Programs, point to Microsoft Expression, and then click Microsoft Expression Blend.)

  2. Ottimizzare l'applicazione.Maximize the application if needed.

  3. Scegliere Nuovo progetto dal menu File.On the File menu, click New Project.

  4. Selezionare applicazione Standard (.exe).Select Standard Application (.exe).

  5. Denominare il progetto CustomButton e premere OK.Name the project CustomButton and press OK.

A questo punto si dispone di uno spazio vuoto WPFWPF progetto.At this point you have a blank WPFWPF project. È possibile premere F5 per eseguire l'applicazione.You can press F5 to run the application. Come prevedibile, l'applicazione è costituita solo da una finestra vuota.As you might expect, the application consists of only a blank window. Successivamente, creare un rettangolo arrotondato e convertirlo in un pulsante.Next, you create a rounded rectangle and convert it into a button.

Per convertire un rettangolo a un pulsanteTo convert a Rectangle to a Button

  1. Impostare la proprietà di sfondo della finestra su nero: selezionare la finestra, fare clic sui scheda delle proprietàe impostare il Background proprietà Black.Set the Window Background property to black: Select the Window, click the Properties Tab, and set the Background property to Black.

    Come impostare lo sfondo di un pulsante sul neroHow to set the background of a button to black

  2. Disegna un rettangolo approssimativamente alle dimensioni di un pulsante della finestra: selezionare lo strumento rettangolo nel riquadro sinistro dello strumento e trascinare il rettangolo nella finestra.Draw a rectangle approximately the size of a button on the Window: Select the rectangle tool on the left-hand tool panel and drag the rectangle onto the Window.

    Come disegnare un rettangoloHow to draw a rectangle

  3. Arrotondare gli angoli del rettangolo: trascinare i punti di controllo del rettangolo oppure impostare direttamente il RadiusX e RadiusY proprietà.Round out the corners of the rectangle: Either drag the control points of the rectangle or directly set the RadiusX and RadiusY properties. Impostare i valori di RadiusX e RadiusY a 20.Set the values of RadiusX and RadiusY to 20.

    Come rendere arrotondare gli angoli del rettangoloHow to make the corners of a rectangle round

  4. Modificare il rettangolo in un pulsante: selezionare il rettangolo.Change the rectangle into a button: Select the rectangle. Nel strumenti menu, fare clic su Crea pulsante.On the Tools menu, click Make Button.

    Come convertire una forma in un pulsanteHow to make a shape into a button

  5. Specificare l'ambito dello stile/modello: verrà visualizzata una finestra di dialogo.Specify the scope of the style/template: A dialog box like the following appears.

    La finestra di dialogo "Crea risorsa stile"The "Create Style Resource" dialog box

    Per nome (chiave) selezionare applica a tutte.For Resource name (Key), select Apply to all. In questo modo il modello si applicano a tutti gli oggetti che sono disponibili pulsanti e lo stile risulta.This will make the resulting style and button template apply to all objects that are buttons. Per definire inselezionare applicazione.For Define in, select Application. In questo modo il modello all'intera applicazione e lo stile risultanti.This will make the resulting style and button template have scope over the entire application. Quando si impostano i valori in queste due caselle, il modello e stile del pulsante si applicano a tutti i pulsanti all'interno dell'intera applicazione e qualsiasi pulsante creato nell'applicazione, per impostazione predefinita, questo modello verrà utilizzato.When you set the values in these two boxes, the button style and template apply to all buttons within the entire application and any button you create in the application will, by default, use this template.

Modificare il modello di pulsanteEdit the Button Template

È ora un rettangolo che è stato modificato in un pulsante.You now have a rectangle that has been changed to a button. In questa sezione sarà di modificare il modello del pulsante e di personalizzare l'aspetto.In this section, you'll modify the template of the button and further customize how it looks.

Per modificare il modello di pulsante per modificare l'aspetto del pulsanteTo edit the button template to change the button appearance

  1. Passare alla visualizzazione modello di modifica: per personalizzare ulteriormente l'aspetto del pulsante, è necessario modificare il modello di pulsante.Go into edit template view: To further customize the look of our button, we need to edit the button template. Questo modello è stato creato al momento della conversione del rettangolo in un pulsante.This template was created when we converted the rectangle into a button. Per modificare il modello di pulsante, fare doppio clic sul pulsante e selezionare Modifica parti del controllo (modello) e quindi modifica modello.To edit the button template, right-click the button and select Edit Control Parts (Template) and then Edit Template.

    Come modificare un modelloHow to edit a template

    Nella finestra dell'editor dei modelli, si noti che il pulsante è ora suddiviso in un Rectangle e ContentPresenter.In the template editor, notice that the button is now separated into a Rectangle and the ContentPresenter. Il ContentPresenter viene utilizzato per presentare il contenuto all'interno del pulsante (ad esempio, la stringa "Pulsante").The ContentPresenter is used to present content within the button (for example, the string "Button"). Sia il rettangolo e ContentPresenter sono posizionati all'interno di un Grid.Both the rectangle and ContentPresenter are laid out inside of a Grid.

    I componenti nella presentazione di un rettangoloComponents in the presentation of a rectangle

  2. Modificare i nomi dei componenti del modello: destro del mouse sul rettangolo nell'inventario dei modelli, modifica il Rectangle nome dal "[rettangolo]" per "Rettangolo esterno" e "[ContentPresenter]" in "myContentPresenter".Change the names of the template components: Right-click the rectangle in the template inventory, change the Rectangle name from "[Rectangle]" to "outerRectangle", and change "[ContentPresenter]" to "myContentPresenter".

    Come rinominare un componente di un modelloHow to rename a component of a template

  3. Modificare il rettangolo in modo che risulti vuoto all'interno di (): selezionate rettangolo esterno e impostare Fill su "Transparent" e StrokeThickness a 5.Alter the rectangle so that it is empty inside (like a donut): Select outerRectangle and set Fill to "Transparent" and StrokeThickness to 5.

    Come rendere vuoto un rettangoloHow to make a rectangle empty

    Impostare quindi la Stroke il colore di qualsiasi il modello sarà.Then set the Stroke to the color of whatever the template will be. A tale scopo, fare clic sulla casella bianca accanto a trattoselezionare espressione personalizzata, digitare "{TemplateBinding Background}" nella finestra di dialogo.To do this, click the small white box next to Stroke, select CustomExpression, and type "{TemplateBinding Background}" in the dialog box.

    Come impostare il colore del modello di utilizzoHow to set the use the color of the template

  4. Creare un rettangolo interno: a questo punto, creare un altro rettangolo (denominarla "rettangolo interno") e posizionarlo in modo simmetrico all'interno del rettangolo esterno .Create an inner rectangle: Now, create another rectangle (name it "innerRectangle") and position it symmetrically on the inside of outerRectangle . Per questo tipo di lavoro, si desidererà probabilmente eseguire lo zoom per ingrandire il pulsante nell'area di modifica.For this kind of work, you will probably want to zoom to make the button larger in the editing area.

    Nota

    Il rettangolo potrebbe apparire diverso rispetto a quello nella figura (ad esempio, potrebbe avere gli angoli arrotondati).Your rectangle might look different than the one in the figure (for example, it might have rounded corners).

    Come creare un rettangolo all'interno di un altro rettangoloHow to create a rectangle inside another rectangle

  5. Spostare ContentPresenter nella parte superiore: a questo punto, è possibile che il "Pulsante" testo non sarà più visibile.Move ContentPresenter to the top: At this point, it is possible that the text "Button" will not be visible any longer. Se si tratta di questa operazione, infatti, rettangolo interno si trova sopra il myContentPresenter.If this is so, this is because innerRectangle is on top of the myContentPresenter. Per risolvere questo problema, è possibile trascinare myContentPresenter sotto rettangolo interno.To fix this, drag myContentPresenter below innerRectangle. Riposizionare i rettangoli e myContentPresenter per un aspetto simile al seguente.Reposition rectangles and myContentPresenter to look similar to below.

    Nota

    In alternativa, è anche possibile posizionare myContentPresenter in primo piano facendo clic destro e premendo inviare rollforward.Alternatively, you can also position myContentPresenter on top by right-clicking it and pressing Send Forward.

    Come spostare un pulsante sopra un altro pulsanteHow to move one button on top of another button

  6. Modificare l'aspetto del rettangolo interno: impostare il RadiusX, RadiusY, e StrokeThickness valori a 20.Change the look of innerRectangle: Set the RadiusX, RadiusY, and StrokeThickness values to 20. Inoltre, impostare il Fill allo sfondo del modello utilizzando l'espressione personalizzata "{TemplateBinding Background}") e impostare Stroke su "transparent".In addition, set the Fill to the background of the template using the custom expression "{TemplateBinding Background}" ) and set Stroke to "transparent". Si noti che le impostazioni per il Fill e Stroke di rettangolo interno sono l'opposto di quelli per rettangolo esterno.Notice that the settings for the Fill and Stroke of innerRectangle are the opposite of those for outerRectangle.

    Come modificare l'aspetto di un rettangoloHow to change the appearance of a rectangle

  7. Aggiungere un livello di ingrandimento nella parte superiore: nella parte finale della personalizzazione dell'aspetto del pulsante consiste nell'aggiungere un effetto cristallo in primo piano.Add a glass layer on top: The final piece of customizing the look of the button is to add a glass layer on top. Questo effetto cristallo è costituito da un rettangolo di terzo.This glass layer consists of a third rectangle. Poiché l'effetto cristallo ricopre l'intero pulsante, il rettangolo con effetto cristallo è dimensioni simile al rettangolo esterno.Because the glass will cover the entire button, the glass rectangle is similar in dimensions to the outerRectangle. Pertanto, creare un rettangolo da una semplice copia del rettangolo esterno.Therefore, create the rectangle by simply making a copy of the outerRectangle. Evidenziare rettangolo esterno e utilizzare CTRL + C e CTRL + V per creare una copia.Highlight outerRectangle and use CTRL+C and CTRL+V to make a copy. Denominare il nuovo rettangolo "glassCube".Name this new rectangle "glassCube".

  8. Se necessario, riposizionare glassCube: se glassCube è non è già posizionato in modo che copre l'intero pulsante, trascinarlo nella posizione.Reposition glassCube if necessary: If glassCube is not already positioned so that it covers the entire button, drag it into position.

  9. Assegnare una forma leggermente diversa rispetto a rettangolo esterno glassCube: modificare le proprietà di glassCube.Give glassCube a slightly different shape than outerRectangle: Change the properties of glassCube. Iniziare impostando il RadiusX e RadiusY proprietà a 10 e StrokeThickness a 2.Start off by changing the RadiusX and RadiusY properties to 10 and the StrokeThickness to 2.

    Impostazioni dell'aspetto di glassCubeThe appearance settings for glassCube

  10. Rendere glassCube simile bicchiere: impostare il Fill su un aspetto utilizzando una sfumatura lineare che è opaca al 75% e alterna tra il colore bianco e trasparente oltre 6 approssimativamente in modo uniforme tra la spaziatura tra gli intervalli.Make glassCube look like glass: Set the Fill to a glassy look by using a linear gradient that is 75% opaque and alternates between the color White and Transparent over 6 approximately evenly spaced intervals. Questo è il valore da impostare lo sfumatura:This is what to set the gradient stops to:

    • Cursore sfumatura 1: Bianco con un valore alfa pari al 75%Gradient Stop 1: White with Alpha value of 75%

    • Sfumatura 2: trasparenteGradient Stop 2: Transparent

    • Cursore sfumatura 3: Bianco con un valore alfa pari al 75%Gradient Stop 3: White with Alpha value of 75%

    • Sfumatura 4: trasparenteGradient Stop 4: Transparent

    • Cursore sfumatura 5: Bianco con un valore alfa pari al 75%Gradient Stop 5: White with Alpha value of 75%

    • Sfumatura 6: trasparenteGradient Stop 6: Transparent

    Crea un effetto cristallo "ondulata".This creates a "wavy" glass look.

    Un rettangolo con effetto cristalloA rectangle that that looks like glass

  11. Nascondere l'effetto cristallo: dopo che viene visualizzato il livello cristallo l'aspetto, il riquadro aspetto del Pannello proprietà e impostare l'opacità allo 0% per nasconderlo.Hide the glass layer: Now that you see what the glassy layer looks like, go into the Appearance pane of the Properties panel and set the Opacity to 0% to hide it. Nelle sezioni successive, utilizzeremo i trigger di proprietà ed eventi per visualizzare e modificare l'effetto cristallo.In the sections ahead, we'll use property triggers and events to show and manipulate the glass layer.

    Come nascondere il rettangolo trasparenteHow to hide the glass rectangle

Personalizzare il comportamento del pulsanteCustomize the Button Behavior

A questo punto, sono state personalizzate la presentazione del pulsante modificandone il modello, ma il pulsante non rispondere alle azioni dell'utente come pulsanti tipico (ad esempio, modifica dell'aspetto al passaggio del puntatore del mouse, riceve lo stato attivo e facendo clic su.) Le due procedure che seguono viene illustrato come compilare comportamenti come questi nel pulsante personalizzato.At this point, you have customized the presentation of the button by editing its template, but the button does not react to user actions as typical buttons do (for example, changing appearance upon mouse-over, receiving focus, and clicking.) The next two procedures show how to build behaviors like these into the custom button. Si sarà iniziano con i trigger di proprietà semplice e quindi aggiungere trigger di evento e le animazioni.We'll start with simple property triggers, and then add event triggers and animations.

Per impostare i trigger di proprietàTo set property triggers

  1. Creare un nuovo trigger di proprietà: con glassCube selezionato, fare clic su + proprietà nel trigger pannello (vedere la figura che segue il passaggio successivo).Create a new property trigger: With glassCube selected, click + Property in the Triggers panel (see the figure that follows the next step). Verrà creato un trigger di proprietà con un trigger di proprietà predefinito.This creates a property trigger with a default property trigger.

  2. Impostare la proprietà utilizzata dal trigger come IsMouseOver: modificare la proprietà in IsMouseOver.Make IsMouseOver the property used by the trigger: Change the property to IsMouseOver. In questo modo, si attiva quando il trigger di proprietà di IsMouseOver proprietà true (quando l'utente deve scegliere il pulsante con il mouse).This makes the property trigger activate when the IsMouseOver property is true (when the user points to the button with the mouse).

    Come impostare un trigger su una proprietàHow to set a trigger on a property

  3. IsMouseOver consente di opacità del 100% per glassCube: si noti che il Trigger registrazione (vedere la figura precedente).IsMouseOver triggers opacity of 100% for glassCube: Notice that the Trigger recording is on (see the preceding figure). Ciò significa che le modifiche apportate ai valori della proprietà di glassCube mentre registrazione diventerà un'azione che ha luogo quando IsMouseOver è true.This means that any changes you make to the property values of glassCube while recording is on will become an action that takes place when IsMouseOver is true. Durante la registrazione, modificare il Opacity di glassCube al 100%.While recording, change the Opacity of glassCube to 100%.

    Come impostare l'opacità di un pulsanteHow to set the opacity of a button

    Il primo trigger di proprietà è stata creata.You have now created your first property trigger. Si noti che il pannello trigger dell'editor ha registrato il Opacity per essere modificato in 100%.Notice that the Triggers panel of the editor has recorded the Opacity being changed to 100%.

    The "Triggers" panelThe "Triggers" panel

    Premere F5 per eseguire l'applicazione e spostare il puntatore del mouse su e disattivare il pulsante.Press F5 to run the application, and move the mouse pointer over and off the button. Si dovrebbe essere visualizzato quando l'effetto cristallo del puntatore del mouse sul pulsante e quando il puntatore esce.You should see the glass layer appear when you mouse-over the button and disappear when the pointer leaves.

  4. I trigger IsMouseOver tracciare modifica del valore: opportuno associare altre azioni con il IsMouseOver trigger.IsMouseOver triggers stroke value change: Let's associate some other actions with the IsMouseOver trigger. Durante la registrazione continua, spostare la selezione da glassCube a rettangolo esterno.While recording continues, switch your selection from glassCube to outerRectangle. Impostare quindi la Stroke di rettangolo esterno per l'espressione personalizzata di "{DynamicResource {X:Static SystemColors. HighlightBrushKey}}".Then set the Stroke of outerRectangle to the custom expression of "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". Consente di impostare il Stroke di evidenziazione standard utilizzato dai pulsanti di colore.This sets the Stroke to the typical highlight color used by buttons. Premere F5 per visualizzare l'effetto quando si passa il mouse su di esso.Press F5 to see the effect when you mouse over the button.

    Procedura di impostazione del tratto sul colore di evidenziazioneHow to set the stroke to the highlight color

  5. Testo sfocato IsMouseOver consente di: possibile associare un'altra azione per il IsMouseOver trigger di proprietà.IsMouseOver triggers blurry text: Let's associate one more action to the IsMouseOver property trigger. Visualizzare il contenuto del pulsante leggermente sfocata quando viene visualizzato l'effetto cristallo su di esso.Make the content of the button appear a little blurry when the glass appears over it. A tale scopo, è possibile applicare una sfocatura BitmapEffect per il ContentPresenter (myContentPresenter).To do this, we can apply a blur BitmapEffect to the ContentPresenter (myContentPresenter).

    Procedura di sfocatura del contenuto di un pulsanteHow to blur the content of a button

    Nota

    Per restituire il Pannello proprietà su quello che era prima l'operazione di ricerca per BitmapEffect, cancellare il testo dal casella di ricerca.To return the Properties panel back to what it was before you did the search for BitmapEffect, clear the text from the Search box.

    A questo punto, è stato utilizzato un trigger di proprietà con diverse azioni associate per creare il comportamento di evidenziazione per quando il puntatore del mouse entra ed esce dall'area del pulsante.At this point, we have used a property trigger with several associated actions to create highlighting behavior for when the mouse pointer enters and leaves the button area. È un altro comportamento tipico per un pulsante per evidenziare con lo stato attivo (come dopo il clic).Another typical behavior for a button is to highlight when it has focus (as after it is clicked). È possibile aggiungere questo comportamento aggiungendo un altro trigger di proprietà per il IsFocused proprietà.We can add such behavior by adding another property trigger for the IsFocused property.

  6. Creare trigger di proprietà per IsFocused: utilizzando la stessa procedura utilizzata per IsMouseOver (vedere il primo passaggio di questa sezione), creare un altro trigger di proprietà per il IsFocused proprietà.Create property trigger for IsFocused: Using the same procedure as for IsMouseOver (see the first step of this section), create another property trigger for the IsFocused property. Mentre registrazione Trigger, aggiungere le seguenti azioni al trigger:While Trigger recording is on, add the following actions to the trigger:

    • glassCube Ottiene un Opacity del 100%.glassCube gets an Opacity of 100%.

    • Rettangolo esterno Ottiene un Stroke valore dell'espressione personalizzata di "{DynamicResource {X:Static SystemColors. HighlightBrushKey}}".outerRectangle gets a Stroke custom expression value of "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}".

Come passaggio finale in questa procedura dettagliata, si aggiungerà le animazioni al pulsante.As the final step in this walkthrough, we will add animations to the button. Le animazioni verranno attivate da eventi, in particolare, il MouseEnter e Click eventi.These animations will be triggered by events—specifically, the MouseEnter and Click events.

Utilizzare i trigger di evento e le animazioni per aggiungere interattivitàTo use event triggers and animations to add interactivity

  1. Creare un Trigger di evento MouseEnter: aggiungere un nuovo trigger di evento e selezionare MouseEnter dell'evento da utilizzare nel trigger.Create a MouseEnter Event Trigger: Add a new event trigger and select MouseEnter as the event to use in the trigger.

    Come creare un trigger di evento MouseEnterHow to create a MouseEnter event trigger

  2. Creare una sequenza temporale di animazione: successivamente, associare una sequenza temporale di animazione per il MouseEnter evento.Create an animation timeline: Next, associate an animation timeline to the MouseEnter event.

    Come aggiungere una sequenza temporale di animazione a un eventoHow to add an animation timeline to an event

    Dopo aver premuto OK per creare una nuova sequenza temporale, un pannello della sequenza temporale viene visualizzata e "Registrazione della sequenza temporale" è visibile nel Pannello di progettazione.After you press OK to create a new timeline, a Timeline Panel appears and "Timeline recording is on" is visible in the design panel. Ciò significa che è possibile avviare la registrazione delle modifiche di proprietà nella sequenza temporale (proprietà animare modifiche).This means we can start recording property changes in the timeline (animate property changes).

    Nota

    Potrebbe essere necessario ridimensionare la finestra e/o i pannelli per visualizzare la visualizzazione.You may need to resize your window and/or panels to see the display.

    Il pannello della sequenza temporaleThe timeline panel

  3. Creare un fotogramma chiave: per creare un'animazione, selezionare l'oggetto che si desidera aggiungere un'animazione, creare due o più fotogrammi chiave sulla sequenza temporale e per i fotogrammi chiave, impostare i valori di proprietà desiderati interpolare tra l'animazione.Create a keyframe: To create an animation, select the object you want to animate, create two or more keyframes on the timeline, and for those keyframes, set the property values you want the animation to interpolate between. Nella figura seguente illustra la creazione di un fotogramma chiave.The following figure guides you through the creation of a keyframe.

    Come creare un fotogramma chiaveHow to create a keyframe

  4. Compattare glassCube questo fotogramma chiave: con il secondo fotogramma chiave selezionato, specificare una dimensione il glassCube al 90% del schermo intero con il dimensioni trasformare.Shrink glassCube at this keyframe: With the second keyframe selected, shrink the size of the glassCube to 90% of its full size using the Size Transform.

    Come ridurre le dimensioni di un pulsanteHow to shrink the size of a button

    Premere F5 per eseguire l'applicazione.Press F5 to run the application. Spostare il puntatore del mouse su di esso.Move the mouse pointer over the button. Si noti che riduce l'effetto cristallo sopra il pulsante.Notice that the glass layer shrinks on top of the button.

  5. Creare un altro Trigger di evento e associarvi un'animazione diversa: aggiungere un'altra animazione.Create another Event Trigger and associate a different animation with it: Let's add one more animation. Utilizzare una procedura simile a quella usata per creare l'animazione di trigger di evento precedente:Use a similar procedure to what you used to create the previous event trigger animation:

    1. Creare un nuovo evento trigger utilizzando il Click evento.Create a new event trigger using the Click event.

    2. Associare una nuova sequenza temporale con il Click evento.Associate a new timeline with the Click event.

    Come creare una nuova sequenza temporaleHow to create a new timeline

    1. Per questa sequenza temporale, creare due fotogrammi chiave, in secondi compreso tra 0,0 e la seconda 0,3 secondi.For this timeline, create two keyframes, one at 0.0 seconds and the second one at 0.3 seconds.

    2. Con il fotogramma chiave 0,3 secondi evidenziato, impostare il ruotare l'angolo di trasformazione a 360 gradi.With the keyframe at 0.3 seconds highlighted, set the Rotate Transform Angle to 360 degrees.

    Come creare una trasformazione rotativaHow to create a rotate transform

    1. Premere F5 per eseguire l'applicazione.Press F5 to run the application. Fare clic sul pulsante.Click the button. Si noti che l'effetto cristallo ruota.Notice that the glass layer spins around.

ConclusioneConclusion

È stato completato un pulsante personalizzato.You have completed a customized button. È stato fatto, questa operazione utilizzando un modello di pulsante che è stato applicato a tutti i pulsanti nell'applicazione.You did this using a button template that was applied to all buttons in the application. Se si esce dalla modalità di modifica modelli (vedere la figura seguente) e creare più pulsanti, si noterà che l'aspetto e comportamento del pulsante personalizzato anziché come pulsante predefinito.If you leave the template editing mode (see the following figure) and create more buttons, you will see that they look and behave like your custom button rather than like the default button.

Il modello di pulsante personalizzatoThe custom button template

Più pulsanti che usano lo stesso modelloMultiple buttons that use the same template

Premere F5 per eseguire l'applicazione.Press F5 to run the application. Fare clic sui pulsanti e notare come tutti lo stesso comportamento.Click the buttons and notice how they all behave the same.

Tenere presente che anche se sono stati personalizzazione del modello è impostata la Fill proprietà di rettangolo interno e Stroke proprietà rettangolo esterno sullo sfondo del modello ({ TemplateBinding Background}).Remember that while you were customizing the template, you set the Fill property of innerRectangle and the Stroke property outerRectangle to the template background ({TemplateBinding Background}). Per questo motivo, quando si imposta il colore di sfondo dei singoli pulsanti, lo sfondo impostato verrà utilizzato per le rispettive proprietà.Because of this, when you set the background color of the individual buttons, the background you set will be used for those respective properties. Provare a modificare ora gli sfondi.Try changing the backgrounds now. Nella figura seguente, vengono utilizzate diverse sfumature.In the following figure, different gradients are used. Pertanto, anche se è utile per la personalizzazione generale dei controlli pulsante di un modello, controlli con modelli di possono essere modificati per esaminare diversi tra loro.Therefore, although a template is useful for overall customization of controls like button, controls with templates can still be modified to look different from each other.

Pulsanti con lo stesso modello aspetto differenteButtons with the same template that look diferent

In conclusione, nel processo di personalizzazione di un modello di pulsante è stato descritto come eseguire le operazioni seguenti in Microsoft Expression Blend:In conclusion, in the process of customizing a button template you have learned how to do the following in Microsoft Expression Blend:

  • Personalizzare l'aspetto di un controllo.Customize the look of a control.

  • Impostare i trigger di proprietà.Set property triggers. I trigger di proprietà sono molto utili perché possono essere utilizzati nella maggior parte degli oggetti, non solo i controlli.Property triggers are very useful because they can be used on most objects, not just controls.

  • Impostare i trigger di evento.Set event triggers. I trigger di evento sono molto utili perché possono essere utilizzati nella maggior parte degli oggetti, non solo i controlli.Event triggers are very useful because they can be used on most objects, not just controls.

  • Creare animazioni.Create animations.

  • Creare varie: sfumature, aggiungere BitmapEffects, utilizzare le trasformazioni e impostare le proprietà di base di oggetti.Miscellaneous: create gradients, add BitmapEffects, use transforms, and set basic properties of objects.

Vedere ancheSee Also

Creare un pulsante usando XAMLCreate a Button by Using XAML
Applicazione di stili e modelliStyling and Templating
Cenni preliminari sull'animazioneAnimation Overview
Cenni sul disegno con colori a tinta unita e sfumaturePainting with Solid Colors and Gradients Overview
Panoramica sugli effetti bitmapBitmap Effects Overview