How to assign different views to each Item in Xamarin Rotator?
You can assign different views to each item using item template property and it can be achieved by binding the views to the content presenter in the data template in Xamarin Rotator.
Step 1: Add the SfRotator control in the XAML file.
Step 2: Create a data template using the Resource dictionary and bind the view in the ContentPresenter.
Step 3: Bind the Itemsource and ItemTemplate properties.
Step 4: Create a model file as a property of type View.
Step 5: Create a view model file and add different views to the observable collection.
Step 6: Set the binding context to the rotator control.
The following code demonstrates how to navigate between the tab items using tap gesture.
XAML code:
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="RotatorTemplate">
<ContentPresenter Content="{Binding ItemTemplate}" BackgroundColor="Aqua" />
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content >
<StackLayout Padding="50">
<syncfusion:SfRotator x:Name="rotator" Grid.Row="0"
NavigationDelay="2000"
ItemsSource="{Binding TestCollection}"
ItemTemplate="{StaticResource RotatorTemplate}"
NavigationDirection="Horizontal"
NavigationStripMode="Dots"
BackgroundColor="#ececec"
NavigationStripPosition="Bottom"
WidthRequest="200"
HeightRequest="200">
</syncfusion:SfRotator>
</StackLayout>
</ContentPage.Content>
C# code:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
rotator.BindingContext = new RotatorViewModel();
}
}
internal class RotatorModel
{
public RotatorModel(View itemTemplate)
{
ItemTemplate = itemTemplate;
}
private View itemTemplate;
public View ItemTemplate
{
get
{
return itemTemplate;
}
set
{
itemTemplate = value;
}
}
}
internal class RotatorViewModel
{
StackLayout sl1, sl2, sl3, sl4, sl5;
Image image1, image2, image3, image4, image5;
public RotatorViewModel()
{
sl1 = new StackLayout();
sl2 = new StackLayout();
sl3 = new StackLayout();
sl4 = new StackLayout();
sl5 = new StackLayout();
//Page 1
sl1.Orientation = StackOrientation.Vertical;
Label label1 = new Label();
label1.Text = "Welcome";
Label label2 = new Label();
label2.Text = "Welcome to Syncfusion Software";
sl1.Children.Add(label1);
sl1.Children.Add(label2);
//Page 2
sl2.Orientation = StackOrientation.Vertical;
StackLayout page2stack1 = new StackLayout();
page2stack1.Orientation = StackOrientation.Horizontal;
Label label3 = new Label();
label3.Text = "Age:";
Entry entry1 = new Entry();
entry1.WidthRequest = 150;
page2stack1.Children.Add(label3);
page2stack1.Children.Add(entry1);
sl2.Children.Add(page2stack1);
StackLayout page2stack2 = new StackLayout();
page2stack2.Orientation = StackOrientation.Horizontal;
Label label4 = new Label();
label4.Text = "First Name:";
Entry entry2 = new Entry();
entry2.WidthRequest = 150;
page2stack2.Children.Add(label4);
page2stack2.Children.Add(entry2);
sl2.Children.Add(page2stack2);
StackLayout page2stack3 = new StackLayout();
page2stack3.Orientation = StackOrientation.Horizontal;
Label label5 = new Label();
label5.Text = "Last Name:";
Entry entry3 = new Entry();
entry3.WidthRequest = 150;
page2stack3.Children.Add(label5);
page2stack3.Children.Add(entry3);
sl2.Children.Add(page2stack3);
//Page3
sl3.Orientation = StackOrientation.Vertical;
StackLayout page3stack1 = new StackLayout();
page3stack1.Orientation = StackOrientation.Vertical;
Label label6 = new Label();
label6.Text = "Select the options:";
Button button1 = new Button();
button1.Text = "Option1";
Button button2 = new Button();
button2.Text = "Option2";
Button button3 = new Button();
button3.Text = "Option3";
page3stack1.Children.Add(label6);
page3stack1.Children.Add(button1);
page3stack1.Children.Add(button2);
page3stack1.Children.Add(button3);
sl3.Children.Add(page3stack1);
//Page4
sl4.Orientation = StackOrientation.Vertical;
StackLayout page4stack1 = new StackLayout();
page4stack1.Orientation = StackOrientation.Horizontal;
Label label7 = new Label();
label7.Text = "Investment:";
Entry entry4 = new Entry();
entry4.WidthRequest = 150;
page4stack1.Children.Add(label7);
page4stack1.Children.Add(entry4);
sl4.Children.Add(page4stack1);
StackLayout page4stack2 = new StackLayout();
page4stack2.Orientation = StackOrientation.Horizontal;
Label label8 = new Label();
label8.Text = "Income:";
Entry entry5 = new Entry();
entry5.WidthRequest = 150;
page4stack2.Children.Add(label8);
page4stack2.Children.Add(entry5);
sl4.Children.Add(page4stack2);
TestCollection.Add(new RotatorModel(sl1));
TestCollection.Add(new RotatorModel(sl2));
TestCollection.Add(new RotatorModel(sl3));
TestCollection.Add(new RotatorModel(sl4));
}
private List<RotatorModel> testCollection = new List<RotatorModel>();
public List<RotatorModel> TestCollection
{
get { return testCollection; }
set { testCollection = value; }
}
}
Please download the sample from the following link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Rotator_Sample-1234367461
Conclusion
I hope you enjoyed learning about how to assign different views to each Item in Xamarin Rotator.
You can refer to our Xamarin.Forms Rotator feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
