Le Blog de Georges Legros

En html il existe un contrôle permettant de faire défiler du texte automatiquement, le "Marquee"

Exemple de Marquee

Je me suis donc dit qu'il serait peut-être intéressant de passer ce concept dans un environnement WPF.

Afin de créer un contrôle réutilisable, je vais ici présenter un CustomControl complet et non juste un simple style. Ce dernier dérivera de ContentControl afin de pouvoir faire défiler n'importe quel élément.

Commençons tout d'abord par le style:

   <Style TargetType="{x:Type local:Marquee}">
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="{x:Type local:Marquee}">
                   <Canvas ClipToBounds="True">
                       <ContentPresenter x:Name="PART_Content"/>
                   </Canvas>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>

Notre nouveau composant étant un ContentControl, il n'est pas étonnant de retrouver un ContentPresenter. Notez également la présence du tag ClipToBounds dans le Canvas, celui-ci a pour objectif de cacher les éléments qui ne sont pas dans la partie "visible" du Canvas, autrement dit, lorsqu'un item sort du rectangle visible du panel, on ne peut plus le voir.

Ici, rien de très compliqué, je me suis évidement limité au strict nécessaire, avec un peu de style il sera possible de faire des afficheurs beaucoup plus élégant.

Au niveau du code, il n'y a rien d'étonnant. Je choisis de donner la possibilité aux utilisateur de régler la vitesse de défilement et on retrouve également le code nécessaire à l'animation :

   public class Marquee : ContentControl
   {
       FrameworkElement _contentPresenter;
       static Marquee()
       {
           DefaultStyleKeyProperty.OverrideMetadata(typeof(Marquee), new FrameworkPropertyMetadata(typeof(Marquee)));

       }

       public Marquee()
       {
           this.Loaded += new RoutedEventHandler(Marquee_Loaded);
       }

       void Marquee_Loaded(object sender, RoutedEventArgs e)
       {
           Animate();
       }

       public override void OnApplyTemplate()
       {
           _contentPresenter = Template.FindName("PART_Content", this) as FrameworkElement;
       }

       public Duration MarqueeDuration
       {
           get { return (Duration)GetValue(MarqueeDurationProperty); }
           set { SetValue(MarqueeDurationProperty, value); }
       }

       public static readonly DependencyProperty MarqueeDurationProperty =
           DependencyProperty.Register("MarqueeDuration", typeof(Duration), typeof(Marquee), new UIPropertyMetadata(new Duration(new TimeSpan(0))));


       DoubleAnimation _doubleAnimation = new DoubleAnimation();
       Storyboard _storyBoard = new Storyboard();
       private void Animate()
       {
           if (IsLoaded)
           {
               _doubleAnimation.From = this.ActualWidth;
               _doubleAnimation.To = -_contentPresenter.ActualWidth;
               _doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
               _doubleAnimation.Duration = MarqueeDuration;
               Storyboard.SetTargetProperty(_doubleAnimation, new PropertyPath("(Canvas.Left)"));
               _storyBoard.Children.Add(_doubleAnimation);
               _storyBoard.Begin(_contentPresenter, true);
           }
       }
   }

Il est aussi possible de mettre le code relatif à l'animation dans le style.