Guillaume André

Apprentissage, étude et approfondissement des nouvelles technologies

15 May, 2009

WygDay 2009

Posted by: Guillaume Andre In: News

WygDay 2009
Cette année j’aurais l’honneur d’animer deux présentations orientées RIA lors du WygDay 2009 qui se déroulera à Lille (EuraTechnologies) le 9 Juin.

  • La première présenation sera dédiée à Expression et Silverlight. Tout comme l’année dernière je l’animerais au côté de Yannick Lejeune. Cette année nous orienterons la présentation autour des version 3 d’Expression et Silverlight, le tout avec un tas de petite démo pratiques et réutilisables.
  • La seconde session quant à elle est dédiée exclusivement à la table Surface de Microsoft. J’aurais le plaisir de l’animer au côté de l’incontournable Mitsu Furuta de chez Microsoft France. Si vous vous posez des questions sur la table Surface, que vous soyez décideur, développeur ou designer c’est le moment de venir les poser !
  • Vous êtes intéressé par la RIA ? Vous vous posez des questions sur le devenir des technologies Microsoft dans ce domaine ? N’hésitez pas à venir participer à cette nouvelle édition du WygDay 2009 et ce, gratuitement !

    S'inscrire aux WygDays

21 Apr, 2009

Silverlight 3 : Spiral Flip Control 3D

Posted by: Guillaume Andre In: Silverlight

Silverlight 3 : Spiral Flip Control 3D

Au menu d’aujourd’hui un control Spiral Flip 3D !

Comme je vous avez pu le lire dans mes posts précédents dédiées aux animations et à la 3D il est à présent possible avec Silverlight 3 de réaliser quelques scénarios très simple en 3D. Voici un aperçu en vidéo.


View on Vimeo.

Quelques portions de code C# clés :

Storyboard.SetTargetProperty(sbNext, new PropertyPath("(UIElement.Projection).(PlaneProjection.RotationX)"));
PlaneProjection pj = new PlaneProjection();
pj.CenterOfRotationX = 0.5;
monImage.Projection = pj;
((FindName("img" + currentPhoto) as Image).Resources["sbPrev" + currentPhoto] as Storyboard).Begin();

Je compte packager ce contrôle dans les prochains jours, stay tuned !

19 Apr, 2009

Client Twitter : TweetToast v1.0 release !

Posted by: Guillaume Andre In: Air| News

TweetToast est un client AIR dédié à Twitter que je viens de mettre en ligne. Il permet de mettre à jour son statut Twitter très simplement. C’est tout, pas de superflux. N’hésitez pas à consulter la page officielle et d’installer/tester cette application :

http://www.codeui.com/tweettoast/

Feedback bienvenus !


TweetToast

16 Apr, 2009

Surface : Personnaliser le contrôle ScatterView

Posted by: Guillaume Andre In: Surface

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.


View on Vimeo.

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.

<s:ScatterView>
     <s:ScatterView.ItemContainerStyle>
          <Style TargetType=”{x:Type s:ScatterViewItem}”>
               <Setter Property=”Template”>
                    <Setter.Value>
                         <ControlTemplate TargetType=”{x:Type s:ScatterViewItem}”>
                              <ContentPresenter HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}” SnapsToDevicePixels=”{TemplateBinding SnapsToDevicePixels}”/>
                         </ControlTemplate>
                     </Setter.Value>
                 </Setter>
             </Style>
        </s:ScatterView.ItemContainerStyle>
     <s:ScatterViewItem />
     <s:ScatterViewItem />
     <s:ScatterViewItem />
</s:ScatterView>

A présent voyons comment interdire la rotation d’un ScatterViewItem

<s:ScatterViewItem CanRotate=”False” />

Il en est de même pour la fonctionnalité de “redimensionnement”

<s:ScatterViewItem CanScale=”False” />

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

sb.Children.Add(da);
LayoutRoot.Resources.Add("monStoryboard", sb);

Lancer l’animation, plus exactement, le Storyboard

(LayoutRoot.Resources["monStoryboard"] as Storyboard).Begin();

Animations Easing en resumé

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
lireAnimation.Click += new RoutedEventHandler(lireAnimation_Click);

Storyboard sb = new Storyboard();
Storyboard.SetTargetName(sb, "monEllipse");
Storyboard.SetTargetProperty(sb, new PropertyPath("(Canvas.Left)"));

DoubleAnimation da = new DoubleAnimation();
da.Duration = new TimeSpan(0, 0, 2);
da.From = 0.0;
da.To = 180.0;

ElasticEase ee = new ElasticEase();
ee.EasingMode = EasingMode.EaseOut;
da.EasingFunction = ee;

sb.Children.Add(da);
LayoutRoot.Resources.Add("monStoryboard", sb);
}

void lireAnimation_Click(object sender, RoutedEventArgs e)
{
(LayoutRoot.Resources["monStoryboard"] as Storyboard).Begin();
}