Creating a ticker moving text from right to left (C#)

06-18-2009 1:28 PM |

I have created a simple ticker that moves text from right to left using animation. Now this works great, but Im having some issues getting the text to appear one letter at the time from the right. The text disappeares one letter at the time on the left side so this works.

 So if the text is "hello how are you" I want the 'h' to appear moving from right to left to appear first, then 'he', then 'hel', 'hell', hello', hello ' and so on

Here is the code I have that works (but misses this feature)

//Page.aspx

<UserControl x:Class="Ticker.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

Width="400" Height="300">


    <StackPanel >
        <StackPanel.Resources>
            <Storyboard x:Name="tickerAnimation" Completed="tickerAnimation_Completed" >
                <DoubleAnimation x:Name="animationText2" 
Storyboard.TargetName="tickerText2"
Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0"
Duration="0:0:5" From="200" To="-250"  />
            </Storyboard>
        </StackPanel.Resources>
        <Canvas >
            <TextBlock x:Name="tickerText2" Text="There has been a thunderstorm in Greenville" />
        </Canvas>
    </StackPanel>


</UserControl>

//Page.aspx.cs

 public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            tickerAnimation.Begin();
        }        

        private void tickerAnimation_Completed(object sender, EventArgs e)
        {
            tickerAnimation.Begin();
        }
    }

Re: Re: Creating a ticker moving text from right to left (C#)

06-19-2009 3:53 AM |

Yes this is excactly what I needed.

I was just wondering about one more thing. The text that I will animate might vary. I have my messages in a queue, and on each tickerAnimation_Completed I will pick another text from the queue and change the animated text. This works perfect.

My next challenge is since my canvas has e.g. a width of 800 and the text might just be "This is a ticker" it could be boring having to wait for that text to dissapear to the left before triggering another message. So I added another textblock that also picks from the queue. This also works, but I am having difficulties detecting excatcly when I should trigger the 2nd tickeranimation. I want this to happend when the first tickeranimation has revelaed all its text + some whitespace. Do you understand what I mean?

If I am able to do that I figure I could just generate tickeranimations dynamically. This would be really cool.

So e.g. in my case I might have a queue of 2 messages

Re: Re: Creating a ticker moving text from right to left (C#)

06-20-2009 6:27 AM |

 Maybe you can make it with a begin time in a storyboard, no?

Re: Re: Re: Creating a ticker moving text from right to left (C#)

06-20-2009 7:43 AM |

I figured it out in the end.

I make a dynamic solution that generates a new storyboard each time a new ticker should be sent out.

I know when a new storyboard should be created by checking the left canvas property of the text relative to the textblocks actualwidth. A Backgroundworker generates the new storyboards :)

Re: Re: Re: Creating a ticker moving text from right to left (C#)

06-25-2009 5:47 AM |

Can you post your solution here ? Because I need to do something exactly like that for a personal project.

Thank you,

 Hadrien REINER

Re: Re: Re: Re: Creating a ticker moving text from right to left (C#)

06-25-2009 2:52 PM |

Hello

Here is a version of this that shows you how it can be done. I added comments as well :)

If you improve it or fix something let me now :)

PS: This is just a proof of concept for me so there are many improvements that could be done to code

http://cid-e20db49df7d9f1fa.skydrive.live.com/self.aspx/SL%20DEMO/TickerSilverlightApplication.zip