Tuesday, January 11, 2011
by
XAML Team
|
Today I'm going to show you a very simple way to turn any ContentControl or a ListBox control into an AdRotator control. "What is AdRotator control?", you would ask. A common definition for an AdRotator is a control that lets you to show some data (most commonly ads) and change it periodically. An AdRotator control should be a control that lets you do that out-of-the-box without writing any code. Furthermore, switching the ads with a nice animation will give our AdRotator more polished and glamorous look. To accomplish this, we are going to use RadTransitionControl (a ContentControl) and RadCoverFlow (a ListBox) in the demo.
Here is how the demo looks like with the RadTransitionControl:
and with the RadCoverFlow control:
How to create this?
I've prepared some attached properties that attach AdRotator behavior to a ListBox or to a ContentControl when set to one of them. I put them into a separate assembly to let you use them directly. In this post we are not going to discuss how the attached properties are implemented - the source code is included and you can take a look at it if you want to.
The properties are ItemsSource, ItemChangeDelay and SelectedIndex. The ItemsSource property holds the collection of ads or other items to be shown consequently, the ItemChangeDelay property determines the time each item will be displayed and the SelectedIndex property could be used to determine from which item to start showing. When the behavior is triggered, the SelectedIndex property is updated automatically.
What you need to do in order to use the behavior is first to set the ItemsSource attached property to some collection of items . Then, after the XAML is parsed by the XAML parser, all it takes is to have the ItemsSource property explicitly set. Here is how you can put all this in action with RadTransitonControl (the first demo):
<telerik:RadTransitionControl adRotator:AdRotatorExtensions.ItemChangeDelay="0:0:3"
adRotator:AdRotatorExtensions.CurrentSelectedIndex="0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Width="700">
<telerik:RadTransitionControl.Transition>
<telerik:MotionBlurredZoomTransition />
</telerik:RadTransitionControl.Transition>
<adRotator:AdRotatorExtensions.ItemsSource>
<adRotator:AdsCollection>
<Image Source="/Banners/1_AJAX_Slide.jpg" />
<Image Source="/Banners/2_MVC_Slide.jpg" />
<Image Source="/Banners/3_SL_Slide.jpg" />
<Image Source="/Banners/4_WF_Slide.jpg" />
<Image Source="/Banners/5_WPF_Slide.jpg" />
<Image Source="/Banners/6_REP_Slide.jpg" />
<Image Source="/Banners/7_ORM_Slide.jpg" />
<Image Source="/Banners/8_JC_Slide.jpg" />
<Image Source="/Banners/9_JM_Slide.jpg" />
</adRotator:AdsCollection>
</adRotator:AdRotatorExtensions.ItemsSource>
</telerik:RadTransitionControl>
Hope this will help you to create more impressive applications!
You can download the whole demo with the source code of the attached properties from here.