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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create a Carousel controls in Xaml

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

SfCarousel control allows navigating through image data in an interactive way so that they can be viewed or selected. We can create this control either using C# level code or in Xaml level code. Here we are going to write the carousel control creation with Xaml level code.

Creation of Carousel control: 

Step 1: Import the carousel namespace

XAML

xmlns:syncfusion="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms" 

 

Step 2: Initialize the carousel control as the content of content page

XAML

<syncfusion:SfCarousel x:Name="carousel" />    

 

Step 3: Add the necessary properties on it.

XAML

<syncfusion:SfCarousel x:Name="carousel" Offset="20" RotationAngle="45 SelectedIndex="2" HeightRequest="400" WidthRequest="800" />    

Step 4: Create a model view which holds image data in C# level

C#

class CarouselModel 
{
    public CarouselModel(string imagestr)
    {
        Image = imagestr;
    }
    private string _image;
 
    public string Image
    {
        get { return _image; }
        set { _image = value; }
    }
}

 

 

Step 5: Populate carousel items collection in View model with the image data.

C#

public class CarouselViewModel 
{
    public CarouselViewModel()
    {
        ImageCollection.Add(new CarouselModel("image1.png"));
        ImageCollection.Add(new CarouselModel("image2.png"));
        ImageCollection.Add(new CarouselModel("image3.png"));
        ImageCollection.Add(new CarouselModel("image4.png"));
        ImageCollection.Add(new CarouselModel("image5.png"));
    }
    private List<CarouselModel> imageCollection = new List<CarouselModel>();
    public List<CarouselModel> ImageCollection
    {
        get { return imageCollection; }
        set { imageCollection = value; }
    }
}
 

 

The following finalized code will illustrate the way to create a carousel control with xaml code.

 

XAML

<? xml version="1.0" encoding="UTF-8"?>  
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
 
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:syncfusion="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms"
  x:Class="GettingStarted.CarouselControlPage">
<ContentPage.Resources>
  <ResourceDictionary>
    <DataTemplate x:Key="itemTemplate">
      <Image Source = "{Binding Image}" Aspect="AspectFit"/>
    </DataTemplate>
  </ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
  <syncfusion:SfCarousel x:Name="carousel"  ItemTemplate="{StaticResource itemTemplate}" DataSource="{Binding ImageCollection}" SelectedIndex="2"  RotationAngle="45"  HeightRequest="400" WidthRequest="800" />
</ContentPage.Content>
</ContentPage>
   

 

 

Screenshot

Carousel

 

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.

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