Using RadBook for Silverlight
To display the images in book manner, you must use the RadBook 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 BookSilverlight, 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 RadBook control
Next, you must add an instance of the RadBook 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:RadBook x:Name="book">
</telerik:RadBook>
</Grid>
Write down the Name of the RadBook instance, because you will later use it to access the control in the codebehind file.
For more information, see RadBook for Silverlight.
Defining an ItemTemplate
The ItemTemplate defines the layout structure of each item in the RadBook control. The layout for the item must contain an element for the image. Following is the RadBook with defined ItemTemplate property:
<telerik:RadBook x:Name="book">
<telerik:RadBook.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding}"
Stretch="Uniform" />
</Grid>
</DataTemplate>
</telerik:RadBook.ItemTemplate>
</telerik:RadBook>
You bind the Source property of the Image control to the expected data item. In this case the data item is a string that represents the URL to the image.
For more information about data binding in Silverlight, see Data Binding.
Adding items to the RadBook control
In this tutorial you will use javascript to pass the URLs of the images to the Silverlight application. The javascript requires from you to expose a method from the Silverlight, which will take the data and process it. In the Silverlight application you must create a method, which adds a new item to the RadBook control. It accepts the URL as an argument. Following is the code for it.
public void SetItem(string url)
{
this.book.Items.Add(url);
}
Applying settings to the RadBook control
In this tutorial you will use javascript to pass settings to the Silverlight application. The javascript requires from you to expose a method, which will apply them. The method modifies the following properties of the RadBook control.
- HardPages
- FirstPagePosition
- PageFlipMode
- RightPageIndex
To create the method, perform the following:
-
Add a reference to the Microsoft.CSharp assembly in the BookSilverlight project.
The assembly is located on the .NET tab of the Add Reference dialog.
-
Add the following lines of code to the MainPage class.
public void SetBookProperties(dynamic props)
{
try
{
this.book.HardPages = Enum.Parse(typeof(Telerik.Windows.Controls.HardPages), props.hardPages, true);
this.book.FirstPagePosition = Enum.Parse(typeof(Telerik.Windows.Controls.PagePosition), props.firstPagePosition, true);
this.book.PageFlipMode = Enum.Parse(typeof(Telerik.Windows.Controls.PageFlipMode), props.pageFlipMode, true);
this.book.RightPageIndex = Convert.ToInt32(props.rightPageIndex.ToString());
}
catch (Exception ex)
{
throw ex;
}
}