Get Microsoft Silverlight

Monday, August 18, 2008

Silverlight Marquee Control

My previous post describes about making a Custom marquee control in WPF. Here is what I tried the same using Silverlight. Silverlight is getting really mature with its latest releases, it has come pretty close to WPF in most of the scenarios.
There is a difference with the way you create the Generic.xaml for writing the default look. You have to manually add the Generic.xaml to the project and set the build action as Resource file. See this blog for a detailed explanation of this. And the XAML code is still the same as what we wrote in WPF. The following code has to be added to the constructor so that whenever the control gets instantiated the default style will be associated with that.
public Marquee()
   DefaultStyleKey = typeof(Marquee);
The rest of the code is pretty much the same as WPF. I have added a Duration dependency property so that end user will be able to change the speed of the animation at run time. And subscribed to the mouse enter and leave so that animation will just stoped if the mouse is on top of the control.

Live Demo Url
Source Code can be downloaded


Anonymous said...

very cool

Stf said...

Just add this to make this control working in WPF when resize application. Great job, thanks for WPF community contribution.

if (sb.Children.Count == 0)
Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));
Storyboard.SetTarget(da, cp);

Filipe Barrenho said...


Great work. I tried to modify it in order to add dynamic text in runtime but it does not seem to work... somehow the animation restarts before reaching the end of the new text. Any idea on how to fix that?

Thank you.

Best regards,


Jobi Joy said...

I am not doing any Dynamic size calculation in the code. You can add a size refresh function(Can be a Dependancypropery) so that the control always works with the available size of the 'Content'.

Filipe Barrenho said...

Thank you =)

I managed to do that and now it seems just fine. I'm am kind of new to WPF and Silverlight, just getting into it now and I have another question... There is a gap when the text is scrolling, i.e., it only starts scrolling again after it reaches the end of the animation and I would like to get effect of continuous text. Do know how that can be accomplished? Maybe with two animations or something like that?

Thank you for you help.

Best regards,

Filipe Barrenho

keyur patel Cygnet Infotech said...

Great job, thanks. It's Exact what we want in our application.

Steve Jensen said...

I like this approach for a continuous scrolling marquee - how would you modify it to start filled (rather than empty with the first image coming in from the right), and repeat without a gap between the end of the last image and the beginning of the first?

婷婷 said...

Your blog is wonderful, I like it very much, thank you!
By the way, do you like Burberry Polos, which are very chic, especially the Ralph Lauren Polo Shirts, I love them very much. I also like playing sports, it can keep healthy, what do you like to do?
We are the outlet of Wholesale Polo Shirt, Polo Ralph Lauren shirts on sale,these products are best-seller in our store cheap polo shirts Cheap Polo ShirtsToday is Christmas, and our products also have a corresponding discount activitiesWholesale Polo Shirts -50% OFF,cheap polo shirts Cheap Polo ShirtsSo if you love these, you should not miss our store, we can meet what you want, and you can find many surprise in our store

Goran said...

I'm having some problems with such animations (as explained on stackoverflow). Do you have any idea or can you point me in the right direction of researching what could be wrong. I've tested this on a few machines and the animation is choppy on most of them.

Anonymous said...

Well, the animation is not only choppy - it uses way too much CPU, with occasional 100% spikes lasting a few seconds. And no, I don't have a netbook.

Anonymous said...

This Silverlight application has choppy animation. The same happens in the WPF version of this app.

Anonymous said...

Really good!!!

Anonymous said...


I like the demo but the download URL is not working. Can you please repost?