We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set the space/gap between selected and unselected items

Platform: Xamarin.Forms |
Control: SfCarousel


The Space between the selected and unselected items has been determined by “SelectedItemOffset” property.


The below code illustrates how to provide the offset value for carousel items.

Code snippet:

public partial class KBSolutionPage : ContentPage
public KBSolutionPage()
    //Initialize the carousel control
    SfCarousel sfCarousel = new SfCarousel();
    if (Device.OS == TargetPlatform.Android)
        sfCarousel.ItemWidth = 170;
        sfCarousel.ItemHeight = 250;
    if (Device.OS == TargetPlatform.iOS)
        sfCarousel.ItemWidth = 150;
        sfCarousel.ItemHeight = 300;
    // SelectedItemOffset: to determine the space between the selected and unselected
    sfCarousel.SelectedItemOffset = 40;
    var carouselModel = new List<CarouselModel> {
            new CarouselModel ("image1.png"),
            new CarouselModel ("image2.png"),
            new CarouselModel ("image3.png"),
            new CarouselModel ("image4.png"),
            new CarouselModel ("image5.png")
    var carouselModel DataTemplate = new DataTemplate(() =>
        var grid = new Grid();
        var nameLabel = new Image();
        nameLabel.SetBinding(Image.SourceProperty, "Image");
        return grid;
    //Set the collection of required view into carousel's datasource
    sfCarousel.ItemTemplate = carouselModel DataTemplate;
    sfCarousel.DataSource = carouselModel;
    this.Content = sfCarousel;
public class CarouselModel
public CarouselModel(string imagestr)
    Image = imagestr;
private string _image;
public string Image
    get { return _image; }
    set { _image = value; }

SelectedItemOffset - 40


SelectedItemOffset in SfCarousel


SelectedItemOffset - 100


SelectedItemOffset 100 in SfCarousel

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment
William Watterson
Jul 25, 2018

What unit are the offsets in?  My caoursel looks different on different android devices - some devices the unselected items are very close together?

Eswaran Thirugnanasambandam [Syncfusion]
Aug 01, 2018

Hi William,

Query 1: What unit are the offsets in?  

There is no specific unit for offset value. 

Query 2: My carousel looks different on different android devices - some devices the unselected items are very close together?

We have created a custom sample with carousel control and tested the solution in the below android devices such as Nexus, Samsung s8, Moto G5 and in Android emulator. In the all the devices, the carousel control looks same and we are unable to reproduce the reported issue. We have attached our custom sample, please find the sample from the below link.

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/CarouselKBDemo1775402375 

If issue persist at your side, please provide the following details so that we can give appropriate solution on this

  • On which android devices you have tested the carousel control?
  • Which version of the carousel control are you using?




Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile