Le contrôle Scatterview de Surface permet de manipuler des éléments WPF ou Surface dans une zone qui lui est propre. Ainsi chaque enfant d’un Scatterview est manipulable et étirable à souhait pour autant que le développeur ai décidé de vous laisser cette possibilité. Il s’agit ni plus ni moins que du contrôle phare de la plateforme Surface.
En pratique, le contrôle Scatterview Surface propose comme tout contrôle WPF ou Surface un style par défaut. Nous allons voir comment le mettre à nu pour pouvoir profiter de la transparence du fond (background) des enfants : les ScatterViewItem.
En redéfinissant le template d’un ScatterViewItem cela supprime tous les styles par défaut. Voyons comment appliquer cela aux enfants du ScatterView via XAML.
En complément du post Silverlight 3 animations easing voici comment réaliser des animations Silverlight 3 entièrement côté code behind.
Le code ci-dessous permet d’animer la propriété “Canvas.Left” d’une Ellipse. Le but est uniquement d’apprendre à appliquer un effet de easing à une animation avec C#.
Création du Storyboard
Storyboard sb =new Storyboard();
Storyboard.SetTargetName(sb, "monEllipse");
Storyboard.SetTargetProperty(sb, new PropertyPath("(Canvas.Left)"));
Un Storyboard peut contenir une ou plusieurs animations.
Création d’une ou plusieurs animations
DoubleAnimation da =new DoubleAnimation();
da.Duration=new TimeSpan(0, 0, 2);// TimeSpan.FromSeconds()...
da.From=0.0;// Facultatif, par défaut la valeur courante sera retenue
da.To=180.0;
Application de l’effet Easing souhaité
ElasticEase ee =new ElasticEase();// création de l'effet easing, ici Elastic
ee.EasingMode= EasingMode.EaseOut;// Choix du mode de easing : EaseIn, EaseInOut, ou EaseOut
da.EasingFunction= ee;// association de l'effet de easing à l'animation
Association des animations au Storyboard et ajout du storyboard aux ressources
Silverlight 3 incorpore la gestion de plan 3D (PlaneProjection) au sein de son plugin et ce nativement. Voici un petit exemple “coding4fun” d’implémentation de plan 3D. Le but de l’exercice est de créer un simili Cube 3D avec un nuage de point puis d’animer le cube en question.
Ellipse el =new Ellipse();
el.Width=10;
el.Height=10;
el.Fill=new SolidColorBrush(Colors.Cyan);
cube.Children.Add(el); }
L’idée est donc d’avoir une Matrice de point et de créer chaque point du cube 3D à la volée. Pour animer le cube il faudra animer chaque point. Cela est bien entendu du à la gestion de la “3D” dans Silverlight et des projections de plans.
Respectueux des standards j’ai toujours opté pour intégrer mes applications Flash/Flex dans les règles avec une balise OBJECT digne de ce nom en évitant les librairies externes Javascript (bien que très fonctionnelles) et balises embed. Néanmoins voici un petit retour d’expérience pour les intégrateurs.
Lors du déploiement d’une application Flex j’ai obtenu l’erreur Javascript suivante sous Internet Explorer uniquement :
Ligne : 1
Caractère : 102
Erreur : ‘null’ a la valeur Null ou n’est pas un objet.
Code : 0
Le debuggeur incorporé dans Internet Explorer 8 m’a très vite fait comprendre qu’il s’agissait de l’ExternalInterface API d’ActionScript :
3 possibilités pour résoudre cette problématique :
Utiliser une librairie Javascript type swfobject ;
Utiliser le JavaScript par défaut généré par les outils Adobe ;
Utiliser la balise OBJECT suivante, bien que non valide xHTML strict :
Après quelques recherches voici mon TOP 10 des Skins / Thèmes Flex que j’ai pu trouvé sur la toile. Orientées design et pro toutes ces skins graphiques sont téléchargeables gratuitement et installables dans vos propres applications AIR/Flex. N’hésitez pas à les télécharger pour les tester. Certaines sont d’ailleurs éditables, je pense notamment aux deux dernières qui pourront servir de bonne base de travail pour créer une Skin totalement personnalisée. Merci aux auteurs !
