Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 49 di 59
  • livello principiante
Indice lezioni

Definire gli stati dei controlli

Modificare il comportamento dei controlli assegnando animazioni o azioni agli stati
Modificare il comportamento dei controlli assegnando animazioni o azioni agli stati
Link copiato negli appunti

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.

Ti consigliamo anche