Jaime Rodriguez has developed a Carousel Control for Silverlight Version 2 Beta 1. The source and the control sample is available at Jaime’s Blog:
http://blogs.msdn.com/jaimer/archive/2008/03/17/a-carousel-control-in-silverlight-2.aspx
I upgraded it for Silverlight 2 Beta 2.
Download Carousel control for Silverlight 2 Beta 2 and a demonstration application
Thank you Jaime Rodriguez.
1. Open the source code and auto upgrade the project.
2. Fix the first errors.
Beta 1
DependencyProperty.Register("Speed", typeof(double), typeof(CarouselPanel), new PropertyChangedCallback(OnSpeedChanged) );
DependencyProperty.Register("ScalePerspective", typeof(double), typeof(CarouselPanel), new PropertyChangedCallback(OnScalePerspectiveChanged));
Beta 2
DependencyProperty.Register("Speed", typeof(double), typeof(CarouselPanel), new PropertyMetadata( new PropertyChangedCallback(OnSpeedChanged)) );
DependencyProperty.Register("ScalePerspective", typeof(double), typeof(CarouselPanel), new PropertyMetadata ( new PropertyChangedCallback(OnScalePerspectiveChanged)));
3. RenderTransform & ScaleTransform in DoArrange()
Beta 1
ScaleTransform sc = item.RenderTransform as ScaleTransform; // lets figure how much to scale the item.. The assumption is that Y is depth ... and the greater Y, the closer to the user.. double scaleMinusRounding = p.Y / (center.Y + radiusY); // we offset the scale else when the mouse is further it would be too small... sc.ScaleX = sc.ScaleY = Math.Min ( scaleMinusRounding + scale , 1.0 ) ;
Beta 2
ScaleTransform sc = new ScaleTransform(); double scaleMinusRounding = p.Y / (center.Y + radiusY); // we offset the scale else when the mouse is further it would be too small... sc.ScaleX = Math.Min(scaleMinusRounding + scale, 1.0); sc.ScaleY = Math.Min(scaleMinusRounding + scale, 1.0); item.RenderTransform = sc;
Thank you Jaime Rodriguez.
Download Carousel control for Silverlight 2 Beta 2 and a demonstration application
Thank you. Downloading now..
Hi,
Nice work.
I noticed one thing though that if i cange the image source to some other image then that image doent appear.
Any suggestion why this is happening ?
Thanks
I switched the MouseEnter and MouseLeave events so the carousel will move when the page loads and will stop when the mouse enters. Cool!
How do I select an image and know which image was selected so i can redirect to another page or make image grow?
Hi Anoop,
Change Build Action of image to Content.
Thanks
Hi TFisher,
Each image in Carousel Panel control is an image control.
Simple, you can use the mouse events for each image control.
Thanks.
hey I noticed that u havent changed the z index when the the images revolve.
Which is why when the crousel is mouving clockwise the image on the left hand side is in the reverse order.
That is the one that should be behing is actually on top 🙂
I think we need to change the z index based on angle.
But cant figure out all the way please help.
Thanks
corrected it myself just change the z-index of item when the x,y cordinates come to that particular position 120,100 for me.
Where can I download this upgraded version of carousel?
Thanks for the update.. I actually figured out the fixes then found this site, 🙂 Good job I’m going to use it on my site http://www.marxbrain.com