Procedura dettagliata: creazione di un pulsante tramite XAML

Articolo
08/11/2011

L'obiettivo di questa procedura dettagliata è quello di imparare a creare un pulsante animato per un'applicazione Windows Presentation Foundation (WPF). In questa procedura dettagliata vengono utilizzati stili e un modello per creare una risorsa pulsante personalizzato per riutilizzare il codice e separare la logica del pulsante dalla dichiarazione dello stesso. Questa procedura dettagliata è scritta interamente in Extensible Application Markup Language (XAML).

Importante
In questa procedura dettagliata vengono illustrati i passaggi da eseguire per creare l'applicazione digitando oppure copiando e incollando Extensible Application Markup Language (XAML) in Microsoft Visual Studio.Se si desidera imparare a utilizzare uno strumento di progettazione (Microsoft Expression Blend) per creare la stessa applicazione, vedere la Procedura dettagliata: creazione di un pulsante tramite Microsoft Expression Blend.

In questa procedura dettagliata vengono illustrati i passaggi da eseguire per creare l'applicazione digitando oppure copiando e incollando Extensible Application Markup Language (XAML) in Microsoft Visual Studio.Se si desidera imparare a utilizzare uno strumento di progettazione (Microsoft Expression Blend) per creare la stessa applicazione, vedere la Procedura dettagliata: creazione di un pulsante tramite Microsoft Expression Blend.

Nella figura riportata di seguito vengono illustrati i pulsanti finiti.

Pulsanti personalizzati creati utilizzando XAML

Creare i pulsanti di base

Creare innanzitutto un nuovo progetto e aggiungere alcuni pulsanti alla finestra.

Per creare un nuovo progetto WPF e aggiungere pulsanti alla finestra

AvviareVisual Studio.
Creare un nuovo progetto WPF: scegliere Nuovo dal menu File, quindi fare clic su Progetto. Tovare il modello Find the Applicazione Windows (WPF) e aasegnare al progetto il nome "AnimatedButton". In questo modo, si crea la struttura base dell'applicazione.
Aggiungere i pulsanti predefiniti di base: tutti i file necessari per questa procedura dettagliata vengono forniti dal modello. Aprire il file Window1.xaml facendo doppio clic su di esso in Esplora soluzioni. Per impostazione predefinita, è presente un elemento Grid in Window1.xaml. Rimuovere l'elemento Grid e aggiungere alcuni pulsanti alla pagina Extensible Application Markup Language (XAML) digitando oppure copiando e incollando il codice evidenziato seguente in Window1.xaml:
```
<Window x:Class="AnimatedButton.Window1"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="AnimatedButton" Height="300" Width="300" 
  Background="Black">

  
  <StackPanel HorizontalAlignment="Left">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
  </StackPanel>

</Window>
```
Premere F5 per eseguire l'applicazione. Dovrebbero essere visibili i pulsanti simili a quelli illustrati nella figura riportata di seguito.

Dopo avere creato i pulsanti di base, il file Window1.xaml non è più necessario. Il resto della procedura dettagliata richiede l'utilizzo del file app.xaml per la definizione di stili e di un modello per i pulsanti.

Impostare le proprietà di base

È a questo punto necessario impostare alcune proprietà su questi pulsanti per controllarne l'aspetto e il layout. Anziché impostare le proprietà per i singoli pulsanti, si utilizzeranno le risorse per definire le proprietà dei pulsanti per l'intera applicazione. Le risorse dell'applicazione sono concettualmente simili al Cascading Style Sheets (CSS) esterno per le pagine Web; esse sono, tuttavia, molto più funzionali rispetto al Cascading Style Sheets (CSS), come si vedrà verso la fine di questa procedura dettagliata. Per ulteriori informazioni sulle risorse, vedere Cenni preliminari sulle risorse.

Per utilizzare gli stili per impostare le proprietà di base per i pulsanti

Definire un blocco Application.Resources: aprire app.xaml e aggiungere il markup evidenziato seguente se non ancora presente:
```
<Application x:Class="AnimatedButton.App"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  StartupUri="Window1.xaml"
  >
  <Application.Resources>

    

  </Application.Resources>
</Application>
```
L'ambito di una risorsa dipende dalla posizione in cui la stessa viene definita. La definizione delle risorse nel blocco Application.Resoureses del file app.xaml consente di utilizzare la risorsa da qualsiasi punto dell'applicazione. Per ulteriori informazioni sulla definizione dell'ambito delle risorse, vedere Cenni preliminari sulle risorse.
Creare uno stile e definire i valori delle proprietà di base: aggiungere il markup seguente al blocco Application.Resources. Questo markup consente di creare un oggetto Style da applicare a tutti i pulsanti dell'applicazione, impostando la proprietà Width dei pulsanti su 90 e la proprietà Margin su 10:
```
<Application.Resources>

  <Style TargetType="Button">
    <Setter Property="Width" Value="90" />
    <Setter Property="Margin" Value="10" />
  </Style>

</Application.Resources>
```
La proprietà TargetType consente di specificare che lo stile è applicabile a tutti gli oggetti di tipo Button. Ogni oggetto Setter imposta un valore di proprietà diverso per l'oggetto Style. Pertanto, ogni pulsante dell'applicazione presenta una larghezza di 90 e un margine di 10. Se si preme F5 per eseguire l'applicazione, verrà visualizzata la finestra seguente.

Gli stili possono rivelarsi utili in molti altri contesti, ad esempio possono essere utilizzati per definire gli oggetti di destinazione, specificando valori di proprietà complessi, ed essere utilizzati come input di altri stili. Per ulteriori informazioni, vedere Applicazione di stili e modelli.
Impostare un valore di una proprietà di stile su una risorsa: le risorse consentono di riutilizzare con facilità valori e oggetti comunemente definiti. È particolarmente utile definire valori complessi utilizzando le risorse per rendere il codice più modulare. Aggiungere il markup evidenziato seguente al file app.xaml.
```
<Application.Resources>

  <LinearGradientBrush x:Key="GrayBlueGradientBrush" 
    StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="DarkGray" Offset="0" />
    <GradientStop Color="#CCCCFF" Offset="0.5" />
    <GradientStop Color="DarkGray" Offset="1" />
  </LinearGradientBrush>

  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" 
      Value="{StaticResource GrayBlueGradientBrush}" />
    <Setter Property="Width" Value="80" />
    <Setter Property="Margin" Value="10" />
  </Style>

</Application.Resources>
```
Direttamente sotto il blocco Application.Resources, è stata creata una risorsa denominata "GrayBlueGradientBrush". Questa risorsa definisce una sfumatura orizzontale. Questa risorsa può essere utilizzata come un valore di proprietà da qualsiasi punto dell'applicazione, anche all'interno del metodo di impostazione dello stile del pulsante per la proprietà Background. Tutti i pulsanti presentano ora un valore della proprietà Background di questa sfumatura.

‎Premere F5 per eseguire l'applicazione. Dovrebbe essere analoga alla seguente.

Creare un modello che definisca l'aspetto di un pulsante

In questa sezione viene creato un modello per la personalizzazione dell'aspetto (presentazione) del pulsante. La presentazione del pulsante è composta da diversi oggetti, inclusi i rettangoli e altri componenti per conferire al pulsante un aspetto unico.

Finora, il controllo dell'aspetto dei pulsanti dell'applicazione è stato limitato alla modifica delle relative proprietà. È tuttavia possibile apportare modifiche più radicali all'aspetto dei pulsanti. I modelli consentono un controllo maggiore sulla presentazione di un oggetto. Poiché possono essere utilizzati all'interno degli stili, è possibile applicare i modelli a tutti gli oggetti a cui si applica lo stile (in questa procedura dettagliata, il pulsante).

Per utilizzare il modello per definire l'aspetto del pulsante

Impostare il modello: poiché i controlli come Button presentano una proprietà Template, è possibile definire il valore della proprietà del modello proprio come gli altri valori di proprietà impostati in un oggetto Style utilizzando Setter. Aggiungere il markup evidenziato seguente allo stile del pulsante.

<Application.Resources>

  <LinearGradientBrush x:Key="GrayBlueGradientBrush" 
    StartPoint="0,0" EndPoint="1,1">
    <GradientStop Color="DarkGray" Offset="0" />
    <GradientStop Color="#CCCCFF" Offset="0.5" />
    <GradientStop Color="DarkGray" Offset="1" />
  </LinearGradientBrush>

  <Style TargetType="{x:Type Button}">
  <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />
    <Setter Property="Width" Value="80" />
    <Setter Property="Margin" Value="10" />
    <Setter Property="Template">
      <Setter.Value>
        <!-- The button template is defined here. -->
      </Setter.Value>
    </Setter>
  </Style>

</Application.Resources>

Alterare la presentazione del pulsante: a questo punto, è necessario definire il modello. Aggiungere il markup evidenziato riportato di seguito. Questo markup specifica due elementi Rectangle con bordi arrotondati, seguiti da un DockPanel. L'oggetto DockPanel viene utilizzato per ospitare l'oggetto ContentPresenter del pulsante. L'oggetto ContentPresenter consente di visualizzare il contenuto del pulsante. In questa procedura dettagliata il contenuto è costituito da testo ("Button 1", "Button 2", "Button 3"). Tutti i componenti del modello, ovvero il rettangolo e l'oggetto DockPanel, vengono disposti all'interno di un oggetto Grid.

<Setter.Value>
  <ControlTemplate TargetType="Button">
    <Grid Width="{TemplateBinding Width}" 
     Height="{TemplateBinding Height}" ClipToBounds="True">

      <!-- Outer Rectangle with rounded corners. -->
      <Rectangle x:Name="outerRectangle" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Stroke="{TemplateBinding Background}" 
        RadiusX="20" RadiusY="20" StrokeThickness="5" 
        Fill="Transparent" />

      <!-- Inner Rectangle with rounded corners. -->
      <Rectangle x:Name="innerRectangle" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" Stroke="Transparent" 
        StrokeThickness="20" 
        Fill="{TemplateBinding Background}" 
        RadiusX="20" RadiusY="20"   />

      <!-- Present Content (text) of the button. -->
      <DockPanel Name="myContentPresenterDockPanel">
        <ContentPresenter x:Name="myContentPresenter" Margin="20" 
          Content="{TemplateBinding  Content}" 
          TextBlock.Foreground="Black" />
      </DockPanel>
    </Grid>
  </ControlTemplate>
</Setter.Value>

‎Premere F5 per eseguire l'applicazione. Dovrebbe essere analoga alla seguente.

Bb613545.custom_button_AnimatedButton_4(it-it,VS.100).gif

Aggiungere un effetto cristallo al modello: in seguito verrà aggiunto il cristallo. Innanzitutto vengono create alcune risorse per la creazione di un effetto cristallo. Aggiungere queste risorse sfumatura in qualsiasi punto del blocco Application.Resources:

<Application.Resources>
  <GradientStopCollection x:Key="MyGlassGradientStopsResource">
    <GradientStop Color="WhiteSmoke" Offset="0.2" />
    <GradientStop Color="Transparent" Offset="0.4" />
    <GradientStop Color="WhiteSmoke" Offset="0.5" />
    <GradientStop Color="Transparent" Offset="0.75" />
    <GradientStop Color="WhiteSmoke" Offset="0.9" />
    <GradientStop Color="Transparent" Offset="1" />
  </GradientStopCollection>

  <LinearGradientBrush x:Key="MyGlassBrushResource" 
   StartPoint="0,0" EndPoint="1,1" Opacity="0.75" 
   GradientStops="{StaticResource MyGlassGradientStopsResource}" />
<!-- Styles and other resources below here. -->

Queste risorse vengono utilizzate come proprietà Fill per un rettangolo da inserire nell'oggetto Grid del modello del pulsante. Aggiungere il seguente markup evidenziato al modello.

<Setter.Value>
  <ControlTemplate TargetType="{x:Type Button}">
    <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
ClipToBounds="True">

    <!-- Outer Rectangle with rounded corners. -->
    <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" 
      RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />

    <!-- Inner Rectangle with rounded corners. -->
    <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20" 
      Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />

    <!-- Glass Rectangle -->
    <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch"
      StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"
      Fill="{StaticResource MyGlassBrushResource}"
      RenderTransformOrigin="0.5,0.5">
      <Rectangle.Stroke>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <LinearGradientBrush.GradientStops>
            <GradientStop Offset="0.0" Color="LightBlue" />
            <GradientStop Offset="1.0" Color="Gray" />
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Rectangle.Stroke>

      <!-- These transforms have no effect as they are declared here. 
           The reason the transforms are included is to be targets 
           for animation (see later). -->
      <Rectangle.RenderTransform>
        <TransformGroup>
          <ScaleTransform />
          <RotateTransform />
        </TransformGroup>
      </Rectangle.RenderTransform>

      <!-- A BevelBitmapEffect is applied to give the button a 
           "Beveled" look. -->
      <Rectangle.BitmapEffect>
        <BevelBitmapEffect />
      </Rectangle.BitmapEffect>
    </Rectangle>

    <!-- Present Text of the button. -->
    <DockPanel Name="myContentPresenterDockPanel">
      <ContentPresenter x:Name="myContentPresenter" Margin="20" 
        Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
    </DockPanel>
  </Grid>
</ControlTemplate>
</Setter.Value>

Poiché la proprietà Opacity del rettangolo con la proprietà x:Name di "glassCube" è 0, quando si esegue l'esempio, il rettangolo con effetto cristallo non sarà visibile. In seguito verranno aggiunti dei trigger al modello per l'interazione dell'utente con il pulsante. Tuttavia, è ora possibile avere un'idea dell'aspetto del pulsante impostando il valore Opacity su 1 ed eseguendo l'applicazione. Vedere la figura riportata di seguito. Prima di procedere al passaggio successivo, impostare di nuovo Opacity su 0.

Pulsanti personalizzati creati utilizzando XAML

Creare l'interattività del pulsante

In questa sezione, verranno creati i trigger delle proprietà e degli eventi per modificare i valori delle proprietà ed eseguire animazioni in risposta alle azioni dell'utente, ad esempio spostamento del puntatore del mouse su un pulsante e successivo clic.

Un modo semplice per creare interattività (passaggio del mouse, spostamento del mouse all'esterno, clic e così via) consiste nel definire trigger all'interno del modello o dello stile. Per creare un Trigger, definire una "condizione" della proprietà, ad esempio: Il valore della proprietà IsMouseOver del pulsante è uguale a true. Definire quindi i metodi di impostazione (azioni) che si verificano quando la condizione del trigger è vera.

Per creare l'interattività del pulsante

Aggiungere trigger di modelli: aggiungere il markup evidenziato al modello.

<Setter.Value>
  <ControlTemplate TargetType="{x:Type Button}">
    <Grid Width="{TemplateBinding Width}" 
      Height="{TemplateBinding Height}" ClipToBounds="True">

      <!-- Outer Rectangle with rounded corners. -->
      <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" 
      RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />

      <!-- Inner Rectangle with rounded corners. -->
      <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" Stroke="Transparent" 
        StrokeThickness="20" 
        Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" 
      />

      <!-- Glass Rectangle -->
      <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"
        Fill="{StaticResource MyGlassBrushResource}"
        RenderTransformOrigin="0.5,0.5">
        <Rectangle.Stroke>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <LinearGradientBrush.GradientStops>
              <GradientStop Offset="0.0" Color="LightBlue" />
              <GradientStop Offset="1.0" Color="Gray" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Rectangle.Stroke>

        <!-- These transforms have no effect as they 
             are declared here. 
             The reason the transforms are included is to be targets 
             for animation (see later). -->
        <Rectangle.RenderTransform>
          <TransformGroup>
            <ScaleTransform />
            <RotateTransform />
          </TransformGroup>
        </Rectangle.RenderTransform>

          <!-- A BevelBitmapEffect is applied to give the button a 
               "Beveled" look. -->
        <Rectangle.BitmapEffect>
          <BevelBitmapEffect />
        </Rectangle.BitmapEffect>
      </Rectangle>

      <!-- Present Text of the button. -->
      <DockPanel Name="myContentPresenterDockPanel">
        <ContentPresenter x:Name="myContentPresenter" Margin="20" 
          Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
      </DockPanel>
    </Grid>

    <ControlTemplate.Triggers>
      <!-- Set action triggers for the buttons and define
           what the button does in response to those triggers. -->
    </ControlTemplate.Triggers>
  </ControlTemplate>
</Setter.Value>

Aggiungere trigger di proprietà: aggiungere il markup evidenziato al blocco ControlTemplate.Triggers:

<ControlTemplate.Triggers>

  <!-- Set properties when mouse pointer is over the button. -->
  <Trigger Property="IsMouseOver" Value="True">

    <!-- Below are three property settings that occur when the 
         condition is met (user mouses over button).  -->
    <!-- Change the color of the outer rectangle when user 
         mouses over it. -->
    <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"
      Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />

    <!-- Sets the glass opacity to 1, therefore, the 
         glass "appears" when user mouses over it. -->
    <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />

    <!-- Makes the text slightly blurry as though you 
         were looking at it through blurry glass. -->
    <Setter Property="ContentPresenter.BitmapEffect" 
      TargetName="myContentPresenter">
      <Setter.Value>
        <BlurBitmapEffect Radius="1" />
      </Setter.Value>
    </Setter>
  </Trigger>

<ControlTemplate.Triggers/>

Premere F5 per eseguire l'applicazione e osservare l'effetto mentre si sposta il puntatore del mouse sui pulsanti.

Aggiungere un trigger dello stato attivo: in seguito verranno aggiunti alcuni metodi di impostazione per gestire i casi in cui il pulsante presenta lo stato attivo, ad esempio dopo un clic dell'utente.

<ControlTemplate.Triggers>

  <!-- Set properties when mouse pointer is over the button. -->
  <Trigger Property="IsMouseOver" Value="True">

    <!-- Below are three property settings that occur when the 
         condition is met (user mouses over button).  -->
    <!-- Change the color of the outer rectangle when user          mouses over it. -->
    <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"
      Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />

    <!-- Sets the glass opacity to 1, therefore, the          glass "appears" when user mouses over it. -->
    <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />

    <!-- Makes the text slightly blurry as though you were          looking at it through blurry glass. -->
    <Setter Property="ContentPresenter.BitmapEffect"       TargetName="myContentPresenter">
      <Setter.Value>
        <BlurBitmapEffect Radius="1" />
      </Setter.Value>
    </Setter>
  </Trigger>
  <!-- Set properties when button has focus. -->
  <Trigger Property="IsFocused" Value="true">
    <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />
    <Setter Property="Rectangle.Stroke" TargetName="outerRectangle"
      Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
    <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />
  </Trigger>

</ControlTemplate.Triggers>

Premere F5 per eseguire l'applicazione e fare clic su uno dei pulsanti. Il pulsante rimane evidenziato dopo avere fatto clic su di esso perché presenta ancora lo stato attivo. Se si fa clic su un altro pulsante, il nuovo pulsante ottiene lo stato attivo mentre quello precedente lo perde.

Aggiungere animazioni per MouseEnter e MouseLeave: A questo punto verranno aggiunte alcune animazioni ai trigger. Aggiungere il markup seguente in qualsiasi punto del blocco ControlTemplate.Triggers.
```

<EventTrigger RoutedEvent="Mouse.MouseEnter">
  <EventTrigger.Actions>
    <BeginStoryboard Name="mouseEnterBeginStoryboard">
      <Storyboard>

      
        <DoubleAnimation Storyboard.TargetName="glassCube" 
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
          By="-0.1" Duration="0:0:0.5" />

        
        <DoubleAnimation
        Storyboard.TargetName="glassCube" 
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
          By="-0.1" Duration="0:0:0.5" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
  <EventTrigger.Actions>

    
    <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
  </EventTrigger.Actions>
</EventTrigger>
```
Il rettangolo con effetto cristallo si riduce quando il puntatore del mouse viene spostato sul pulsante e torna nuovamente alle dimensioni normali quando viene spostato all'esterno.

Quando il puntatore viene spostato sul pulsante vengono attivate due animazioni (viene generato l'evento MouseEnter). Queste animazioni riducono il rettangolo con effetto cristallo lungo gli assi X e Y. Si notino le proprietà sugli elementi DoubleAnimation, ovvero Duration e By. Tramite la proprietà Duration si specifica che l'animazione viene eseguita per mezzo secondo, mentre By specifica che l'effetto cristallo viene ridotto del 10%.

Il secondo trigger di evento (MouseLeave) interrompe semplicemente il primo. Quando si interrompe un oggetto Storyboard, vengono ripristinati i valori predefiniti di tutte le proprietà animate. Pertanto, quando l'utente allontana il puntatore dal pulsante, quest'ultimo assume nuovamente lo stato che presentava prima che il puntatore del mouse fosse spostato sul pulsante. Per ulteriori informazioni sulle animazioni, vedere Cenni preliminari sull'animazione.

Aggiungere un'animazione per il clic del mouse sul pulsante: il passaggio finale consiste nell'aggiungere un trigger per il clic del mouse sul pulsante. Aggiungere il markup seguente in qualsiasi punto del blocco ControlTemplate.Triggers:

<!-- Animation fires when button is clicked, causing glass to spin.  -->
<EventTrigger RoutedEvent="Button.Click">
  <EventTrigger.Actions>
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetName="glassCube" 
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)" 
          By="360" Duration="0:0:0.5" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>

Premere F5 per eseguire l'applicazione e fare clic su uno dei pulsanti. Quando si fa clic su un pulsante, il rettangolo con effetto cristallo ruota.

Riepilogo

In questa procedura dettagliata, sono stati eseguiti i seguenti esercizi:

Style destinato a un tipo di oggetto (Button).
Controllate le proprietà di base dei pulsanti dell'intera applicazione tramite Style.
Create risorse quali sfumature da utilizzare per i valori di proprietà dei metodi di impostazione di Style.
Personalizzato l'aspetto dei pulsanti dell'intera applicazione applicando un modello ai pulsanti.
Personalizzato il comportamento dei pulsanti in risposta alle azioni dell'utente (ad esempio MouseEnter, MouseLeavee Click) che includevano effetti animazione.