Getting Started

3 Oct 20172 minutes to read

This section explains you the steps to configure a SfCarousel control in a real-time scenario and also provides a walk-through on some of the customization features available in SfCarousel control.

Referencing Essential Studio components in your solution

After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders,

{Syncfusion Installed location}\Essential Studio\15.x.x.x\lib

Add the following assembly references to the Android project,

android\Syncfusion.SfCarousel.Android.dll

and

Xamarin.Android.Support.v17.Leanback library (from NuGet Packages)

Add SfCarousel

The SfCarousel control is configured entirely in C# code. The following steps explain on how to create a SfCarousel and configure its elements,

  • Adding namespace for the added assemblies.
  • C#
    • using Com.Syncfusion.Carousel;
    • Now add the SfCarousel control with a required optimal name by using the included namespace.
  • C#
    • SfCarousel carousel=new SfCarousel(this);
SetContentView(carousel);

    Set Gap between Items

    SfCarousel provides option to set the distance between the items in the panel. This can be done by using the Offset property in SfCarousel control.

  • C#
    • SfCarousel carousel = new SfCarousel(this);
carousel.Offset=20;

    Tilt Non Selected Items

    Items in the SfCarousel control can be rotated in user defined angle. RotationAngle property is used to decide the angle in which items should be rotated.

  • C#
    • SfCarousel carousel = new SfCarousel(this);
carousel.RotationAngle = 45;

    Setting DataSource

    SfCarousel items can be populated with a collection of image data. For example, a user may want to create a SfCarousel control which will display a list of images.

  • C#
    • List<SfCarouselItem> tempCollection = new List<SfCarouselItem>();

for (int i = 1; i <= 6; i++)
{
	SfCarouselItem sfCarouselItem = new SfCarouselItem(this);
	sfCarouselItem.ImageName = "image" + i.ToString();
	tempCollection.Add(sfCarouselItem);
}

carousel.SelectedIndex = 2;
carousel.DataSource = tempCollection;

    Setting the height and width of carousel’s Item

    ItemHeight and ItemWidth properties are used to change the height and width of carouselItem in carousel panel.

  • C#
    • SfCarousel sfCarousel=new SfCarousel(this);
sfCarousel.ItemWidth=150;
sfCarousel.ItemHeight=170;

    SelectedIndex

    We can bring particular item to the center of the screen using SelectedIndex property in SfCarousel control.

    NOTE

    The SelectedIndex property will be 0 by default.

  • C#
    • SfCarousel carousel=new SfCarousel(this);
carousel.SelectedIndex=2;

    You can find the complete getting started sample from this Link