This article shows how data binding can be used with the CarouselControl to create great UI.
Download: Source
Note: You will need to have Silverlight developer tools installed on your machine.
Visit Silverlight Official WebSite to learn more.
SvFx Carousel control supports data binding to simplify data display tasks. You can easily specify how data will be presented by defining custom item template. Data binding inside the carousel control can be used to present services or goods, list of employees or any other list of data.
ItemsControl provides flexible ways to work with data binding in Silverlight. Data binging is a connection between logic and UI. It means that you may build logic model in your application, populate it with custom data, then specify UI independently and finally connect data to the UI.
Let's consider the following scenario: We need to display information about employees of a company. To solve this task we'll use Cellbi SvFx Carousel control.
The following image shows how data will be presented:
Or the same data shown using vertical carousel layout:
I want to note that Cellbi SvFx Carousel control can specify not only UI. You will get total control of each item behaviour. Once defined, you can completelly change carousel control view without making any changes inside C# or VB code.
Lets take a look on how this can be done in more detail.
Logical Model.
As mentioned before we'll define our logical model as a list of employees. Each employee is characterised with a set of properties: FirstName, LastName, Department, HireDate. So the Employee class code will be the following:
public class Employee
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Department { get; set; }
public string BirthDate { get; set; }
public string HireDate { get; set; }
public string Photo { get; set; }
}
Using Employee class defined above we'll create sample data for this post.
(Please take a look at the Data.cs file inside the source code)
Our data can be assigned to the UserControl.DataContext property.
Carousel control should be declared inside the same UserControl.
The following code shows how DataContext property is assigned:
(Note that GetData is a static method, which returns IEnumerable)
DataContext = Data.GetData();
Now let's create some UI to present our data.
UI Definition using Carousel Control
First of all let's add declaration of the Carousel control
to the xaml file:
<SvUx:CarouselControl
x:Name="uxCarousel"
Width="800"
Height="500"
AlignCenter="True"
ZDepth="100"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" >
<SvUx:CarouselControl.LocationSetup >
<SvFx:EllipseLocationSetup
Depth="40"
CanUseOpacity="False"
RadiusX="230"
RadiusY="110" />
</SvUx:CarouselControl.LocationSetup>
<SvUx:CarouselControl.Setup >
<SvFx:CycleTransitionSetup
SpeedRatio="2" />
</SvUx:CarouselControl.Setup>
</SvUx:CarouselControl>
Note that the code above will show empty carousel.
Let's correct this.
Binding Carousel Control to Data
The following code shows how we can bind our data (assigned to the DataContext property):
Note that there is only one line of code added: ItemsSource="{Binding}".
Now carousel control will be filled with data (from DataContext property).
Let's specify data template for each carousel item.
Data Template
The best way to let Carousel know how to display each item is to use ItemTemplate property.
Item template will be used as visual template for each item of the carousel control.
CarouselItemTemplate is name of ItemTemplate which is placed inside application resources.
Data template specifies how UI will look like.
You can use Expression Blend for visual design.
The following code shows simple example:
<DataTemplate
x:Key="CarouselItemTemplate" >
<TextBlock
Text="{Binding FirstName}" />
</DataTemplate>
Note that we use binding expression here as well.
In this case we access each item's property and obtain it's data.
The following code shows more complex example of data template:
<DataTemplate
x:Key="CarouselItemTemplate" >
<Grid >
<Grid.ColumnDefinitions >
<ColumnDefinition
Width="Auto" />
<ColumnDefinition
Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle
Stroke="White"
Grid.ColumnSpan="2"
RadiusX="5"
RadiusY="5"
StrokeThickness="3" >
<Rectangle.Fill >
<LinearGradientBrush
EndPoint="0.961,0.858"
StartPoint="0.055,0.163" >
<GradientStop
Color="#FFA4C7F0" />
<GradientStop
Color="#FF4789D6"
Offset="1" />
<GradientStop
Color="#FF69A8F2"
Offset="0.384" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid
Grid.Column="0"
Width="70"
Height="140"
Margin="10" >
<Image
VerticalAlignment="Top"
Source="{Binding Photo}"
Height="60" />
</Grid>
<StackPanel
Grid.Column="1"
Orientation="Vertical"
Margin="0,10,10,0" >
<StackPanel
Orientation="Horizontal"
HorizontalAlignment="Left" >
<TextBlock
Text="First Name:"
Style="{StaticResource CaptionStyle}"
mce_Style="/Edit/{StaticResource CaptionStyle}" />
<TextBlock
Text="{Binding FirstName}"
Style="{StaticResource TextStyle}"
mce_Style="/Edit/{StaticResource TextStyle}" />
</StackPanel>
<StackPanel
Orientation="Horizontal"
HorizontalAlignment="Left" >
<TextBlock
Text="Last Name:"
Style="{StaticResource CaptionStyle}"
mce_Style="/Edit/{StaticResource CaptionStyle}" />
<TextBlock
Text="{Binding LastName}"
Style="{StaticResource TextStyle}"
mce_Style="/Edit/{StaticResource TextStyle}" />
</StackPanel>
<StackPanel
Orientation="Horizontal"
HorizontalAlignment="Left" >
<TextBlock
Text="Department:"
Style="{StaticResource CaptionStyle}"
mce_Style="/Edit/{StaticResource CaptionStyle}" />
<TextBlock
Text="{Binding Department}"
Style="{StaticResource TextStyle}"
mce_Style="/Edit/{StaticResource TextStyle}" />
</StackPanel>
<StackPanel
Orientation="Horizontal"
HorizontalAlignment="Left" >
<TextBlock
Text="Hire Date:"
Style="{StaticResource CaptionStyle}"
mce_Style="/Edit/{StaticResource CaptionStyle}" />
<TextBlock
Text="{Binding HireDate}"
Style="{StaticResource TextStyle}"
mce_Style="/Edit/{StaticResource TextStyle}" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
Note that above code defines style which is applied to each item inside the CarouselControl.
I hope this article will be helpful to you. Data binding is powerful mechanism to speed up your developement. This article shows how CarouselControl can be used with data binding to create great UI in minutes.