Articles in this section
Category / Section

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

1 min read

 

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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied