)
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 selected and unselected items

Platform: Xamarin.Forms |
Control: SfCarousel |
Published Date: March 2, 2017 |
Last Revised Date: June 24, 2019

 

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

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
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?

Reply
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?

Regards,

Eswaran

Reply

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