)
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. (Last updated on: June 24, 2019).
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 |
Published Date: February 24, 2017 |
Last Revised Date: June 24, 2019

 

 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()
    {
        InitializeComponent();
 
        // 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");
            grid.Children.Add(nameLabel);
            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.
ADD COMMENT
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
Live Chat Icon