web-dev-qa-db-fra.com

Animation de texte de sélection WPF

Je peux faire défiler le texte avec TranslateTransform, mais lorsque l'animation est proche de la fin, j'aimerais qu'elle recommence. Comme un serpent :)

C'est ce que j'ai

<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
    <StackPanel.RenderTransform>
        <TranslateTransform x:Name="transferCurreny" X="-40"/>
    </StackPanel.RenderTransform>
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation From="0" To="-900" Duration="00:00:10"
                      Storyboard.TargetProperty="X"
                      Storyboard.TargetName="transferCurreny"
                      RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </StackPanel.Triggers>
    <TextBlock FontSize="25"  x:Name="txtKron" Margin="10,0,7,0"/>
</StackPanel>

C'est ce que je voudrais:

enter image description here

wpfanimationmarquee
15
meymetkaplan

Quelque chose comme ça devrait faire l'affaire.

Vous pouvez ajouter une Canvas à la StackPanel avec 2 TextBlocks une position sur 0 et une position sur la ActualWidth de la StackPanel. Lorsque le premier bloc de texte disparaîtra de l'écran, l'autre bloc apparaîtra.

La raison pour laquelle j'ai utilisé Canvas est parce que Canvas est le seul élément qui supporte réellement ClipToBounds="false". Cela permet à la 2e TextBlock d'être visible même si elle est placée en dehors des limites de la Canvas elle-même.

Nous avons également besoin de IValueConverter pour obtenir la valeur négative correcte si vous souhaitez faire défiler de droite à gauche.

J'ai également ajouté l'événement trigger sur SizeChanged. Par conséquent, si la fenêtre est redimensionnée, les valeurs d'animation seront mises à 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:

enter image description hereenter image description here

Modifier: 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>
13
sa_ddam213

Le code dans la réponse ci-dessus ne produit pas de défilement continu. Voici le code pour le défilement continu.

XAML:

<Window x:Class="Window1"
    xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Canvas Margin="6,83,9,0" Name="ViewingBox" Background="YellowGreen" Height="35" VerticalAlignment="Top">
            <Label Canvas.Left="263" Canvas.Top="-2" Height="49" Name="BoxOne" FontSize="20">I need breakfast.</Label>
            <Label Canvas.Left="263" Canvas.Top="-2" Height="49" HorizontalAlignment="Stretch" Name="BoxTwo" VerticalAlignment="Top" FontSize="20">You can have oranges and Egg.</Label>
        </Canvas>   
    </Grid>
</Window>

Code VB derrière:

Imports System.Windows.Media.Animation

Public Enum Texts
    BoxOne
    BoxTwo
End Enum

Class Window1
    Private dubAnim As New DoubleAnimation()
    Private dubAnim2 As New DoubleAnimation()
    Private NewsTimer As New Windows.Threading.DispatcherTimer()
    Dim leadText As Texts = Texts.BoxOne

    Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        dubAnim.From = ViewingBox.ActualWidth
        dubAnim.To = -BoxOne.ActualWidth
        dubAnim.SpeedRatio = 0.05
        AddHandler dubAnim.Completed, AddressOf dubAnim_Completed
        Timeline.SetDesiredFrameRate(dubAnim, 320)
        BoxOne.BeginAnimation(Canvas.LeftProperty, dubAnim)

        dubAnim2.From = ViewingBox.ActualWidth
        dubAnim2.To = -BoxTwo.ActualWidth
        dubAnim2.SpeedRatio = 0.05
        Timeline.SetDesiredFrameRate(dubAnim2, 320)
        AddHandler dubAnim2.Completed, AddressOf dubAnim2_Completed

        AddHandler NewsTimer.Tick, AddressOf NewsTimer_Tick
        NewsTimer.Interval = New TimeSpan(0, 0, 0.9)
        NewsTimer.Start()
    End Sub

    Private Sub NewsTimer_Tick(ByVal sender As Object, ByVal e As EventArgs)
        Dim BoxOneLocation As Point = BoxOne.TranslatePoint(New Point(0, 0), ViewingBox)
        Dim BoxTwoLocation As Point = BoxTwo.TranslatePoint(New Point(0, 0), ViewingBox)

        If leadText = Texts.BoxOne Then
            Dim loc As Double = BoxOneLocation.X + BoxOne.ActualWidth
            If loc < ViewingBox.ActualWidth / 1.5 Then
                BoxTwo.BeginAnimation(Canvas.LeftProperty, dubAnim2)
                NewsTimer.Stop()
            End If
        Else
            Dim loc As Double = BoxTwoLocation.X + BoxTwo.ActualWidth
            If loc < ViewingBox.ActualWidth / 1.5 Then
                BoxOne.BeginAnimation(Canvas.LeftProperty, dubAnim)
                NewsTimer.Stop()
            End If
        End If
    End Sub

    Private Sub dubAnim_Completed(ByVal sender As Object, ByVal e As EventArgs)
        leadText = Texts.BoxTwo
        NewsTimer.Start()
    End Sub

    Private Sub dubAnim2_Completed(ByVal sender As Object, ByVal e As EventArgs)
        leadText = Texts.BoxOne
        NewsTimer.Start()
    End Sub
End Class
3
Leon Munir

L'extension de la réponse de saddam 213 , c'est un verset de la première animation (de droite à gauche). Cela fonctionnera pour de longues chaînes. :)

<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>
0
Francis Canoza