![]() |
Web Development »
Silverlight »
Controls
Intermediate
License: The Microsoft Public License (Ms-PL)
Silverlight Carousel: Creating a Silverlight Control Displays Picture in an Interactive CarouselBy cokkiyThis article describes how to create and use the Silverlight Carousel control. |
C# 2.0, C# 3.0.NET 3.0, .NET 3.5, Silverlight, Architect, Dev, Design
|
|
Advanced Search |
|
|
|
||||||||||||||||
What is Carousel? Carousel is just a Silverlight 2.0 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?"
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:
<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">
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>
Notice how I added a Carousel in my page. The Carousel has 8 images as its children. Let's look at the screen capture.

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:
Let's see the following figure demo the concept.

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.
Notes:
My English is not very good so I hope you can understand what I've said. The sample code does not include the sample pictures, you should add some images to the Images folder of the sample project before running the code. And make sure you have changed the sample page to fix the image name you just added.
General
News
Question
Answer
Joke
Rant
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 26 Nov 2008 Editor: Sean Ewington |
Copyright 2008 by cokkiy Everything else Copyright © CodeProject, 1999-2009 Web13 | Advertise on the Code Project |