Using RadCoverFlow for Silverlight
To display the images in a scrolling manner, you must use the RadCoverFlow control for Silverlight. It is part of the RadControls for Silverlight, which are shipped together with Sitefinity SDK. To use it in your Silverlight project you must add a reference to the following assemblies:
- Telerik.Windows.Controls
- Telerik.Windows.Controls.Navigation
To add the references, perform the following:
- From the context menu of project CoverFlowSilverlight, click Add Reference...
-
In the dialog, click the Browse tab.
The two assemblies are located in folder SDK\Content\Common\Dependencies inside Sitefinity installation folder.
- Select them and click OK.
Instantiating a RadCoverFlow control
Next, you must add an instance of the RadCoverFlow control in the MainPage.xaml file. To add an instance, perform the following:
-
Declare the following namespace in the UserControl:
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
-
Place the following code in the Grid named LayoutRoot.
<Grid x:Name="LayoutRoot"
Background="White">
<telerik:RadCoverFlow x:Name="coverFlow"
IsReflectionEnabled="True">
</telerik:RadCoverFlow>
</Grid>
The IsReflectionEnabled property specifies whether the images have reflection under them. Set it to True. Write down the Name of the RadCoverFlow instance, because you will later use it to access the control in the codebehind file.
For more information, see RadCoverFlow for Silverlight.
Defining an ItemTemplate
The ItemTemplate defines the layout structure of each item in the RadCoverFlow control. The layout for the item must contain elements for the image and its title. Following is the RadCoverFlow with defined ItemTemplate property:
<telerik:RadCoverFlow x:Name="coverFlow"
IsReflectionEnabled="True">
<telerik:RadCoverFlow.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Title}" />
<Image Width="200"
Height="150"
Source="{Binding URL}"
Stretch="Uniform" />
</StackPanel>
</DataTemplate>
</telerik:RadCoverFlow.ItemTemplate>
</telerik:RadCoverFlow>
You bind the Source property of the Image control and the Text property of the TextBlock control to the expected properties of the data item.
For more information about data binding in Silverlight, see Data Binding.
Defining the underlying Business Object
To display the items in the RadCoverFlow, you must provide a business object, which wraps the required information. The business object must expose properties for the URL and the title of the image. Place the following code in a new .cs file or in the MainPage.xaml.csafter the partial class definition:
public class SitefinityImage
{
public string URL { get; set; }
public string Title { get; set; }
public SitefinityImage(string title, string url)
{
this.Title = title;
this.URL = url;
}
}
Adding items to the RadCoverFlow control
In this tutorial you will use javascript to pass the images data to the Silverlight application. The javascript requires from you to expose a method from the Silverlight, which will take the data, which is passed, and process it. In the Silverlight application you must create a method, which adds a new item to the RadCoverFlow control. It accepts two arguments - title and URL. Following is the code for it.
public void SetItem(string title, string url)
{
this.coverFlow.Items.Add(new SitefinityImage(title, url));
}