How to load rotator images from internet
Syncfusion Rotator provides the user to get the rotator item images from the internet. This document explains how to add images from the URL to the rotator.
The following steps explain how to add an image to the rotator.
Step 1: Create a Rotator sample with all the required assemblies.
Step 2: Create the Model class with the properties need to be assigned.
C#:
public class RotatorModel
{
public RotatorModel(string imageString)
{
Image = imageString;
}
private String _image;
public String Image
{
get { return _image; }
set { _image = value; }
}
}
Step 3: Create the ViewModel class and add a image collection of URL that needs to be bound with the data source.
C#:
public class RotatorViewModel
{
public RotatorViewModel()
{
ImageCollection.Add(new RotatorModel("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQe0ub78kIqvmA13W9Sr6VdDcu0ciXwScvgKgDKQuitqLAQoUxJng"));
ImageCollection.Add(new RotatorModel("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-6rRDNIfS0JE47sDceHbY4FkY15Hl88OOzC_BFIRWcawLlIsk"));
ImageCollection.Add(new RotatorModel("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSgxX4vNJToErxuEprfne9xvIOkLO262VfYNcDm5iCGnagzJDs"));
ImageCollection.Add(new RotatorModel("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsIYs-RihLWXHvr6tqkOVxaRvjBqIUZpqH6_gJD0spZbB46rSRfQ"));
ImageCollection.Add(new RotatorModel("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTCkvGBaNwtSdkefoj_2QLYK4KRwHNH6hgaPIwXf2cqd1AN_CG"));
}
private List<RotatorModel> imageCollection = new List<RotatorModel>();
public List<RotatorModel> ImageCollection
{
get { return imageCollection; }
set { imageCollection = value; }
}
}
Step 4: Initialize the Rotator control in the xaml page in which the ViewModel class is set to BindingContext.
XAML:
<ContentPage.BindingContext>
<local:RotatorViewModel/>
</ContentPage.BindingContext>
<syncfusion:SfRotator x:Name="rotator"z NavigationDelay="2000" ItemsSource="{Binding ImageCollection}" SelectedIndex="2" NavigationDirection="Horizontal" NavigationStripMode="Dots" BackgroundColor="#ececec" NavigationStripPosition="Bottom">
<syncfusion:SfRotator.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Image}" />
</DataTemplate>
</syncfusion:SfRotator.ItemTemplate>
</syncfusion:SfRotator>
</ContentPage>
Output:
|
|
|
