Je flip avec FlipBox

CODE MISE A JOUR le 14/02/2013 :)

Il y a bientôt 2 ans, j’avais posté un article sur la mise en place d’un contrôle en Silverlight qui se retournait et laissait apparaître avec une jolie animation son dos.
Pour voir l’exemple en Silverlight et le détail de sa mise en place, je vous engage à aller faire un petit tour sur cette page.

J’avais parlé de ce contrôle à un ami de la communauté ( Toss pour ne pas le citer ) et j’ai donc remis les mains dedans récemment pour l’adapter à Windows Phone.

Le contrôle FlipBox

Le contrôle FlipBox à donc évolué puisqu’il permet désormais un retournement selon une orientation horizontale ou verticale et bloque tout retournement si une animation est déjà engagée.
Les contrôles à inclure dans le FlipBox pour la face de front sont à écrire directement dans le contenu du FlipBox alors que ceux de dos dans sa balise ContentBack.

De même ces contrôles ne peuvent être toucher par l’utilisateur pendant l’animation afin d’empêcher toutes actions indésirables.

Un nouvel évènement permettant de détecter quand l’animation du retournement est terminée a été également ajouté.

Pour accélérer l’animation la propriété SpeedRatio se comporte comme un multiplicateur de vitesse (comme dans un Storyboard).
Sa valeur par défaut est 3 (soit 1/3 de secondes).

<Controls:FlipBox x:Name="FlipBox" AnimationOrientation="Vertical"  FlipCompleted="FlipBox_FlipCompleted_1" SpeedRatio="4">
					
	<Button Content="Hello Front" Click="Button_Click_1"></Button>

	<Controls:FlipBox.ContentBack>
		<Button Content="Hello Back" Click="Button_Click_1"></Button>
	</Controls:FlipBox.ContentBack>

</Controls:FlipBox>

Pour effectuer le flip du contrôle on appellera la méthode Flip().
Si cette méthode est appelée avec l’argument False le flip sera effectué sans animation (pratique pour l’initialisation par exemple).

	// Constructor
	public MainPage()
	{
		InitializeComponent();

		this.Loaded += MainPage_Loaded;
	}

	/// <summary>
	/// Load : On retourne tout de suite les controles coté dos
	/// </summary>
	/// <param name="sender"></param>
	/// <param name="e"></param>

	void MainPage_Loaded(object sender, RoutedEventArgs e)
	{
		this.FlipBox.Flip(false);
	}

	/// <summary>
	/// Click des boutons de chaque coté : on flip !
	/// </summary>
	/// <param name="sender"></param>
	/// <param name="e"></param>

	private void Button_Click_1(object sender, RoutedEventArgs e)
	{
		this.FlipBox.Flip();
	}

	/// <summary>
	/// Flip terminé : Echange des orientations Horizontal/Vertical
	/// </summary>
	/// <param name="sender"></param>
	/// <param name="e"></param>

	private void FlipBox_FlipCompleted_1(object sender, EventArgs e)
	{
		if (this.FlipBox.IsTurnOver == false)
		{
			this.FlipBox.AnimationOrientation = System.Windows.Controls.Orientation.Horizontal;
		}
		else
		{
			this.FlipBox.AnimationOrientation = System.Windows.Controls.Orientation.Vertical;
		}
	}

Une démo !

Après cette présentation en détail de l’utilisation de ce contrôle, il ne reste plus qu’à vous faire une petite démonstration en vidéo :

Les sources

Si vous êtes intéressé par ce petit contrôle vous trouverez ci-joint la solution VisualStudio comportant un exemple d’utilisation.
Pour les plus pressés, vous pouvez télécharger le fichier Generic.xaml à mettre dans un dossier « Themes » à la racine de votre projet ainsi que le code C#.

leave your comment