Lavora con noi

ASP.Net

Siti tematici

Lezioni:

...
<
48
49
50
>
...
Indice

Definire gli stati dei controlli

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!" Height="100" Width="150" 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.