Class SfCarousel

The SfCarousel class represents a control that allows user navigate through a collection of galleried items.

Inheritance

System.Object

SfCarousel

Implements

ICarousel

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Namespace: Syncfusion.Maui.Carousel

Assembly: Syncfusion.Maui.Carousel.dll

Syntax

public class SfCarousel : View, ICarousel, IView, IElement, ITransform

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

Constructors

SfCarousel()

Initializes a new instance of the SfCarousel class.

Declaration

public SfCarousel()

Fields

AllowLoadMoreProperty

Identifies the AllowLoadMore bindable property.

Declaration

public static readonly BindableProperty AllowLoadMoreProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for AllowLoadMore bindable property.

DurationProperty

Identifies the Duration bindable property.

Declaration

public static readonly BindableProperty DurationProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Duration bindable property.

EnableInteractionProperty

Identifies the EnableInteraction bindable property.

Declaration

public static readonly BindableProperty EnableInteractionProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for EnableInteraction bindable property.

EnableVirtualizationProperty

Identifies the EnableVirtualization bindable property.

Declaration

public static readonly BindableProperty EnableVirtualizationProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for EnableVirtualization bindable property.

ItemHeightProperty

Identifies the ItemHeight bindable property.

Declaration

public static readonly BindableProperty ItemHeightProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ItemHeight bindable property.

ItemSpacingProperty

Identifies the ItemSpacing bindable property.

Declaration

public static readonly BindableProperty ItemSpacingProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ItemSpacing bindable property.

ItemsSourceProperty

Identifies the ItemsSource bindable property.

Declaration

public static readonly BindableProperty ItemsSourceProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ItemsSource bindable property.

ItemTemplateProperty

Identifies the ItemTemplate bindable property.

Declaration

public static readonly BindableProperty ItemTemplateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ItemTemplate bindable property.

ItemWidthProperty

Identifies the ItemWidth bindable property.

Declaration

public static readonly BindableProperty ItemWidthProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ItemWidth bindable property.

LoadMoreItemsCountProperty

Identifies the LoadMoreItemsCount bindable property.

Declaration

public static readonly BindableProperty LoadMoreItemsCountProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for LoadMoreItemsCount bindable property.

LoadMoreViewProperty

Identifies the LoadMoreView bindable property.

Declaration

public static readonly BindableProperty LoadMoreViewProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for LoadMoreView bindable property.

OffsetProperty

Identifies the Offset bindable property.

Declaration

public static readonly BindableProperty OffsetProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Offset bindable property.

RotationAngleProperty

Identifies the RotationAngle bindable property.

Declaration

public static readonly BindableProperty RotationAngleProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for RotationAngle bindable property.

ScaleOffsetProperty

Identifies the ScaleOffset bindable property.

Declaration

public static readonly BindableProperty ScaleOffsetProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ScaleOffset bindable property.

SelectedIndexProperty

Identifies the SelectedIndex bindable property.

Declaration

public static readonly BindableProperty SelectedIndexProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectedIndex bindable property.

SelectedItemOffsetProperty

Identifies the SelectedItemOffset bindable property.

Declaration

public static readonly BindableProperty SelectedItemOffsetProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectedItemOffset bindable property.

SwipeMovementModeProperty

Identifies the SwipeMovementMode bindable property.

Declaration

public static readonly BindableProperty SwipeMovementModeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SwipeMovementMode bindable property.

ViewModeProperty

Identifies the ViewMode bindable property.

Declaration

public static readonly BindableProperty ViewModeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ViewMode bindable property.

Properties

AllowLoadMore

Gets or sets a value indicating whether this SfCarousel allow load more.

Declaration

public bool AllowLoadMore { get; set; }

Property Value

Type	Description
System.Boolean	true if allow load more; otherwise, false.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.AllowLoadMore = true;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

Duration

Gets or sets the value of Duration. This property can be used to give delay in selection animation.

Declaration

public int Duration { get; set; }

Property Value

Type	Description
System.Int32	The default value is 600.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.Duration = 300;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

EnableInteraction

Gets or sets a value indicating whether it allows interaction or not.

Declaration

public bool EnableInteraction { get; set; }

Property Value

Type	Description
System.Boolean	true if Enabled interaction; otherwise, false.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.EnableInteraction = false;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

EnableVirtualization

Gets or sets a value indicating whether the virtualization is enabled or not.

Declaration

public bool EnableVirtualization { get; set; }

Property Value

Type	Description
System.Boolean	true if is virtualization; otherwise, false.

Remarks

This property is functional only when the view mode is set to Linear.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.EnableVirtualization = true;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

ItemHeight

Gets or sets the value of the ItemHeight. This property can be used to customize the height of each carousel item.

Declaration

public int ItemHeight { get; set; }

Property Value

Type	Description
System.Int32	The default value is 350 for desktop and 300 for mobile.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.ItemHeight = 150;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

ItemSpacing

Gets or sets the value of the ItemSpacing. This property can be used to apply space between each item.

Declaration

public int ItemSpacing { get; set; }

Property Value

Type	Description
System.Int32	The default value is 12.

Remarks

This property is functional only when the view mode is set to linear.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.ViewMode = VieMode.Linear;
carousel.ItemSpacing = 10;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

ItemsSource

Gets or sets a collection of type carousel items that can be rendered with different view for each item.

Declaration

public IEnumerable<object> ItemsSource { get; set; }

Property Value

Type	Description
System.Collections.Generic.IEnumerable<System.Object>	Default value is null.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

ItemTemplate

Gets or sets an instance of the Template class that defines the visual structure of a Carousel item.

Declaration

public DataTemplate ItemTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	The default value is null.

Examples

The below example shows how to initialize the tab view.

• C#

public partial class MainPage : ContentPage
{
   public MainPage()
   {
       SfCarousel carousel = new SfCarousel();
       carousel.ItemsSource = new ObservableCollection<CarouselModel>()
       {
          new CarouselModel("image1.png"),
          new CarouselModel("image2.png"),
       };
       carousel.ItemTemplate = new DataTemplate(()=>
       {
          Image image = new Image();
          image.SetBinding(Image.SourceProperty,"Image");
          return new ViewCell { View = image };
       });
       this.Content = carousel;
   }
}
public class CarouselModel
{
   public string Image { get; set; }
   public CarouselModel(string image) 
   {
       Image = image;
   }
}

ItemWidth

Gets or sets the value of ItemWidth. This property can be used to customize the width of each carousel item.

Declaration

public int ItemWidth { get; set; }

Property Value

Type	Description
System.Int32	The default value is 250 for desktop and 200 for mobile.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.ItemWidth = 150;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

LoadMoreItemsCount

Gets or sets the value of LoadMoreItemsCount. By using the LoadMoreItemsCount property, numerous items can be separated.

Declaration

public int LoadMoreItemsCount { get; set; }

Property Value

Type	Description
System.Int32	The default value is 3.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.AllowLoadMore = true;
carousel.LoadMoreItemsCount = 2;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

LoadMoreView

Gets or sets the value of the LoadMoreView. By using this property, the custom view can be passed instead of the LoadMore label.

Declaration

public View LoadMoreView { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.View	The default value is null.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.AllowLoadMore = true;
carousel.LoadMoreItemsCount = 2;
carousel.LoadMoreView = new Border()
{
    Content = new Label() { Text = "Load More View", HorizontalTextAlignment = TextAlignment.Center, VerticalTextAlignment = TextAlignment.Center },
    Stroke = Colors.LightGray,
    StrokeThickness = 1,
    StrokeShape = new Microsoft.Maui.Controls.Shapes.RoundRectangle() { CornerRadius = 8 },
};
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

Offset

Gets or sets the value of Offset. This property can be used to give the space between each item in the Default view mode.

Declaration

public float Offset { get; set; }

Property Value

Type	Description
System.Single	The default value is 40f for desktop and 18f for mobile.

Remarks

This property is functional only when the view mode is set to default.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.Offset = 10;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

RotationAngle

Gets or sets the value of RotationAngle. It is an angle that tilts the unselected items.

Declaration

public int RotationAngle { get; set; }

Property Value

Type	Description
System.Int32	The default value is 45.

Remarks

This property is functional only when the view mode is set to default.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.RotationAngle = 30;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

ScaleOffset

Gets or sets the value of Offset. It is a scaling ratio to differentiate unselected items in the Default view mode.

Declaration

public float ScaleOffset { get; set; }

Property Value

Type	Description
System.Single	The default value is 0.8f for desktop and 0.7f for mobile.

Remarks

This property is functional only when the view mode is set to default.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.ScaleOffset = 0.75;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

SelectedIndex

Gets or sets the item to be in a selected state and to be the center item of the control among the user input.

Declaration

public int SelectedIndex { get; set; }

Property Value

Type	Description
System.Int32	The default value is 0.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.SelectedIndex = 2;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

SelectedItemOffset

Gets or sets the value of SelectedItemOffset. It gives space between the selected and unselected items in the Default view mode.

Declaration

public int SelectedItemOffset { get; set; }

Property Value

Type	Description
System.Int32	The default value is 20 for Windows and 40 for other platforms.

Remarks

This property is functional only when the view mode is set to default.

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.SelectedItemOffset = 30;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

SwipeMovementMode

Gets or sets a value indicating whether thw scroll mode in single or multiple.

Declaration

public SwipeMovementMode SwipeMovementMode { get; set; }

Property Value

Type
SwipeMovementMode

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.SwipeMovementMode = SwipeMovementMode.MultipleItems;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

ViewMode

Gets or sets the mode used to arrange the items as default 3D view or in a horizontal stacked layout.

Declaration

public ViewMode ViewMode { get; set; }

Property Value

Type	Description
ViewMode	The default value of viewmode is "Default".

Examples

The below example shows how to initialize the tab view.

• C#

SfCarousel carousel = new SfCarousel();
carousel.ViewMode = ViewMode.Linear;
carousel.ItemsSource = new ObservableCollection<SfCarouselItem>()
{
   new SfCarouselItem() { ImageName = "image1.png"},
   new SfCarouselItem() { ImageName = "image2.png"},
};
this.Content = carousel;

Methods

LoadMore()

LoadMore method.

Declaration

public void LoadMore()

MoveNext()

Moves item from the right to left, in turn, it increments the Selected index of control by one.

Declaration

public void MoveNext()

MovePrevious()

Moves item from left to right, in turn, it decrements the Selected index of control by one.

Declaration

public void MovePrevious()

Events

SelectionChanged

Occurs when users select an item from unselected items in SfCarousel.

Declaration

public event EventHandler<SelectionChangedEventArgs> SelectionChanged

Event Type

Type
System.EventHandler<SelectionChangedEventArgs>

SwipeEnded

Occurs when swipe ended in SfCarousel.

Declaration

public event EventHandler<EventArgs> SwipeEnded

Event Type

Type
System.EventHandler<System.EventArgs>

SwipeStarted

Occurs when users select an item to swipe SfCarousel.

Declaration

public event EventHandler<SwipeStartedEventArgs> SwipeStarted

Event Type

Type
System.EventHandler<SwipeStartedEventArgs>

Explicit Interface Implementations

ICarousel.RaiseSelectionChanged(SelectionChangedEventArgs)

Raises the selection changed event in SfCarousel.

Declaration

void ICarousel.RaiseSelectionChanged(SelectionChangedEventArgs args)

Parameters

Type	Name	Description
SelectionChangedEventArgs	args	Arguments of Selection changed event.

ICarousel.RaiseSwipeEnded(EventArgs)

Raises the SwipeEnded event in SfCarousel.

Declaration

void ICarousel.RaiseSwipeEnded(EventArgs args)

Parameters

Type	Name	Description
System.EventArgs	args	Arguments of Swipe Ended event.

ICarousel.RaiseSwipeStarted(SwipeStartedEventArgs)

Raises the Swipe started event in SfCarousel.

Declaration

void ICarousel.RaiseSwipeStarted(SwipeStartedEventArgs args)

Parameters

Type	Name	Description
SwipeStartedEventArgs	args	Arguments of Swipe Started event.

Implements

ICarousel

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform