https://github.com/syncfusionexamples/xamarin-forms-rotator

This example demonstrates integration of SfRotator component into Xamarin.Forms projects, including basic usage and advanced configurations.
https://github.com/syncfusionexamples/xamarin-forms-rotator

rotator rotator-controller xamarin xamarin-forms xamarin-rotator

Last synced: 6 days ago
JSON representation

This example demonstrates integration of SfRotator component into Xamarin.Forms projects, including basic usage and advanced configurations.

• Host: GitHub
• URL: https://github.com/syncfusionexamples/xamarin-forms-rotator
• Owner: SyncfusionExamples
• Created: 2021-04-26T13:03:45.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-22T10:42:42.000Z (9 months ago)
• Last Synced: 2024-04-14T12:07:22.531Z (8 months ago)
• Topics: rotator, rotator-controller, xamarin, xamarin-forms, xamarin-rotator
• Language: C#
• Homepage:
• Size: 46.9 MB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Xamarin Rotator (SfRotator)

The Rotator is a data control used to display image data and navigate through them. The images can be selected either by Thumbnail or by Dots support.

For know more details about Rotator: https://www.syncfusion.com/xamarin-ui-controls/xamarin-rotator

Rotator user guide documentation: https://help.syncfusion.com/xamarin/rotator/getting-started

##   Create a Simple SfRotator

The SfRotator control is configured entirely in C# code or by using XAML markup. The following steps explain on how to create a SfRotator and configure its elements,

Adding namespace for the added assemblies.

**[XAML]**

```

xmlns:rotator="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"

```

**[XAML]**

Now add the SfRotator control with a required optimal name by using the included namespace.

```

 	

```

## Add Rotator Items

We can populate the rotator’s items by using any one of the following ways,

*   Through SfRotatorItem

*   Through ItemTemplate

###  Through SfRotatorItem

By passing the list of SfRotatorItem , we can get the view of SfRotator control. In that we can pass Images as well as Item content.

The following code example illustrates to add list of Images in Rotator ,

**[C#]**

```

public partial class Rotator : ContentPage

	{

        SfRotator rotator = new SfRotator();

        StackLayout stackLayout = new StackLayout();

		public Rotator()

		{

			InitializeComponent ();

            stackLayout.HeightRequest = 300;

            List collectionOfItems = new List();

            collectionOfItems.Add(new SfRotatorItem() { Image = "movie1.png" });

            collectionOfItems.Add(new SfRotatorItem() { Image = "movie2.png" });

            collectionOfItems.Add(new SfRotatorItem() { Image = "movie3.png" });

            collectionOfItems.Add(new SfRotatorItem() { Image = "movie4.png" });

            collectionOfItems.Add(new SfRotatorItem() { Image = "movie5.png" });

            rotator.DataSource = collectionOfItems;

            stackLayout.Children.Add(rotator);

            this.Content = stackLayout;

        }

	}

```

The following code example illustrates to add list of items through ItemContent API in Rotator ,

**[C#]**

```

 public partial class Rotator : ContentPage

    {

        SfRotator rotator;

        public Rotator()

        {

            InitializeComponent();

            SfRotator rotator = new SfRotator();

            List collectionOfItems = new List();

            collectionOfItems.Add(new SfRotatorItem() { ItemContent = new Xamarin.Forms.Button() { Text = "RotatorButton", TextColor = Color.White, BackgroundColor = Color.FromHex("#7E6E6B"), FontSize = 12 } });

            collectionOfItems.Add(new SfRotatorItem() { ItemContent = new Label() { Text = "RotatorLabel", BackgroundColor = Color.FromHex("#7E6E6B"), FontSize = 12 } });

            collectionOfItems.Add(new SfRotatorItem() { ItemContent = new Image() { Source = "image1.png", Aspect = Aspect.AspectFit } });

            rotator.DataSource = collectionOfItems;

            this.Content = rotator;

        }

    }

```

###  Through ItemTemplate

ItemTemplate property of SfRotator control is used to customize the contents of SfRotator items. ItemTemplate provides common template with different data. SfRotator items can be populated with a collection of image data. This collection includes Arrays, Lists and DataTables.

**[C#]**

```

public RotatorModel(string imageString)

{

    Image = imageString;

}

private String _image;

public String Image

{

    get { return _image; }

    set { _image = value; }

}

```

Create and populate Rotator collection as follows

```

public RotatorViewModel()

{

    ImageCollection.Add(new RotatorModel("movie1.png"));

    ImageCollection.Add(new RotatorModel("movie2.png"));

    ImageCollection.Add(new RotatorModel("movie3.png"));

    ImageCollection.Add(new RotatorModel("movie4.png"));

    ImageCollection.Add(new RotatorModel("movie5.png"));

}

private List imageCollection = new List();

public List ImageCollection

{

    get { return imageCollection; }

    set { imageCollection = value; }

}

```

**[XAML]**

```

    

        

    

    

        

            

                

                    

                

            

        

    

```

*   Set the BindingContext for the items collection.

**[XAML]**

```

        

```