Gli stati sono raggruppati in gruppi logici, nella tabella seguente sono elencati tutti gli stati ed i relativi gruppi del controllo Button.
| Stato | Gruppo |
|---|---|
| Unfocused | FocusStates |
| Focused | FocusStates |
| MouseOver | CommonStates |
| Normal | CommonStates |
| Pressed | CommonStates |
| Disabled | CommonStates |
La gestione della variazione degli stati dei controlli è a carico di Silverlight, per la precisione al componente VisualStateManager. Riprendiamo l'esempio della lezione precedente e introduciamo un apposito namespace.
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
Successivamente all'interno del Panel Control Grid definiamo le animazioni nei vari stati.
<Button Content="Click Me!" FontSize="20">
<Button.Template>
<ControlTemplate>
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0:0:.2" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBrush"
Storyboard.TargetProperty="Color"
To="Yellow" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundEllipse"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
...
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
Le modifiche applicate sono due. La prima avviene quando posizioniamo il mouse sopra il Button, in questo caso cambiamo il colore del bordo. L'altra avviene quando clicchiamo sul controllo, in questo scenario l'ellisse che fa da sfondo diventerà trasparente.
Quando un controllo entra in un determinato stato viene avviata la relativa animazione ed interrotta quella precedente.
