Animation de texte WPF Marquee

Quelque chose comme cela devrait faire l'affaire.

Vous pouvez ajouter un Canvas à la StackPanel avec 2 TextBlocks une position 0, et un jeu à la ActualWidth de la StackPanelpuis, quand le premier bloc de texte va à l'écran de l'autre bloc.

La raison, j'ai utilisé Canvas est parce que Canvas est le seul élément qui prend en charge les ClipToBounds="false" cela permet à la 2ème TextBlock pour être visible même si elle est placée à l'extérieur des limites de la Canvas lui-même

Nous avons également besoin d'un IValueConverter pour obtenir la bonne valeur négative si vous voulez faire défiler de droite à gauche.

J'ai aussi ajouté de l'événement déclencheur sur SizeChanged donc, si la fenêtre est redimensionnée à l'animation des valeurs est mise à jour correctement.

Code:

namespace WpfApplication9
{
    ///<summary>
    ///Interaction logic for MainWindow.xaml
    ///</summary>
    public partial class MainWindow : Window
    {

        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class NegatingConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is double)
            {
                return -((double)value);
            }
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is double)
            {
                return +(double)value;
            }
            return value;
        }
    }
}

Xaml:

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication9"
        Title="MainWindow" Height="83" Width="222" Name="UI" Tag="Tol Level">
    <StackPanel Orientation="Horizontal" x:Name="stack">
        <StackPanel.Resources>
            <local:NegatingConverter x:Key="NegatingConverter" />
            <Storyboard x:Key="slide">
                <DoubleAnimation From="0" To="{Binding Width, ElementName=canvas, Converter={StaticResource NegatingConverter}}" Duration="00:00:10"
                      Storyboard.TargetProperty="X"
                      Storyboard.TargetName="transferCurreny"
                      RepeatBehavior="Forever"/>
            </Storyboard>
        </StackPanel.Resources>
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="transferCurreny" X="0"/>
        </StackPanel.RenderTransform>
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="StackPanel.Loaded">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="StackPanel.SizeChanged">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
        </StackPanel.Triggers>
        <Canvas x:Name="canvas" Width="{Binding ActualWidth, ElementName=stack}">
            <TextBlock Text="StackOverflow" FontSize="25"  x:Name="txtKron" Canvas.Left="0"/>
            <TextBlock Text="{Binding Text, ElementName=txtKron}" FontSize="25" Canvas.Left="{Binding Width, ElementName=canvas}"/>
        </Canvas>
    </StackPanel>
</Window>

Résultat:

Edit: de Gauche à Droite

 <StackPanel Orientation="Horizontal" x:Name="stack">
        <StackPanel.Resources>
            <local:NegatingConverter x:Key="NegatingConverter" />
            <Storyboard x:Key="slide">
                <DoubleAnimation From="0" To="{Binding Width, ElementName=canvas}" Duration="00:00:10"
                      Storyboard.TargetProperty="X"
                      Storyboard.TargetName="transferCurreny"
                      RepeatBehavior="Forever"/>
            </Storyboard>
        </StackPanel.Resources>
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="transferCurreny" X="0"/>
        </StackPanel.RenderTransform>
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="StackPanel.Loaded">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="StackPanel.SizeChanged">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
        </StackPanel.Triggers>
        <Canvas x:Name="canvas" Width="{Binding ActualWidth, ElementName=stack}">
            <TextBlock Text="StackOverflow" FontSize="25"  x:Name="txtKron" Canvas.Left="0"/>
            <TextBlock Text="{Binding Text, ElementName=txtKron}" FontSize="25" Canvas.Left="{Binding Width, ElementName=canvas, Converter={StaticResource NegatingConverter}}"/>
        </Canvas>
    </StackPanel>

Exteding la réponse de sa_ddam213c'est une révision de la première animation(de Droite à Gauche). Ce sera le travail pour de longues cordes. 🙂

<StackPanel Orientation="Horizontal"
x:Name="stack" 
Grid.Column="0"
Margin="0"                        >
<StackPanel.Resources>
<local1:NegatingConverter x:Key="NegatingConverter" />
<Storyboard x:Key="slide">
<DoubleAnimation From="{Binding ActualWidth, ElementName=stack}" 
To="{Binding ActualWidth, ElementName=txtKron, Converter={StaticResource NegatingConverter}}" 
Duration="00:00:30"
Storyboard.TargetProperty="X"
Storyboard.TargetName="transferCurreny2"
RepeatBehavior="Forever"/>
</Storyboard>
</StackPanel.Resources>
<Label Content="{Binding Path=RSSFeed}" 
x:Name="txtKron" 
Canvas.Left="0"
Foreground="#E9D460"
Padding="0"
Margin="0"
VerticalAlignment="Center">
<Label.Triggers>
<EventTrigger RoutedEvent="Label.Loaded">
<BeginStoryboard Storyboard="{StaticResource slide}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Label.SizeChanged">
<BeginStoryboard Storyboard="{StaticResource slide}"/>
</EventTrigger>
</Label.Triggers>
<Label.RenderTransform>
<TranslateTransform x:Name="transferCurreny2" X="0"/>
</Label.RenderTransform>
</Label>
</StackPanel>