Loading...

Sunday, January 29, 2012

Silverlight Video and Image Carousal With SharePoint Client OM

Carousal/Video Slider using Silverlight Client Object Model.
This sample is for learning SharePoint client object model using Silverlight
This Includes
1)Fetch and Display SharePoint Data using Client OM
i)create class and identify the display properties
ii)set the properties with Client OM
iii)Display Video/Image/List Data on Tick Event of Timer and on Button Click
private void Tick(object o, EventArgs sender)
{
CurrentVideo(currentImageIndex);
Application resource = Application.Current;
foreach (UIElement c in videoButtons.Children)
{
Button videoButton = c as Button;

if(Convert.ToString(videoButton.Content)
==Convert.ToString(currentImageIndex+1))
{
videoButton.Style = (Style)resource.Resources["RoundedBtnActive"];
}
else
{
videoButton.Style = (Style)resource.Resources["RoundedBtn"];
}
}

if (currentImageIndex < bannerImages.Count - 1) { //Moves to Next Image/Video Data of List currentImageIndex++; } //Set the current image index to 0 if the current image is the last one in the collection else { currentImageIndex = 0; } for more details view BannerGallery.xaml.cs

2)Applying Sliding animation to Picture/Video summary with Silverlight
public Storyboard SlideImageEffect(UIElement controlToAnimate, double positionToMove)
{
DoubleAnimation da = new DoubleAnimation();
if(timer!=null)
da.Duration = new Duration(timer.Interval); //TimeSpan.FromSeconds(1)
else
da.Duration = new Duration(TimeSpan.FromSeconds(1));

Storyboard sb = new Storyboard();
if (timer!=null)
sb.Duration = new Duration(timer.Interval);
else
sb.Duration = new Duration(TimeSpan.FromSeconds(1));
sb.Children.Add(da);
da.From = 560;
da.To = 0;

Storyboard.SetTarget(da, controlToAnimate);
Storyboard.SetTargetProperty(da, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));
//da.To = positionToMove;
return sb;
}

3)Applying Style and Positioning in Silverlight
i)write the style element in App.xaml(more details view app.xaml of source code)
ii)Style can be created in Expression Blend and added to app.xaml
and it can be accessed as below
Application resource = Application.Current;
videoButton.Style = (Style)resource.Resources["RoundedBtn"];
iv)for positioning different elements use grid control

I have uploaded the modified source code @CodePlex
This source code is extended from Silverlight SDK example
SharePointAndSilverlightTrainingKit\CreatingSelfServiceSilverlightApplicationsLab

No comments: