Getting Started

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

Breezer100 — Thu, 25 Jun 2009 18:52:37 GMT

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

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

hadrien.reiner — Thu, 25 Jun 2009 09:47:26 GMT

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: Creating a ticker moving text from right to left (C#)

Breezer100 — Sat, 20 Jun 2009 11:43:34 GMT

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: Creating a ticker moving text from right to left (C#)

Galaad — Sat, 20 Jun 2009 10:27:19 GMT

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

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

Breezer100 — Fri, 19 Jun 2009 07:53:18 GMT

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

1) Ronaldo leaves Manchester United

2) There has been a thunderstorm in Greenville

Below is an example of what I have so far. Now I start the 2nd ticker by clicking the start button. But I want this to happend automatically when the first message e.g. is a its current position (the whole text is revealed and some spacing before next message)

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

K2P2 — Thu, 18 Jun 2009 22:34:36 GMT

Canvases don't clip their children so you need to add something like the following:

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

Breezer100 — Thu, 18 Jun 2009 17:28:48 GMT

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();
        }
    }