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 Unselected items

Platform: Xamarin.Forms |
Control: SfCarousel


 The space between the Unselected items in SfCarousel control can be customized using the “Offset” property. The default value of the Offset API is 50.

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

Code snippet:

public partial class KBSolutionPage  : ContentPage
    public KBSolutionPage()
        // Create an instance of carousel control
        SfCarousel sfCarousel = new SfCarousel();
        // To get the view of carousel , need to assign the ItemHeight and ItemWidth 
        if (Device.OS == TargetPlatform.Android)
            sfCarousel.ItemWidth = 170;
            sfCarousel.ItemHeight = 250;
        if (Device.OS == TargetPlatform.iOS)
            sfCarousel.ItemWidth = 150;
            sfCarousel.ItemHeight = 300;
        //Offset property is used to give gap between the unselected items
        sfCarousel.Offset = 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")
        // Template initialization
        var carouselModelDataTemplate = new DataTemplate(() =>
            var grid = new Grid();
            var nameLabel = new Image();
            nameLabel.SetBinding(Image.SourceProperty, "Image");
            return grid;
        //assign the collection of custom view to carousel's collection
        sfCarousel.ItemTemplate = carouselModelDataTemplate;
        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; }


Offset – 40:

SfCarousel Offset – 40



Offset – 100

SfCarousel Offset – 100


2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment

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