Continuous text Ticker in WPF

Question

Gaurang Gaurang Gaurang Gaurang Gaurang Gaurang Gaurang Gaurang Gaurang Gaurang Gaurang

I am working in WPF to create a text ticker. I am able to move the text from right to left forever but my problem is, that I want to move the same text seamlessly to create the above effect(Just like the stock exchange ticker). The above text must move endlessly.

How can I achieve it?

Answer 1

So from reading your question i'm not really sure what you want. Do you want a text, that scrolls out of the textbox, and starts over, like most marquee controls/functions.

Or do you want some text that runs over and over in your textbox, filling it out from start till end? and then with a given loop that is undectectable? :)

Code behind:

//Single line animation.

private void LeftToRightMarqueeOnTextBox()
{
  string Copy = " "+TextBoxMarquee.Text;
  double TextGraphicalWidth = new FormattedText(TextBoxMarquee.Text, System.Globalization.CultureInfo.CurrentCulture, System.Windows.FlowDirection.LeftToRight, new Typeface(TextBoxMarquee.FontFamily.Source), TextBoxMarquee.FontSize, TextBoxMarquee.Foreground).WidthIncludingTrailingWhitespace;
  //BorderTextBoxMarquee.Width = TextGraphicalWidth + 5;

  ThicknessAnimation ThickAnimation = new ThicknessAnimation();
  ThickAnimation.From = new Thickness(TextBoxMarquee.ActualWidth, 0, 0, 0);
  ThickAnimation.To = new Thickness(-TextGraphicalWidth, 0, 0, 0);
  ThickAnimation.RepeatBehavior = RepeatBehavior.Forever;
  ThickAnimation.Duration = new Duration(TimeSpan.FromSeconds(3));
  TextBoxMarquee.BeginAnimation(TextBox.PaddingProperty, ThickAnimation);
}

OR

//Sentence Repeat animation with no gaps.

string Copy = " "+TextBoxMarquee.Text;
  double TextGraphicalWidth = new FormattedText(Copy, System.Globalization.CultureInfo.CurrentCulture, System.Windows.FlowDirection.LeftToRight, new Typeface(TextBoxMarquee.FontFamily.Source), TextBoxMarquee.FontSize, TextBoxMarquee.Foreground).WidthIncludingTrailingWhitespace;
  double TextLenghtGraphicalWidth = 0;
  //BorderTextBoxMarquee.Width = TextGraphicalWidth + 5;
  while (TextLenghtGraphicalWidth < TextBoxMarquee.ActualWidth)
  {
    TextBoxMarquee.Text += Copy;
    TextLenghtGraphicalWidth = new FormattedText(TextBoxMarquee.Text, System.Globalization.CultureInfo.CurrentCulture, System.Windows.FlowDirection.LeftToRight, new Typeface(TextBoxMarquee.FontFamily.Source), TextBoxMarquee.FontSize, TextBoxMarquee.Foreground).WidthIncludingTrailingWhitespace;
  }
  TextBoxMarquee.Text += " "+TextBoxMarquee.Text;
  ThicknessAnimation ThickAnimation = new ThicknessAnimation();
  ThickAnimation.From = new Thickness(0, 0, 0, 0);
  ThickAnimation.To = new Thickness(-TextGraphicalWidth, 0, 0, 0);
  ThickAnimation.RepeatBehavior = RepeatBehavior.Forever;
  ThickAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
  TextBoxMarquee.BeginAnimation(TextBox.PaddingProperty, ThickAnimation);

XAML:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Canvas ClipToBounds="True" Name="canMain" Background="Transparent">
        <Grid Width="{Binding ElementName=canMain, Path=ActualWidth}" >
            <Grid.ColumnDefinitions>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Name="TextBlockMarquee" Text="This is my animated text" />
            <Border Grid.Row="1" BorderBrush="Black" BorderThickness="1">
                <TextBox ClipToBounds="True" Name="TextBoxMarquee" Text="lars er en god skakspiller, der tænker længere end de andre" BorderBrush="Transparent"/>
            </Border>
        </Grid>
    </Canvas>
</Grid>

Basically ignore most of the XAML. Whats important is the lenght of the Text in the Textbox. Havn't found a generic solution, thats why my From Thickness is number based.

But just had to be sure that this was what you were looking for :)

EDIT/UPDATE:

So try it out now, i've updated the code.. Hopefully it works, but from a few test it seemed like it :) Only thing that you need to be sure of is that the entire textbox is filled out, then i'm doing a copy of it, and i'll loop the two text from the strings graphical lenght :)(

EDIT/UPDATE: I've added my final solutions hope this was of any help.

EDIT/Update

Forgot to update my Repeat solution so it didn't cut off and make the loops visible.. Done now :)