Get Microsoft Silverlight

Friday, August 15, 2008

WPF Custom Controls - Marquee control

WPF and Silverlight have the cool idea of 'Lookless controls' which means you can skin a control in whichever way you like. Or in other words the UI rendering logic of a WPF control lives totally in a seperate world than the control's functionality. This enables a WPF applications capaibility to dress up in totally different skins and layouts at the run time.
So let me explain the creation of a simple custom control by taking the example of a Marquee control. Hope you are well aware of the HTML Marquee tag. I am explaining the CustomControl concept of WPF with Marquee control as an example.

Step to Create a custom control with VS2008

The above step will give you the class file and Generic.xaml added to the project.

Who is your control Parent?
First I should choose the base class from which my control has to derive from. I am seeing the Marquee as a control which holds up a content element always and the content gets scrolled horizontally. So I can say that ' Marquee control has a Content' so lets write that statement in C#.
public class Marquee : ContentControl

What is the default look of your control?
Next step is to define the visual elements which builds up the default look. My idea here is to put a Canvas and make the content scroll inside the canvas using DoubleAnimation on Canvas.Left attached property. So the default template can be writen as shown in the XAML.
   <Style TargetType="{x:Type local:Marquee}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type local:Marquee}">
                <Canvas>
                  <ContentPresenter  x:Name="PART_Content"/>
                </Canvas>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
 
You can see from the XAML that the ContenPresenter is having a name so that we can find the reference of this control inside the control logic. So here we are making a mutual contract between the Control logic and the UI logic that we will always expect a control named PART_Content in the control template. So anybody who is goinging to re-template this would be considering this fact.
Using the following code we can find the instance of the above metioned contentpresenter

public override void OnApplyTemplate()
{
  _contentPresenter = Template.FindName("PART_Content", this) as FrameworkElement;

Marquee Logic Implementation

private void Animate()
{
   if (IsLoaded)
   {                            
     _doubleAnimation.From = this.ActualWidth;
     _doubleAnimation.To = -_contentPresenter.ActualWidth;
 
     _doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
     _doubleAnimation.Duration = Duration;
     Storyboard.SetTargetProperty(_doubleAnimation, new PropertyPath("(Canvas.Left)"));
     _storyBoard.Children.Add(_doubleAnimation);               
 
     _storyBoard.Begin(_contentPresenter,true);                
   }
}
The animation code has taken the actualWidth of the content and animate the Canvas.Left from control's rightside to left.

Sample Application
Check out the XBAP application - LIVE DEMO running this marquee. One marquee with a TextBlock as its content and another with an ItemsControl as its content.
<lib:Marquee Duration="00:00:10" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch">       
   <TextBlock FontSize="18" FontWeight="Bold" Foreground="#FF000000" Text="Sample Marquee Text" />
</lib:Marquee>
 
<lib:Marquee Duration="00:00:10" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch">
   <ItemsControl x:Name="lstPhotos" ItemsTemplate="{StaticResource someCoolTemplate}"/>
</lib:Marquee>
 

11 comments:

Sameer C Thiruthikad said...

This is cool... Also post a link to download the complete source as a zip file.

BV said...

source code please. Excellent work.

Andrew Jones said...

Any chance of source?

Jobi Joy said...

Please use the Silverlight source or just copy and paste the source in the post to a VS2008 solution. It has all the major source code in it.. Sorry that I lost the code from my machine. But no other secret in it other than the code in the post.

Anonymous said...

Do you think you can recreate the source code, I was not able to reproduce like you have it.

Thanks

kapil bhavsar said...

What about CPU usage ... on a single core the CPU usage are very high.

Is there any way to bring it down

婷婷 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

ASHISH said...

I have saw your marquee control demo
but i have one question how can i remove the space between first item & last item.

Oscar said...

Hello, my name is Oscar and I´m a colombian programmer, I implemented a Marquee but I have a problem.....
the marquee looks like a robot when I have a video in the same form, do you know a possible solution????

thanks for your help, Excuse me, my english is very bad jejejej.

empo said...

Your post is difficult to follow but I accept that English is not your first language. However you should either show more complete code snippets or allow the source code to be downloaded.

Anonymous said...

Thank's for sharing this with us. Here's another alternative that I found (has full source code) for text scroller / ticker / feed: http://koderhack.blogspot.com/2011/05/content-ticker-control-in-wpf.html