La diffusione sempre più ampia di Windows Phone e la facilità di sviluppo attraverso i tool di Visual Studio 2010 ha favorito anche la relativa crescita del marketplace e delle applicazioni che contiene. Grazie alla comunità degli sviluppatori che si crea, si diffondono anche nuove idee ed effetti grafici che vanno ad integrarsi piacevolmente con Metro e la UI di Windows Phone.

Tra questi effetti vi è ad esempio l'uso di sfondi animati, e più precisamente una traslazione lenta di un'immagine, per rendere più piacevole una pagina. Per realizzare questo genere di effetto bastano poche righe, grazie alla potenzialità di Silverlight e alla facilità del markup XAML.

Si comincia prima di tutto con la definizione del pannello contenitore della pagina, il quale dispone degli elementi di interfaccia e, cosa più importante, l'immagine di sfondo da applicare. Nel codice seguente si utilizza l'ImageBrush come elemento di Background:

<Grid x:Name="LayoutRoot">
  <Grid.Background>
  <ImageBrush ImageSource="girasole.jpg"
        Stretch="None">
     <ImageBrush.Transform>
     <TranslateTransform x:Name="transform"/>
     </ImageBrush.Transform>
  </ImageBrush>
  </Grid.Background>

  <!-- Elementi visuali -->
</Grid>

Da notare l'uso dell'oggetto TranslateTransform per preparare la trasformazione che ha il compito di traslare l'immagine, partendo da zero sull'asse delle X. Sempre sulla griglia si definisce quindi un EventTrigger che, attraverso una DoubleAnimation, sposta nel tempo il valore di X della trasformazione.

<Grid.Triggers>
  <EventTrigger RoutedEvent="Control.Loaded">
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation AutoReverse="True"
                  RepeatBehavior="Forever"
                  Duration="0:1:0"
                  From="0"
                  To="-580"
                  Storyboard.TargetName="transform"
                  Storyboard.TargetProperty="X" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
</Grid.Triggers>

L'immagine originale è orizzontalmente più grande rispetto alla pagina così da ottenere un movimento lento (impiega un minuto), fluido e infinito, poiché AutoReverse è impostato a true. Il risultato che si ottiene è il seguente:

E' importante non abusare e non utilizzare immagini troppo grandi, perché vanno a pesare sia sulla ram, sia sulla GPU, per effettuare la traslazione, penalizzando prestazioni e dispositivo.