Nel Microsoft design style applicato in Windows 8, le animazioni sono parte attiva della user experience poichè sono finalizzate ad una maggiore compresione della presenza degli elementi e soprattutto del loro alternarsi durante l'utilizzo sistema operativo.

Microsoft ha ritenuto questo principio così importante anche per le Windows Store app tanto da aver arricchito fin da subito di una proprietà Transitions tutti oggetti grafici che ereditano da UIElement.

Con tale proprietà, di tipo TransitionCollection, possiamo gestire le animazioni di ogni elemento dell'interfaccia con una semplicità estrema, ma anche con la consueta flessibilità di WinRT.

TransitionCollection accetta una collezione di oggetti Transition e delle sue estensioni. Nell'SDK troviamo:

• AddDeleteThemeTransition
• ContentThemeTransition
• EdgeUIThemeTransition
• EntranceThemeTransition
• PaneThemeTransition
• PopupThemeTransition
• ReorderThemeTransition
• RepositionThemeTransition

I loro nomi sono abbastanza autoesplicativi sull'animazione che possono applicare ad un oggetto, in relazione ad un corrispondente evento. Uno degli aspetti interessanti è anche la possibilità di combinare tra loro più transizioni.

L'utilizzo è estremamente semplice e come sempre può essere gestito sia da markup diretto, che negli Style/Template e anche programmaticamente.

<Button Content="Button">
  <Button.Transitions>
    <TransitionCollection>
      <EntranceThemeTransition />
    </TransitionCollection>
  </Button.Transitions>
</Button>

Oltre a singoli UIElement, collezioni di Transition possono essere applicati anche agli elementi interni a ItemsControl, ContentControl e Panel.

Per questi oggetti, TransitionCollection è esposto da altre proprietà rispetto a Transitions, come ItemContainerTransitions, ContentTransitions e ChildrenTransitions. Con esse le transizioni sono applicate automaticamente in sequenza per ciascun elemento delle collezioni, creando così effetti molto piacevoli.

<ItemsControl Grid.Row="1">
  <ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
      <EntranceThemeTransition />
    </TransitionCollection>
  </ItemsControl.ItemContainerTransitions>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal">
        <StackPanel.Transitions>
          <TransitionCollection>
            <EdgeUIThemeTransition />
          </TransitionCollection>
        </StackPanel.Transitions>
      </StackPanel>
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.Items>
    <Rectangle Fill="Red"
          Width="100"
          Height="100"
          Margin="10" />
    <Rectangle Fill="Red"
          Width="100"
          Height="100"
          Margin="10" />
  </ItemsControl.Items>
</ItemsControl>