4
Oct
0
Silverlight – A new Free Carousel – Working fast, Easy to use with examples
The most seeing post in my blog was “the carousel” in Silverlight. So after spending some time working on it, I created a new carousel. This one is more powerful, it has more properties, no bugs, etc.
It is now free and you can download it at the bottom of the page, but please make a donation if it is useful for you!!
You can put every thing you want in this carousel : images, canvas, paths, rectangles, circles, etc.
But to show you how the carousel works, please have a look at this examples :
Another example, Drag’n drop images directly just under :
In this example, I show that we can put what we want into the carousel.
All Examples Description
The more simple example
In this example, I put some graphics stuff in the canvas (in the xaml) and just create and carousel.
namespace BasicExample
{
///
<summary> /// This program shows a very simple example to use the carrousel.
///
/// In the xaml, we put some pictures in the canvas called LayoutRoot
/// and we start the carrousel in the loaded event callback.
///
/// A hand Cursor has been put on each element of the canvas
/// </summary>
public partial class MainPage : UserControl
{
///
<summary> /// The carrousel
/// </summary>
BCarrousel.BCarrouselEngine engine;
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
// We use the carrousel when the component has been loaded
engine = new BCarrousel.BCarrouselEngine(this.LayoutRoot);
}
}
}
Drop images in the carousel example
In this example we create a carousel from the image dropped into the component.
namespace DranDropExample
{
///
<summary> /// This example show how to drop image in the component
/// </summary>
public partial class MainPage : UserControl
{
///
<summary> /// Engine
/// </summary>
BCarrousel.BCarrouselEngine rotor;
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
///
<summary> /// Contruct when loaded
/// </summary>
///
///
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
rotor = new BCarrousel.BCarrouselEngine(this.LayoutRoot);
this.AllowDrop = true;
this.Drop += new DragEventHandler(MainPage_Drop);
}
///
<summary> /// Drop Event
/// </summary>
///
///
void MainPage_Drop(object sender, DragEventArgs e)
{
if (e.Data != null)
{
FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];
foreach (FileInfo file in files)
{
BitmapImage img = new BitmapImage();
try
{
img.SetSource(file.OpenRead());
Image image = new Image();
image.SetValue(Image.SourceProperty, img);
image.Cursor = Cursors.Hand;
image.ImageFailed += new EventHandler(image_ImageFailed);
rotor.AddElement(image);
}
catch (Exception)
{
// nothing
}
}
}
}
///
<summary> /// Image Failed then remove
/// </summary>
///
///
void image_ImageFailed(object sender, ExceptionRoutedEventArgs e)
{
this.Dispatcher.BeginInvoke(delegate()
{
LayoutRoot.Children.Remove(sender as Image);
});
}
}
}
An example to show the properties
This example uses embedded pictures from foxy-wears.fr. Then I use some sliders and checkboxs to control the carousel properties.
namespace PropertiesExample
{
///
<summary> /// In this example we show the severals properties available
/// in the carousel
/// We use checkbox and slider to change values
/// </summary>
public partial class MainPage : UserControl
{
///
<summary> /// Engine
/// </summary>
BCarrousel.BCarrouselEngine engine;
///
<summary> /// Constructor
/// </summary>
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
///
<summary> /// Init
/// Simply create callback
/// </summary>
///
///
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
engine = new BCarrousel.BCarrouselEngine(Working);
X.Value = engine.RadiusX;
Y.Value = engine.RadiusY;
Perspective.Value = engine.Perspective;
Speed.Value = engine.Speed;
Opacity.IsChecked = engine.WorkWithOpacity;
Center.IsChecked = engine.CenterWhenClick;
AutoCenter.IsChecked = engine.AutoCenter;
Opacity.Checked += new RoutedEventHandler(Opacity_Checked);
Center.Checked += new RoutedEventHandler(Center_Checked);
AutoCenter.Checked += new RoutedEventHandler(AutoCenter_Checked);
Opacity.Unchecked += new RoutedEventHandler(Opacity_Checked);
Center.Unchecked += new RoutedEventHandler(Center_Checked);
AutoCenter.Unchecked += new RoutedEventHandler(AutoCenter_Checked);
X.ValueChanged += new RoutedPropertyChangedEventHandler(X_ValueChanged);
Y.ValueChanged += new RoutedPropertyChangedEventHandler(Y_ValueChanged);
Perspective.ValueChanged += new RoutedPropertyChangedEventHandler(Perspective_ValueChanged);
Speed.ValueChanged += new RoutedPropertyChangedEventHandler(Speed_ValueChanged);
Right.MouseLeftButtonDown += new MouseButtonEventHandler(Right_MouseLeftButtonDown);
Left.MouseLeftButtonDown += new MouseButtonEventHandler(Left_MouseLeftButtonDown);
}
#region callbacks
// In the callback we just change carousel properties
void AutoCenter_Checked(object sender, RoutedEventArgs e)
{
engine.AutoCenter = AutoCenter.IsChecked.Value;
}
void Center_Checked(object sender, RoutedEventArgs e)
{
engine.CenterWhenClick = Center.IsChecked.Value;
}
void Opacity_Checked(object sender, RoutedEventArgs e)
{
engine.WorkWithOpacity = Opacity.IsChecked.Value;
}
void Left_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
engine.Right();
}
void Right_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
engine.Left();
}
void Speed_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
{
engine.Speed = Speed.Value;
}
void Perspective_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
{
engine.Perspective = Perspective.Value;
}
void Y_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
{
engine.RadiusY = Y.Value;
}
void X_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
{
engine.RadiusX = X.Value;
}
#endregion
}
}
A carousel with a javascript interface that load images dynamically
In this example we create a autonomous xap component. Then, the xap can be used directly in the html.
To do that we simply need to pass the parameters, so we pass the images with the properties files=X!Y!Z…
///
<summary> /// Initialisation
/// When can pass the fallowing parameters :
/// - useopacity=[TRUE/FALSE] to use opacity on element
/// - mousewheel=[TRUE/FALSE] to use mouse wheel to change element
/// - speed=[0-9]+ to set speed
/// - radiusy=[0-9]+ to set radius in y
/// - radiusx=[0-9]+ to set radius in x
/// - perspective=[0-9]+ to set perspective
/// - clicked=[a-bA-B]+ to set clicked javascript callback
/// - clickedinfront=[a-bA-B]+ to set clickedinfront javascript callback
/// - files=$FILE!$FILE!$FILE
/// - usehand=[TRUE/FALSE] to use hand cursor on the image
/// - list=$FILE to load a file containing images urls
/// </summary>
///
///
Then the html looks like (line 13 is important!) :
</pre> <form id="form1" style="height: 100%;"> <div id="silverlightControlHost"><object width="100%" height="100%" classid="clsid:dfeaf541-f3e1-4c24-acac-99c30715084a"><param name="source" value="ClientBin/JSExample.xap" /><param name="onError" value="onSilverlightError" /><param name="background" value="#00FFFFFF" /><param name="windowless" value="true" /><param name="pluginbackground" value="Transparent" /><param name="minRuntimeVersion" value="3.0.40818.0" /><param name="autoUpgrade" value="true" /><param name="enableGPUAcceleration" value="true" /><param name="InitParams" value="mousewheel=TRUE,speed=3.7,perspective=0.1,usehand=TRUE,files=http://www.google.com/intl/en_ALL/images/srpr/logo1w.png!http://www.google.com/intl/en_ALL/images/srpr/logo1w.png!http://foxy-wears.fr/mode/img/logo.jpg" /><param name="src" value="data:application/x-silverlight-2," /><embed width="100%" height="100%" type="application/x-silverlight-2" src="data:application/x-silverlight-2," source="ClientBin/JSExample.xap" onError="onSilverlightError" background="#00FFFFFF" windowless="true" pluginbackground="Transparent" minRuntimeVersion="3.0.40818.0" autoUpgrade="true" enableGPUAcceleration="true" InitParams="mousewheel=TRUE,speed=3.7,perspective=0.1,usehand=TRUE,files=http://www.google.com/intl/en_ALL/images/srpr/logo1w.png!http://www.google.com/intl/en_ALL/images/srpr/logo1w.png!http://foxy-wears.fr/mode/img/logo.jpg" /><a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Télécharger Microsoft Silverlight" style="border-style:none" /> </a> </object><iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px; border: 0px;" width="320" height="240"></iframe></div> </form> <pre>
Also the component can be controlled by javascript, so you have a autonomous javascript carousel!
#region JSInterface
///
<summary> /// Accessible from javascript
/// </summary>
[ScriptableMember]
void Js_Clear()
{
LayoutRoot.Children.Clear();
rotor.UpdateRotor();
}
///
<summary> /// Accessible from javascript
/// </summary>
[ScriptableMember]
void Js_Select(int index)
{
rotor.Objectif = index;
}
///
<summary> /// Accessible from javascript
/// </summary>
[ScriptableMember]
void Js_Remove(int index)
{
LayoutRoot.Children.RemoveAt(index);
rotor.UpdateRotor();
}
///
<summary> /// Accessible from javascript
/// </summary>
[ScriptableMember]
void Js_Left()
{
rotor.Left();
}
///
<summary> /// Accessible from javascript
/// </summary>
[ScriptableMember]
void Js_Right()
{
rotor.Right();
}
///
<summary> /// Accessible from javascript
/// </summary>
[ScriptableMember]
void Js_Files(string files)
{
if (files != null)
{
LoadFiles(files.Split('!'));
}
}
///
<summary> /// Accessible from javascript
/// </summary>
[ScriptableMember]
void Js_RadiusX(double radius)
{
rotor.RadiusX = radius;
}
///
<summary> /// Accessible from javascript
/// </summary>
[ScriptableMember]
void Js_RadiusY(double radius)
{
rotor.RadiusY = radius;
}
///
<summary> /// Accessible from javascript
/// </summary>
[ScriptableMember]
void Js_Speed(double speed)
{
rotor.Speed = speed;
}
///
<summary> /// Accessible from javascript
/// </summary>
[ScriptableMember]
void Js_Perspective(double perspective)
{
rotor.Perspective = perspective;
}
#endregion
Recommendation
Enable Gpu
To make the carousel working well, it is recommended to enable gpu.
To do this, add this parameter in the html :
</pre> <pre>
Reference : http://msdn.microsoft.com/en-us/library/dd833062%28VS.95%29.aspx
Check the framerate
Because the speed of the carousel is in radian per second you can change your frame rate without changing the speed of the carousel. Changing the fps is important for the performance and for fluidity of the carousel.
So, you need to test the best frame for your application.
To do this you need to use a html plug-in parameter or a C# function.
// in code
App.Current.Host.Settings.MaxFrameRate = 60;
Reference : http://msdn.microsoft.com/en-us/library/cc838147%28VS.95%29.aspx
License
The plugin is free. It comes without any warranty, you use it as your own risks!
If may not work, contain bug, burn you computer, eat your breakfast, ….
Also, you have to put my name and the address of the blog as credit information.
Because the source right belong to me.
Thanks.
Download
By downloading you agree the license.
BCarrousel – Free Silverlight Carousel and its examples.
Enjoyed reading this post?
Subscribe to the RSS feed and have all new posts delivered straight to you.
Subscribe to the RSS feed and have all new posts delivered straight to you.
