Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Thomas Lebrun

Tout sur WPF, LINQ, C# et .NET en général !

Actualités

[WPF] Comment créer un parallax avec WPF ?

Avant de commencer par aller plus loin dans les détails techniques, je vais revenir sur la définition d'un parallax.

Un parallax est un déplacement angulaire apparent d'un corp, observé à partir de 2 points différents. C'est une technique très utilisée en astronimie car elle permet de donner une idée de la distance des objets célestes. Regardez par exemple cette image:

Lorsqu'on regarde l'objet du point de vua A puis que l'on passe au point de vue B, l'objet semble s'être déplacé devant le carré rouge: c'est cela, un parallax.

En informatique/jeux vidéos, le "parallax scrolling" est une technique de pseudo 3D qui consiste à faire en sorte que les images du fond de la scène soient déplacées moins vite que les images du devant de la scène. Ainsi, les images suivantes:

Seront utilisées lors d'un "parallax scrolling" pour donner ce résultat:

On se retrouve donc avec une scène dans laquelle on a l'impression qu'il y a plusieurs niveaux de profondeur...

Ayant la chance, à Winwise, d'avoir un designer travaillant avec nous sur différents projets WPF et Silverlight, nous nous sommes posé la question de savoir comment faire pour reproduire un tel effet dans une application WPF. Et bien la réponse est plutôt simple et tiens en 2 mots:

  • Layers
  • TranslateTransform

En effet, sur l'animation précédente, on remarque que chaque image peut-être associée à une couche (layer). Ensuite, il suffit simplement d'appliquer un TranslateTransform à chacune de ces couches, en indiquant une valeur plus ou moins importante suivant la distance de la couche par rapport à l'utilisateur.

Concrètement, cela signifie que le designer n'a eu qu'a s'occuper des layers et de mon coté, j'ai implémenter le code nécessaire pour faire bouger (translater) ces layers en fonction des coordonnées de la souris:

private void Window_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)

{

    Point mouse = e.GetPosition(this);

 

    TransformGroup group = (TransformGroup)this.grid.RenderTransform;

    TranslateTransform translate = (TranslateTransform)group.Children[3];

    translate.X = this.Width / 2 - (mouse.X) * 0.5;

    translate.Y = this.Height / 2 - (mouse.Y) * 0.5;

 

    TransformGroup group1 = (TransformGroup)this.grid1.RenderTransform;

    TranslateTransform translate1 = (TranslateTransform)group1.Children[3];

    translate1.X = this.Width / 2 - (mouse.X) * 1;

    translate1.Y = this.Height / 2 - (mouse.Y) * 1;

 

    TransformGroup group2 = (TransformGroup)this.grid2.RenderTransform;

    TranslateTransform translate2 = (TranslateTransform)group2.Children[3];

    translate2.X = this.Width / 2 - (mouse.X) * 1.5;

    translate2.Y = this.Height / 2 - (mouse.Y) * 1.5;

    }

Et le tour est joué !

Certes, c'est du WPF mais rien de ce qui est dans le code (XAML et/ou C#) n'est, à priori, pas reproduisible ne Silverlight Wink

Pour tester le résultat par vous-même, vous devrez télécharger les sources de la démo: Parallax.zip (Solution Visual Studio 2008 Beta 2)

 

A+

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: mardi 13 novembre 2007 09:54 par Thomas LEBRUN
Classé sous : ,

Attachment(s): Parallax.zip

Commentaires

RaptorXP a dit :

Cool le programme de démo ! Encore un truc qui donne envie de faire des jeux en WPF

# novembre 13, 2007 11:18

Jb Evain a dit :

dry Thomas, dry.

http://monoport.com/5426

# novembre 13, 2007 12:52

tkfe a dit :

Ne devrait pas dire UNE parallax en référence à la parallaxe ?

Fred l'astronome très amateur (québécois:-)

# novembre 13, 2007 13:14

Thomas LEBRUN a dit :

@ Jb: Oui bon je sais le code n'est pas clean mais bon, c'est une démo :)

PS: Pas mal ce site Web ;)

@ Tkfé: Aucune idée, si tu le dis :)

# novembre 13, 2007 13:20

tkfe a dit :

http://fr.wikipedia.org/wiki/Parallaxe

arg... je m'en veux, j'ai utilisé wikipedia :-)

# novembre 13, 2007 13:29
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01