|
Introduction and Background
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?"
Key Features
- It's really a Silverlight V2 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:
- 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">
- 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>
Notice how I added a Carousel in my page. The Carousel has 8 images as its children. Let's look at the 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.
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.
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);
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;
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();
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.By = 2*Math.PI;
doubleAnimation.Duration = duration;
doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
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.
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.
| You must Sign In to use this message board. |
|
| | Msgs 1 to 25 of 64 (Total in Forum: 64) (Refresh) | FirstPrevNext |
|
 |
|
|
Hi,
that's a nice carousel !
But, how to stop it with a MouseEnter-event by moving over an Image.
And how to restart the carouasel leaving an Image?
jeronymoe
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
Hi,
Is it possible to use your carousel in a WPF application ?? I tried but I was unable to do that...
Thanks
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Yes you can but you need some modify. Currently WPF dose not support VisualState so you must change it to EventTrigger.
The God created the world.
The programer made the world easy.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Dear Cokkiy,
one more question 
Your Carousel (XAP-file, Testpage.html, Images) now uploaded to a webserver is running in an Explorer7 with Silverlight-pluggin installed: it runns realy well. On the computer is VISTA installed.
But if I use anyone computer in the internet (WinXP is installed) and I install the Silverlight-plugin, there is only to see an empty white page.
I tested this at several computers.
Same at home using a local computer with IIS as webserver, and with WinXP.
WinXP seems to be the problem, or perhaps in your carousel there must be a querry (or something else) to run it on WinXP ?
Thanks !
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
My vs2008 is Chinese Version, so it's auto set the Cullture to cn-ZHS, if the customer computer not support Asia lanaguage, it's can't display the app (I think it's a bug).
To solve this problem, you first unload the CarouselTest project in VS, then right click the project and select edit CarouselTest.csproj. Then find the <supportculture>cn-ZHS</supportculture> and remove it. Then load the project and recompile it.
You can get more info about this error on here[^].
The God created the world.
The programer made the world easy.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
I looked in 'CarouselTest.csproj'
But I can not find the < supportculture >cn-ZHS< /supportculture >
I found something like < supportculture >Hans-ZHS< /supportculture >
But when I compile the source-code I have a Folder=zH-CN and in the folder:
Cokkiy.Display.Carousel.resources.dll
So I think, there is something compiled in chinese language, but I do not find where to change it.
So my site is already white in Explorer7.
But Explorer got the site, and Silverlight2-plugin is installed right.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
You just remove the <supportculture >Hans-ZHS</supportculture > or change it to en-US, it will be work.
The Carousel supports multiple language (cn-ZH and en-US), so it's will create the culture specified subfolder and resource.
The God created the world.
The programer made the world easy.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hi cokkiy,
today I found it.
I only deleted
< supportculture >Hans-ZHS< /supportculture >
Now the courousel is to see.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Dear Cockiy,
how many questions can I ask here to you ??
As you said, display-carousel has two projects, the CarouselTest-project and the Carousel-project. (there is nothing with aspx)
I think, the CarouselTest is only to compile a TestPage.html to see something in the browser. The Carousel-project is the main part with it's classes in c#.
My question:
I need the carousel in an aspx-site, not in a HTML (like TestPage.html).
So I tried to build a
new project => Silverlight-application => web-site is aspx-application.
This way I have (an empty) project-structure with two projects, one is an aspx-website, the other is the silverlight-project.
Now, how and which files to import from 'Carousel' and which files to import from 'CarouselTest' into my new aspx/silverlight-project ?
Perhaps I can run the carousel in an aspx-site ?
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hi, the Carousel is a Silverlight control just like TextBlock or Grid, so you can use it liek as the other controls. Just add a reference to the Carousel project or Cokkiy.Display.Carousel.dll file in your SL application project. Then you use the Carouse as the CarouselTest project's page.xaml file does.
Any website/webpage can host a Silverlight app, it's just a object or embeded tag in your html file, if you like you can also host a SL app in asp/php/jsp files.
Maybe you can get more info at MSDN.
The God created the world.
The programer made the world easy.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Dear Cokkiy,
as I already asked, I will use the carousel in an aspx-Website.
This way, I upload your Display-Controls-project.
Now I have two ways:
First way:
I go in VS in Solution-Explorer to Add New project => add aspx-application-Project.
Now I have in VS the Silverlight-project = 'Carousel',
I have there your 'CarouselTest',
I have a new aspx-project with aspx-Testpage, etc ...
Because do not run it in Testpage.html, I delete your 'CarouselTest'.
In the aspx-project, I try to Add Reference to 'Carousel'.
Here is an ERROR. Reference from Silverlight-project is only to Silverlight-project possible: is this ERROR right ? No way ?
Second way:
I go in VS in Solution-Explorer to Add NewWebsite = add aspx-application-Website.
I have in VS your Silverlight-project = 'Carousel',
I have there your 'CarouselTest',
I have a newWebsite with aspx-Testpage, etc ...
Again I delete 'CarouselTest'.
In the aspx-Website, I Add reference to 'Carousel'.
Now this works, I get this reference without ERRORs.
After compilation the whole project and run it in localhost, I see onle a white site. Explorer7 got site Default.aspx, but what happend? Nothing to see there?
Your statement to:
supportculture;cn-ZHS/supportculture; supportculture;cn-ZHS;/supportculture;
This I could not find in CarouselTest.csproj, I found something to supportculture, but nothing that it is set to Chinese. I think, the reason, that the Site in Explorer7 (Silverlight2 is installed) is empty is not the language. Perhaps it is somthing with WinXP ?
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
First of all, the Carousel just is a Silverlight control, so if you want to use it, you must have a Silverlight application. Your webpage only can host a Silverlight app instead of a Silverlight control ( a control can only used in a SL app).
Second, Silverlight is a Client Side technology, it's not running on server side, so you can not add a SL project or assembly reference to your aspx-Website(it's a server side tech). The silverlight app very like a flash movie. When you compile the SL app, it's creating a .xap file. In your web page you all need is the .xap file (just like a flash .swf file) and resource files like images and embeded it in your web page (aspx file or html file) just like you embeded a flash moive in your web page file.
The God created the world.
The programer made the world easy.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hi, I wanted to try to make a few changes to the carousel you made. I wanted to control the direction of the carousel by mouse position. For example, I wanted the carousel to rotate counter clockwise when the mouse position is on the right side of the carousel and rotate clockwise when the mouse position is on the left side. On another note, would it be possible to use the carousel for more than just images? How would I go about it if I wanted to link to another xaml or asp page when you click on a carousel item instead of enlarging an image? Thanks for any help you can give!
-Mike
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hi, it's very simple, you can add a MouseEnter and MouseMove enent handle to the _carouselCanvas.
In the event handle function, you can check the mouse current in left side or in right side.
If in left side, you set the TurnDirection to Clockwise, in right side you set the TurnDirection to CounterClockwise.
The second question, you can use other SL control or page in the Carousel. But it's impossible to host a web page in the carousel.
You can see here [^] I have modifed the Carousel as a VideoPlayer. Maybe give you some advices for how to modify the Carousel to host other SL control.
The God created the world.
The programer made the world easy.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
I followed your directions and was able to get the clockwise and counterclockwise working correctly. The only issue I have is that when the direction is changed, the positions of the images are reset. I looked in the TurnDirectionChanged function and noticed that you are calling BuildStoryboard. It seems like you must stop the storyboard before changing the direction and that you cannot just pause the storyboard. The sb.stop() is what's causing the images to reset positions. Is there any way around this? It seems a bit choppy if when you change directions the images reset to their initial positions. Thanks for the help!
-Mike
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
In the TurnDirectionChanged function, you can do like the following:
Storyboard sb =null;
if (this.Resources.Contains(CarouselStoryboardKey))
{
// if already in resources, get from resources
sb = this.Resources[CarouselStoryboardKey] as Storyboard;
// Must stop it before we change it
sb.Stop();
// and clear the children
sb.Children.Clear(); // because we rebuild all item
}
else
{
sb = new Storyboard();
// Add to resources dictionary
this.Resources.Add(CarouselStoryboardKey, sb);
}
// turnning a circle
by=_2PI;
// Now, we start build each item's storyboard
for (int i = 0; i < itemsCount; i++)
{
// We only care the carouselitem
CarouselItem item = items[i] as CarouselItem;
if (item != null)
{
// Add item's storyboard to main storyboard
if (direction == TurnDirection.Clockwise)
{
sb.Children.Add(BuildStoryboard(item, by, Duration));
}
else
{
sb.Children.Add(BuildStoryboard(item, -by, Duration));
}
}
}
sb.Start();
The God created the world.
The programer made the world easy.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hi Mike,
I also like to add MouseMove and MouseOver.
You tell, it is very easy.
I looked in carousel.cs . Right?
Where to add a MouseMove in _carouselCanvas ?
In which c#-programm and in which row I must add this?
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hello,
I first wanted to say great job and that your code was very organized. You mentioned that you followed the Yet Another Carousel example. The one thing I liked about that example was that you can add a bunch of images and it will still keep 5 main placeholders for pictures. Is it possible to do something similar in your carousel? I noticed when you add more items to your carousel, it displays all the items and the spacing between each item gets smaller. If I chose to add like 100 images, it would look too smushed together if you displayed all the images. Would it be possible to just have like 6 or 7 main carousel items and then have the images rotate into these main containers? If so, do you have any ideas on how to do this? Thanks for the help!
-Mike
modified on Wednesday, December 10, 2008 2:59 PM
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
You can dynamic add and remove Image to and from the Carousel as my test project does.
The God created the world.
The programer made the world easy.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Dear Cokkiy,
thanks for your first message.
I am new, and need some more help.
I have your Display-carousel procect in my VS-Team Suite.
There I see two (big) projects.
I think, one is the silverlight project, the second another project but not aspx-project.
For example creating an web-application, I know to compile and deploy the files to my local IIS-Webserver. I can browse the result by localhost.
Having two projects shown in my VS-Explorer, like your Display-carousel, I can compile it with 0 Errors and I get a folder /bin/debug/ with the files, but I don't know how to copy it into my IIS-Server.
After compiling, is this in /bin/debug/ the file-structure that will be copied into IIS-server?
I don't know what to do, how to run the carousel by localhost.
Can you help?
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hi, the Carousel project just is the Carousel control project (which is a SL class library) and the CarouselTest project is a Silverlight app used to testing the Carousel control. If you want to deploy it to your website, you just copy the CarouselTest.xap and testpage.html to your website directory. If you put the Images out of your CarouselTest project (not include in your project), you also need copy the Images folder and all images to the same directory. Like the following folder structure.
C:\IISRoot\
----------CarouselTest.xap
----------testpage.html
----------Images\
-----------------00.jpg
-----------------01.jpg
-----------------so on
The God created the world.
The programer made the world easy.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
Sure, the image can from anywhere include database. By the way, you should write English here. Or you can write email directly to me.
The God created the world.
The programer made the world easy.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Is it possible to create a "web page carousel" similar to your photo carousel in silverlight? The small item (the carousel leaf) contains a thunbnails of web page and the panel displays the selected web page . I have no idea how to replace an image with a web page.
|
| Sign In·View Thread·PermaLink | 1.00/5 (1 vote) |
|
|
|
|
|
|
 General  News  Question  Answer  Joke  Rant  Admin
|
