How to use the ItemTemplate in SfRotator
Step 1: Create a Model and ViewModel classes in sample.
Step 2: Create a list of collections in the ViewModel class and add corresponding image value.
Step 3: Bind the list of collections into the Image property in ItemTemplate using a DataTemplate
The following code demonstrates how to use the ItemTemplate in SfRotator using a DataTemplate.
C#:
RotatorModel.cs
class RotatorModel
{
public RotatorModel(string imageString)
{
Image = imageString;
}
private String _image;
public String Image
{
get { return _image; }
set { _image = value; }
}
}
RotatorViewModel.cs
class RotatorViewModel
{
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<RotatorModel> imageCollection = new List<RotatorModel>();
public List<RotatorModel> ImageCollection
{
get { return imageCollection; }
set { imageCollection = value; }
}
MainPage.Xaml
<ContentPage>
<syncfusion:SfRotator
x:Name="rotator"
Grid.Row="0"
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:
Please download the sample from the following link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfRotaotr_ItemTemplate_(2)-1372332245
