Discussion :

[Golzinne]

Bonjour,

Je voudrais pouvoir faire défiler un texte en haut d'une page, un peu à la façon d'un téléscripteur. Le texte est variable et provient d'une base de données.

Si je veux diffuser le mot "Bonjour" , ma zone d'affichage diffusera successivement:

______B
_____Bo
____Bon
___Bonj
__Bonjo
_Bonjou
Bonjour
onjour_

....

Je me vois bien utiliser le DispatcherTimer et commencer un truc bien compliqué mais je suppose qu'il doit exister un moyen plus simple...

[Samuel Blanchard]

Bonjour,

Est-ce un scrolling pixel par pixel ou caractère par caractère ?

[Golzinne]

Ce serait plutôt pixel par pixel car sinon l'effet serait trop saccadé.

L'avantage serait de pouvoir faire passer un message en continu dans une zone qui n'afficherait que quelques mots à la fois. Par exemple pour avertir les utilisateurs qu'une maintenance aura lieu à telle ou telle heure.

[Samuel Blanchard]

Il y a plusieur façon de faire ce genre de chose. Mais sache que si tu veux un control vraiment dynamique, il va falloir se lancer dans des calculs via des ActualWidth et que cela ne sera pas si simple qu'il n'y parait.

Si tu n'es pas très regardant, tu pourrais faire qqchose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<Border Width="300">
   <!-- Clipping -->
   <Border.Clip>
        <RectangleGeometry Rect="0,0,300,100"/>
   </Border.Clip>
<TextBlock x:Name="MonText" Text="Mon Text 123 1231 213 131 321 321 3123 213 21">
  <TextBlock.RenderTransform>
       <TranslateTransform X="300" />
  </TextBlock.RenderTransform>
</TextBlock>
</Border>

Ensuite un petit Storyboard peut animer l'ensemble en faisant varier le X du translateTransform jusqu'a ce qu'il atteigne la valeur -MonText.ActualWidth + 300

Il est clair que cette méthode est loin d'être la meilleur car elle ne peut pas gérer des messages de taille importante.

[Golzinne]

Merci pour ton intérêt pour ce problème.
Je teste sous peu et je te reviens.

Je pensais vraiment qu'avec tout ce qu'on voit, ça aurait été plus facile...

A propos, il fut un temps ou tu présentais un contrôle qui se retourne, as-tu encore un lien vers ce sujet ?

[Samuel Blanchard]

A propos, il fut un temps ou tu présentais un contrôle qui se retourne, as-tu encore un lien vers ce sujet ?

c'est ici

http://blog.naviso.fr/wordpress/?p=102

[Golzinne]

Merci, c'est super pour amener un peu d'originalité dans une page

[Golzinne]

Je reviens sur ce sujet car je vois plein de site (la plupart du temps flash) qui proposent du texte qui défile. Souvent, même, il y a possibilité de cliquer sur des hyperlinks dans le texte qui défile.

Je me dis donc que je (ou "on") passe à côté de quelque chose...

[Samuel Blanchard]

As-tu essayé la méthode que je te suggère au début de la discution ?

[DaMo`]

Je comprends pas ou est le problème avec translate transform, j'avais déjà essayé à mes débuts avec silverlight pour le fun, et sa fonctionne très bien

[Golzinne]

Oui, c'est une bonne base mais je ne comprend pas totalement le fonctionnement.

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 <Border x:Name="tele" Width="300" Margin="120,28,120,0" Height="28" VerticalAlignment="Top">
                        <!-- Clipping -->
                        <Border.Clip>
                            <RectangleGeometry Rect="0,0,300,100"/>
                        </Border.Clip>
                        <TextBlock x:Name="MonText" Text="Bonjour les petits amis, j'espère que vou vous amusez bien ...." RenderTransformOrigin="0.5,0.5">
  <TextBlock.RenderTransform>
                        		<CompositeTransform TranslateX="300"/>
                        	</TextBlock.RenderTransform>
                        </TextBlock>
                    </Border>

Et voici le storyboard:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 <Storyboard x:Name="telescripteur">
        	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="MonText">
        		<EasingDoubleKeyFrame KeyTime="0" Value="300"/>
        		<EasingDoubleKeyFrame KeyTime="0:0:15" Value="-300"/>
        	</DoubleAnimationUsingKeyFrames>
 
        </Storyboard>

Il y a 3 éléments, le border, le border clip et le textBlock.
La totalité de mon texte n'apparaissait pas, (la fin était rognée). J'ai donc essayé de changer le "width" du textBlock (pour le mettre à 450) mais ça ne change rien. En fait il faut changer le width du border (à 450) tout en laissant le width du border.clip à 300.

Donc, on va dire que ça fonctionne presque comme je voudrais...

Il reste encore que je voudrais que le texte réapparaisse sur la droite avant que le storyboard ne soit terminé et que donc le texte n'ait complétement disparu sur la gauche... (peut-être en créant un deuxième textBlock avec un storyboard décalé ?)

Et puis je voudrais que les dimensions du Border soient variables en fonction du texte que je désire afficher (par exemple un avis de maintenance ou de changement de version..)

Mais je touche au but et merci à vous pour votre aide.

[Samuel Blanchard]

Il reste encore que je voudrais que le texte réapparaisse sur la droite avant que le storyboard ne soit terminé et que donc le texte n'ait complétement disparu sur la gauche... (peut-être en créant un deuxième textBlock avec un storyboard décalé ?)

C'est toute la difficulté de la chose.
Tu peux effectivement faire comme tu as dit même si cela n'est pas très performant si ton message est long.

sinon tu peux utiliser un seul TextBlock. En calculant la taille du glyph qui sort et en ajustant le texte (sans la lettre sortante et avec une nouvelle lettre à la fin) lorsque le parcours du storyboard sur la lettre qui doit sortir est terminé.
Cela te permet d'afficher le strict nécessaire à l'écran

un exemple :

1 - le texte à afficher actuellement :

abcdefg

2 - quand 'a' doit sortir on ajoute une lettre ou plus au texte ici 'h' (selon la taille de la lettre a ) pour que l'on est l'impression d'une continuité. on lance un storyboard sur la longueur de 'a' pour donner l'impression de mouvement.

abcdefgh

3 - une fois le storyboard terminé on retire 'a' du texte, on repositionne le textblock à 0 (automatique avec le storyboard), et on retourne au point 1

bcdefgh

On peut faire aussi un paquet de truc sympa avec des canvas toujours avec la même technique.

[Golzinne]

Merci Samoteph, je pense que dans un premier temps (sans doute même dans un second ), je vais accepter d'avoir un vide entre chaque affichage.

D'autant plus qu'avec le rendertransform, le rendu est assez sympa.