December

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)

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.