Infragistics xamDataCarousel - Part 1

The Infragistics xamDataCarousel control uses the Carousel View and arranges data items along a specified path.  Carousel View emphasizes the proximity, sequence, and movement of your data. Classic artistic principles such as perspective, and creating the sense of depth, are used in Carousel Views to create the appearance of a pseudo-3D environment on flat video displays.

I’ll show how to use the xamDataCarousel control from Infragistics to create and present data. Before starting you will require the NetAdvantage pack from Infragistics to be downloaded. You can download the trial version from the infragistics website.

I will be using the employee data from the class given below to create the sample application.

public class Employee : INotifyPropertyChanged

{

    public Employee()

    {

        ___Name = string.Empty;

        ___Department = string.Empty;

        ___Salary = 0;

        ___Email = string.Empty;

    }

    public Employee(string name, string dept, decimal salary, string email)

    {

        ___Name = name;

        ___Department = dept;

        ___Salary = salary;

        ___Email = email;

    }

    private decimal ___Salary;

    private string ___Name;

    private string ___Department;

    private string ___Email;

    public string Name

    {

        get { return ___Name; }

        set

        {

            ___Name = value;

            RaisePropertyChanged("Name");

        }

    }

    public string Department

    {

        get { return ___Department; }

        set

        {

            ___Department = value;

            RaisePropertyChanged("Department");

        }

    }

    public decimal Salary

    {

        get { return ___Salary; }

        set

        {

            if (___Salary != value)

            {

                ___Salary = value;

                RaisePropertyChanged("Salary");

                Bonus = ___Salary * 45 / 100;

            }

        }

    }

    public string Email

    {

        get { return ___Email; }

        set

        {

            ___Email = value;

            RaisePropertyChanged("Email");

        }

    }

    public decimal Bonus { get; set; }

    public string ImagePath { get; set; }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string propertyName)

    {

        if (PropertyChanged != null)

            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

    }

    #endregion

}

In my ViewModel I have the references to the Employee collection as

public class ViewModel

{

    public ObservableCollection<Employee> EmployeeCollection { get; set; }   

    public ViewModel()       

    {

        EmployeeCollection = EmployeeFactory.GetCollection();

    }

}

The XAML code contains the fieldlayouts and style representation for the xamDataCaurosel control

<Window.Resources>

    <Style TargetType="{x:Type igdp:DataRecordCellArea}">

        <Setter Property="BackgroundHover">

            <Setter.Value>

                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">

                    <GradientStop Color="#FF2225FF" Offset="0"/>

                    <GradientStop Color="#FFB9D8FF" Offset="1"/>

                LinearGradientBrush>

            Setter.Value>

        Setter>

        <Setter Property="BorderHoverBrush" Value="#FF000000"/>

    Style>

    <Style x:Key="CellImageStyle" TargetType="{x:Type igdp:CellValuePresenter}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type igdp:CellValuePresenter}">

                    <Image HorizontalAlignment="Left" VerticalAlignment="Bottom" Source="{Binding DataItem.ImagePath}" Height="50" Width="50" />

                ControlTemplate>

            Setter.Value>

        Setter>

    Style>

Window.Resources>

<igdp:XamDataCarousel Name="sampleDataCarousel"

                      DataSource="{Binding EmployeeCollection}"

                      Grid.Column="1" Grid.Row="1">

    <igdp:XamDataCarousel.ViewSettings>

        <igWindows:CarouselViewSettings IsListContinuous="True" ItemsPerPage="5" 

                                        OpacityEffectStopDirection="UseItemPath" UseOpacity="True"

                                        UseScaling="True" ScalingEffectStopDirection="UseItemPath">

            <igWindows:CarouselViewSettings.OpacityEffectStops>

                <igWindows:OpacityEffectStopCollection>

                    <igWindows:OpacityEffectStop Offset="0" Value="0" />

                    <igWindows:OpacityEffectStop Offset=".5" Value="1" />

                    <igWindows:OpacityEffectStop Offset="1" Value="0" />

                igWindows:OpacityEffectStopCollection>

            igWindows:CarouselViewSettings.OpacityEffectStops>

            <igWindows:CarouselViewSettings.ScalingEffectStops>

                <igWindows:ScalingEffectStopCollection>

                    <igWindows:ScalingEffectStop Offset="0" Value=".8" />

                    <igWindows:ScalingEffectStop Offset=".5" Value="1" />

                    <igWindows:ScalingEffectStop Offset="1" Value=".8" />

                igWindows:ScalingEffectStopCollection>

            igWindows:CarouselViewSettings.ScalingEffectStops>

        igWindows:CarouselViewSettings>

    igdp:XamDataCarousel.ViewSettings>

    <igdp:XamDataCarousel.FieldLayoutSettings>

        

        <igdp:FieldLayoutSettings AutoArrangeMaxRows="3" AutoGenerateFields="False" />

    igdp:XamDataCarousel.FieldLayoutSettings>

    <igdp:XamDataCarousel.FieldLayouts>

        <igdp:FieldLayout>

            <igdp:FieldLayout.Fields>

                <igdp:Field Name="Name" Label="Name" />

                <igdp:Field Name="ImagePath">

                    <igdp:Field.Settings>

                        <igdp:FieldSettings CellValuePresenterStyle="{StaticResource CellImageStyle}" />

                    igdp:Field.Settings>

                igdp:Field>

                <igdp:Field Name="Department" Label="Department" />

                <igdp:Field Name="Salary" Label="Salary" />

                <igdp:Field Name="Bonus" Label="Bonous" />

                <igdp:Field Name="Email" Label="Email Address" />

            igdp:FieldLayout.Fields>

        igdp:FieldLayout>

    igdp:XamDataCarousel.FieldLayouts>

igdp:XamDataCarousel>

The datacontext is set in the code behind file as

 this.DataContext = new ViewModel();

In the next part of the series I’ll show a sample how to display the details of the active record from the list.