How to create a Wizard page using Xamarin.Forms SfRotator
To create Wizard control using Xamarin.Forms SfRotator, you need to create different pages with different layouts. Each layout should have different content, and set these pages as ItemsSource of Xamarin.Forms SfRotator.
The following steps explain how to create and set different layouts to Xamarin.Forms SfRotator.
Step 1: Create an app using Xamarin.Forms SfRotator with all the required assemblies.
Step 2: Create different pages with different contents in the ViewModel class, and add these different pages into model collection. Refer to the following code sample to create different pages with different contents.
class WizardControlModel
{
public WizardControlModel (View itemTemplate)
{
ItemTemplate = itemTemplate;
}
private View _itemTemplate;
public View ItemTemplate
{
get { return _itemTemplate; }
set { _itemTemplate = value; }
}
}
class WizardControlViewModel
{
StackLayout homePage, registrationPage;
public WizardControlViewModel()
{
homePage = new StackLayout();
registrationPage = new StackLayout();
// Page 1(Home page)
homePage.Orientation = StackOrientation.Vertical;
Label title = new Label();
title.Text = "Welcome";
Label description = new Label();
description.Text = "Welcome to Syncfusion Software";
homePage.Children.Add(title);
homePage.Children.Add(description);
// Page 2(Registration page)
Grid registerForm = new Grid();
Label age = new Label();
Entry enterAge = new Entry();
Label firstName = new Label();
Entry enterFirstName = new Entry();
age.Text = "Age";
firstName.Text = "First Name";
registerForm.Children.Add(age, 0, 0);
registerForm.Children.Add(enterAge, 1, 0);
registerForm.Children.Add(firstName, 0, 1);
registerForm.Children.Add(enterFirstName, 1, 1);
registrationPage.Children.Add(registerForm);
TestCollection.Add(new WizardControlModel(homePage));
TestCollection.Add(new WizardControlModel(registrationPage));
}
private List<WizardControlModel> testCollection = new List<WizardControlModel>();
public List<WizardControlModel> TestCollection
{
get { return testCollection; }
set { testCollection = value; }
}
}
Step 3: Initialize the Xamarin.Forms SfRotator in XAML page in which the ViewModel class is set to BindingContext of Xamarin.Forms SfRotator, and set the ViewModel collection as ItemsSource of Xamarin.Forms SfRotator. Use ContentPresentner to bind the views.
XAML:
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key ="RotatorWizardTemplate">
<ContentPresenter Content ="{Binding ItemTemplate}" BackgroundColor ="Aqua" />
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content >
<StackLayout Padding ="20">
<syncfusion:SfRotator x:Name ="rotator" Grid.Row ="0" EnableLooping ="False"
NavigationDelay ="2000"
ItemsSource ="{Binding TestCollection}"
ItemTemplate ="{StaticResource RotatorWizardTemplate}"
NavigationDirection ="Horizontal"
NavigationStripMode ="Dots"
BackgroundColor ="#ececec"
NavigationStripPosition ="Bottom">
</syncfusion:SfRotator>
</StackLayout>
</ContentPage.Content>
Output:
You can find the sample in the following link: Sample
