WynApse Home Page
Home    Blog    About    Contact       
Latest Article:

My Tags:
My Sponsors:

Lifetime Member:

Silverlight With Java Script Tutorial 12 - Silverlight Marquee Text

Scrolling Banner

I've scrolled text before, twice even, in Silverlight With Java Script Tutorial 06 - Basic Non-interactive Animation and Silverlight With Java Script Tutorial 07 - Basic Interactive Animation, Run-Time Alteration. But I've got an idea. After seeing this work, I might not like the idea, but since it wasn't a drop-dead simple solution, I thought I'd write it up.

The Idea

If you've seen my site change over the last year, one of the things you may have noticed is from time to time there's an event going on that I advertise with a banner and link in the center portion of my pages. This center portion is my "Content" page. The Header, footer, and sidebars are all controlled by my MasterPage. I add a graphic and a link to the Content if one exists in the database, so I don't have to recompile to change or remove the banner. With all the things that are going on this spring, and the Phoenix Silverlight User's Group starting up, I thought it might be interesting to have a marquee-type banner that may or may not be a link out to a page.


It seems pretty straightforward... display some text in a TextBlock, then scroll it to the left, so that was the first step.

I started off with a width of 600, and made a TextBlock that just about filled it. It scrolled very nicely using Canvas.Left from 0 to -600.

But then what? If I set the RepeatBehavior to be "Forever", it will scroll left then jump back and I didn't want that. The solution was to just add another TextBlock of the exact same text with it's own DoubleAnimation scrolling from Canvas.Left 600 to 0.

So now as the first one begins scrolling to the left, the second is right behind it, making it appear to be wrapped, and when the first one gets to -600, the second is just getting to 0, so a RepeatBehavior of "Forever" doesn't show a jump at all.

Real Text

Real text will be a little more challenging, because I'll want to place text that's longer than 600 and have it still work. I made the text in this example a little longer, and kept tweaking the two Storyboard values and it appears to work just fine!


At the point that I'm writing this, I really don't know if I'll have time to implement this on the site itself, but if I do, the entire canvas contents will have to be written using createFromXaml at the time the page is created. The text will be read from the database, as will the Storyboard offset value. That way I can place some text in the database, and then tweak the Storyboard value until it looks good.

XAML for producing this page:


<EventTrigger RoutedEvent="Canvas.Loaded" >
<Storyboard x:Name="animation" Storyboard.TargetProperty="(Canvas.Left)" RepeatBehavior="Forever" >
<DoubleAnimation Storyboard.TargetName="ScrollingText" From="0" To="-820" Duration="0:0:10" />
<DoubleAnimation Storyboard.TargetName="ScrollingText2" From="820" To="0" Duration="0:0:10" />

<TextBlock x:Name="ScrollingText" FontFamily="Comic Sans MS" FontSize="36" Foreground="Green" Text="This is a medium-length TextBlock scrolling left" />
<TextBlock x:Name="ScrollingText2" FontFamily="Comic Sans MS" FontSize="36" Foreground="Green" Text="This is a medium-length TextBlock scrolling left" />


As it turns out, this wasn't a very big deal unless you're looking for a 'marqueed' display. But if you are, I konw how to do it :)

Since this will be reading from the database and displaying at "loaded=" time the same as the OutlookBar, and the problem with IE6 still persists, I think I'm going to put up a simple test program for next week and see if I can write it such that it takes some metrics for display later. That sounds like one I should begin on Monday to be ready by Sunday!

Oh yeah... I said I might rethink my idea... after seeing this on an html page, I'll reserve judgement until I see it on the site, but it might just be too annoying to have something always up there... we'll see!

Stay in the 'Light!

Copyright © 2006-2017, WynApse