Une des particularités du développement pour Windows Phone est l’interface Métro : sa police, ses couleurs et ses animations. On retrouve notamment un effet au clic sur un élément d’une liste, où l’on a l’impression que l’élément s’enfonce un peu, c’est-ce que l’on appelle le Tilt Effect.
De base, cet effet n’est pas disponible dans le SDK Windows Phone 7.1, cependant Microsoft a créé une bibliothèque externe permettant de l’utiliser facilement.
Installation du Silverlight toolkit pour Windows Phone
La première étape est donc d’installer la bibliothèque externe permettant de mettre en œuvre cet effet, elle s’appelle Silverlight for Windows Phone Toolkit. Pour l’installer je vous redirige vers mon précédent article portant sur l’installation de bibliothèque externe grâce à Nuget.
Utilisation de l’effet
Une fois la bibliothèque installée, l’effet peut s’utiliser soit en XAML soit en code behind (C# ou VB .Net). Le plus simple est d’utiliser le XAML, pour cela il faut ajouter la référence du namespace suivante en haut de chaque fichier .xaml où l’on utilisera l’effet :
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Il suffit ensuite d’indiquer les contrôles sur lesquels nous voulons utiliser l’effet :
<ListBox ItemsSource="{Binding Items}" toolkit:TiltEffect.IsTiltEnabled="True">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" />
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Ou encore :
<Button Text="Hello, world!" toolkit:TiltEffect.IsTiltEnabled="True" />
Il est même possible de l’utiliser sur tous les contrôles de la page à la fois :
<phone:PhoneApplicationPage
// ...
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
// ...
toolkit:TiltEffect.IsTiltEnabled="True">
A noter qu’une option permettant de supprimer l’effet Tilt sur un contrôle est aussi disponible. Cela est utile dans le cas où nous affectons l’effet à toute la page et où nous ne voulons pas que tous les éléments en bénéficient. Ou encore dans le cas d’une ListBox qui contient une Image et un TextBlock par exemple, et où nous voulons seulement affecter l’effet au clic sur le TextBlock :
<ListBox ItemsSource="{Binding Items}" toolkit:TiltEffect.IsTiltEnabled="True">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Image}" toolkit:TiltEffect.SuppressTilt="True" />
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Animer tous les contrôles
Par défaut, seuls les contrôles Button et ListBox peuvent bénéficier de cet effet. Pour affecter l’effet aux autres contrôles, comme la CheckBox ou le RadioButton par exemple, il faut les autoriser dans le code behind de cette manière :
public MainPage()
{
InitializeComponent();
TiltEffect.TiltableItems.Add(typeof(RadioButton));
}
Et après ?
La bibliothèque de Microsoft Silverlight for Windows Phone Toolkit apporte bien d’autres possibilités, telles que les animations ou les transitions entre les pages. Et leur utilisation est aussi simple que pour l’effet Tilt.