Click here to Skip to main content
11,702,130 members (62,506 online)
Click here to Skip to main content

Silverlight Carousel: Creating a Silverlight Control Displays Picture in an Interactive Carousel

, 2 Aug 2009 Ms-PL 469K 5.7K 128
Rate this:
Please Sign up or sign in to vote.
This article describes how to create and use the Silverlight Carousel control.
screen capture

Introduction and Background

What is Carousel? Carousel is just a Silverlight 2.0 (now it's has been updated to Silverlight v3) control which can display collections of pictures like a carousel (have you ever see a carousel?). When I creating Mashup in Microsoft Popfly I saw a display control named "Carousel." It was very attractive to me so I wanted to find one like this to use it in my own application. Using Google I found YetAnotherCarousel, but it was too coarse to use. And the other one I found was created in Silverlight V1 and was very hard to use. But the idea dogged me, attracted me day and night. I Googled again and again but could not find a perfect one. So one day, I asked myself, "Why not create one for myself?"

Key Features

  • It's really a Silverlight V2 (v3 also) Control, all written in C#.
  • Very simple to use.
  • Has many useful properties to control it's behaviour.
  • Can turning continuous or step by step.

Using the Control

Using the Carousel control is very simple just like any other control. First of all, you add the assembly (cokkiy.display.carousel) and reference it to your Silverlight Project. Then look at the code:

  1. Add the XMLNS reference to your Page XAML file beginning.
    <UserControl x:Class="ControlTest.Page"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:display="clr-namespace:Cokkiy.Display;assembly=Cokkiy.Display.Carousel"
                 Width="800" Height="600">
  2. Place the Carousel in your layout control. I put it in a grid, and you can put it in any UIElement as a content or child item.
    <display:Carousel x:Name="carousel" TurnDirection="Counterclockwise"
          Padding="5,5,5,5" >
                <display:Carousel.Background>
                    <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                        <GradientStop Color="#FF000000"/>
                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
    
                    </LinearGradientBrush>
                </display:Carousel.Background>
                <display:Carousel.ItemSources>
                    <display:ItemSource Title="01" ImageSource="Images/01.jpg"/>
                    <display:ItemSource Title="02" ImageSource="Images/02.jpg"/>
                    <display:ItemSource Title="03" ImageSource="Images/03.jpg"/>
    
                    <display:ItemSource Title="04" ImageSource="Images/04.jpg"/>
                    <display:ItemSource Title="05" ImageSource="Images/05.jpg"/>
                    <display:ItemSource Title="06" ImageSource="Images/06.jpg"/>
                    <display:ItemSource Title="07" ImageSource="Images/07.jpg"/>
                    <display:ItemSource Title="08" ImageSource="Images/08.jpg"/>
                </display:Carousel.ItemSources>
    
            </display:Carousel>

The ImageSource property just is the Silverlight Image's source, so you can set it any valid Url as Image's source do, more info about it you can refer MSDN's Image's source property.

Notice how I added a Carousel in my page. The Carousel has 8 images as its children. Let's look at the screen capture.

Screen capture

How It Works?

From the screen capture we can know the Carousel is composed of three main parts. The Canvas where the image placed, the small item (the carousel leaf) contains an image which can turn around with the ellipse (it is a virtual image ellipse does not exist) and the panel displays the selected image (the large image in the picture). All three parts are also Silverlight controls which have their own properties. The carousel leaf control I called is CarouselItem which calculates the position of where to place the Canvas, and the scale range by itself. The key point is in placing each item in a proper point and making its size fit any position, and making it turn along with the ellipse.

To make the Carousel control like a real carousel, we must ensure:

  • The farther item is smaller than the nearer item, and the nearest item is the biggest item.
  • The item in the back (father) is under the item in the front (near).
  • The item in the foreground is blurred.

Let's see the following figure demo the concept.

carousel figure

When the center point, O, is constant, the positon and size of CarouselItem at point P only depends to the angle of A. We can calc the positon and size like following code.

// Position
double dx = Axis.Width * Math.Cos(newAngle) + Center.X;
double dy = Axis.Height * Math.Sin(newAngle) + Center.Y;
Canvas.SetLeft(this, dx);
Canvas.SetTop(this, dy);
// Scale
double sc = 2 + Math.Cos(newAngle - Math.PI / 2);
ScaleTransform st = (
    this.RenderTransform as TransformGroup).Children[0] as ScaleTransform;
st.ScaleX = sc;
st.ScaleY = sc;
// Set the ZIndex based the distance from us, the far item
// is under the near item
Canvas.SetZIndex(this, (int)dy);

The position and size all only depends on the angle, so it's very easy to make it turn around the ellipse. Silverlight support the DependencyProperty animation, so we make the angle as a DependencyProperty. And make a DoubleAnimation on each item's angle property. The DoubleAnimation has a property named By which means the total amount by which the animation changes its starting value. When we set it to 2*PI, it starts turning a lap.

Storyboard storyboard = new Storyboard();
//this.Resources.Add(name, storyboard);

// Angle animation
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.By = 2*Math.PI;
doubleAnimation.Duration = duration;
doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

// Set storyboard target property
storyboard.Children.Add(doubleAnimation);
Storyboard.SetTarget(doubleAnimation, item);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Angle"));

We create a storyboard for each item and then add all these storyboards to a global storyboard. Then if we want the carousel to turn, we just start the global storyboard.

History

  • 23rd November, 2008: Initial post
  • 26rd November, 2008: Fixed a bug in source code. When remove an item from the collection, it's will throw an exception, now fixed.
  • 2nd August,2009, Updated the control to Silverlight V3.

My English is not very good so I hope you can understand what I've said. The sample code  include some pictures from public web, you should not use the image in your product.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Share

About the Author

cokkiy
Team Leader
China China
The God created the world.
The programer made the world easy.
I am a programer like c# and c++, so I am writting application with it.
Creating beautiful application make life easy.
If you have a project and looking for a man, I'll be say "hi, I am just the man you are looking for."

You may also be interested in...

Comments and Discussions

 
QuestionData driven Pin
Adriaan Davel7-Mar-12 0:14
memberAdriaan Davel7-Mar-12 0:14 
Questioni wand to display the image caruser over a windows form, how can i do this??? Pin
Member 209938220-Aug-11 2:55
memberMember 209938220-Aug-11 2:55 
AnswerRe: i wand to display the image caruser over a windows form, how can i do this??? Pin
DaveCS22-Aug-11 5:56
memberDaveCS22-Aug-11 5:56 
Questiontroubleshoot Carousel Pin
picasso213-Aug-11 7:08
memberpicasso213-Aug-11 7:08 
AnswerRe: troubleshoot Carousel Pin
DaveCS18-Aug-11 21:59
memberDaveCS18-Aug-11 21:59 
You should re-download the project zip file (Carousel_src_v3.zip) and try the following.

Right click the soultion and choose to open with VS2010

Change all of the projects to target Silverlight 4.

Next you will probably get an error and the source of the error will be a line in ImageCollection.cs so right click and select exclude from project. (Exclude ImageCollection.cs)

Change the image sources to
<display:ItemSource Title="01" ImageSource="http://somesite.com/someimage.jpg"/> etc

It sounds like the images are not found how you have it setup. If it shows the remote images without crashing it's your image sources.
QuestionGet photots and load dynamically Pin
Raibeart12-Jul-11 10:20
memberRaibeart12-Jul-11 10:20 
AnswerRe: Get photots and load dynamically Pin
DaveCS18-Aug-11 22:04
memberDaveCS18-Aug-11 22:04 
QuestionRotating Carousel Verticaly Pin
Arkady Geltzer8-Jul-11 9:03
memberArkady Geltzer8-Jul-11 9:03 
GeneralMy vote of 5 Pin
DaveCS14-Apr-11 23:44
memberDaveCS14-Apr-11 23:44 
GeneralMy vote of 5 Pin
gilbertblanco8-Jan-11 6:33
membergilbertblanco8-Jan-11 6:33 
GeneralMy vote of 1 Pin
ra3doa6-Dec-10 2:40
memberra3doa6-Dec-10 2:40 
GeneralRe: My vote of 1 Pin
Marcelo Ricardo de Oliveira4-Jan-11 23:51
mvpMarcelo Ricardo de Oliveira4-Jan-11 23:51 
GeneralRe: My vote of 1 Pin
DaveCS18-Aug-11 22:09
memberDaveCS18-Aug-11 22:09 
GeneralAdd image with URL [modified] Pin
SunProphit4-Aug-10 10:50
memberSunProphit4-Aug-10 10:50 
GeneralRe: Add image with URL Pin
cokkiy7-Aug-10 21:02
membercokkiy7-Aug-10 21:02 
GeneralRe: Add image with URL Pin
SunProphit8-Aug-10 4:03
memberSunProphit8-Aug-10 4:03 
GeneralThank You Pin
King Coffee30-Jun-10 11:47
memberKing Coffee30-Jun-10 11:47 
GeneralGreat job , Thank you For Sharing Pin
MDHN30-Jun-10 9:23
memberMDHN30-Jun-10 9:23 
Questioncan we replace images with silverlight chart control? Pin
mallipeddihemanth11-Jun-10 0:11
membermallipeddihemanth11-Jun-10 0:11 
AnswerRe: can we replace images with silverlight chart control? Pin
cokkiy7-Aug-10 21:07
membercokkiy7-Aug-10 21:07 
GeneralSystem Argument Exception: Value does not fall within expected range at System.Window.Size Pin
zameer2119-Apr-10 5:21
memberzameer2119-Apr-10 5:21 
GeneralRe: System Argument Exception: Value does not fall within expected range at System.Window.Size Pin
GoaGeK11-May-10 0:02
memberGoaGeK11-May-10 0:02 
GeneralThe working example version link doesn't work Pin
skbergam3-Apr-10 8:09
memberskbergam3-Apr-10 8:09 
GeneralRe: The working example version link doesn't work Pin
cokkiy7-Aug-10 21:03
membercokkiy7-Aug-10 21:03 
GeneralNice one Pin
KunalChowdhury23-Mar-10 16:59
memberKunalChowdhury23-Mar-10 16:59 
QuestionAwesome job Pin
kronos1917-Mar-10 10:20
memberkronos1917-Mar-10 10:20 
GeneralGreat Job in Silverlight. deserve 5 rate'G. Pin
santosh d3-Mar-10 0:59
membersantosh d3-Mar-10 0:59 
QuestionGreat Article Pin
rgturner31-Jan-10 17:40
memberrgturner31-Jan-10 17:40 
GeneralStart in Full Screen Pin
arkalum19-Jan-10 5:37
memberarkalum19-Jan-10 5:37 
GeneralThe page is blank from second time run Pin
madhanprabu8-Nov-09 19:36
membermadhanprabu8-Nov-09 19:36 
GeneralRe: The page is blank from second time run Pin
cokkiy10-Nov-09 0:12
membercokkiy10-Nov-09 0:12 
GeneralReplacing Uri (ImageSource) with Memorystream Pin
FLIron16-Oct-09 4:47
memberFLIron16-Oct-09 4:47 
GeneralRe: Replacing Uri (ImageSource) with Memorystream Pin
cokkiy16-Oct-09 5:48
membercokkiy16-Oct-09 5:48 
GeneralRe: Replacing Uri (ImageSource) with Memorystream Pin
FLIron16-Oct-09 10:15
memberFLIron16-Oct-09 10:15 
GeneralRe: Replacing Uri (ImageSource) with Memorystream Pin
FLIron19-Oct-09 2:04
memberFLIron19-Oct-09 2:04 
Generalcarousel problem value does not fall within the expected range Pin
Priyanka Katare21-Sep-09 20:42
memberPriyanka Katare21-Sep-09 20:42 
GeneralRe: carousel problem value does not fall within the expected range Pin
cokkiy10-Nov-09 0:17
membercokkiy10-Nov-09 0:17 
GeneralHyperlink Images Pin
MMRR18-Sep-09 11:11
memberMMRR18-Sep-09 11:11 
GeneralRe: Hyperlink Images Pin
Xel319-Dec-09 9:59
memberXel319-Dec-09 9:59 
GeneralRe: Hyperlink Images Pin
cokkiy19-Dec-09 18:49
membercokkiy19-Dec-09 18:49 
GeneralExcellent job Pin
wguerram14-Sep-09 4:49
memberwguerram14-Sep-09 4:49 
GeneralMy vote of 1 Pin
VickyC#16-Aug-09 12:47
memberVickyC#16-Aug-09 12:47 
GeneralRe: My vote of 1 Pin
santosh d3-Mar-10 1:02
membersantosh d3-Mar-10 1:02 
GeneralAssembly<b><i>cokkiy.display.carousel</i></b> not available Pin
Member 30053647-Aug-09 21:31
memberMember 30053647-Aug-09 21:31 
GeneralRe: Assemblycokkiy.display.carousel not available Pin
cokkiy7-Aug-09 22:44
membercokkiy7-Aug-09 22:44 
QuestionThanks for your great Carousel. But I put this display:Carousel into one frame page, error happened when navigating back to this page. Pin
paynechen6-Aug-09 17:58
memberpaynechen6-Aug-09 17:58 
AnswerRe: Thanks for your great Carousel. But I put this display:Carousel into one frame page, error happened when navigating back to this page. Pin
Azy221-Feb-10 16:11
memberAzy221-Feb-10 16:11 
GeneralWill u implement this Carousel in WPF as Panel Pin
madhankumar.gi2-Aug-09 20:10
membermadhankumar.gi2-Aug-09 20:10 
Generalabout chinese version Pin
nicholas_pei2-Aug-09 18:00
membernicholas_pei2-Aug-09 18:00 
GeneralI run projecto, but dont show carousel in page Pin
Felipe Oliveira30-Jul-09 4:08
memberFelipe Oliveira30-Jul-09 4:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150819.1 | Last Updated 2 Aug 2009
Article Copyright 2008 by cokkiy
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid