---
title: "Create a Wizard View in Xamarin.Forms: A Novice’s Guide"
published_at: "2021-06-24T13:13:08+00:00"
modified_at: "2025-03-20T08:06:13+00:00"
url: "https://www.syncfusion.com/blogs/post/create-a-wizard-view-in-xamarin-forms"
excerpt: "A wizard control is an interactive, customizable user interface that can hold more than one page. It is useful in showcasing step-by-step processes, and also helps break a complex task into simple steps. Using a wizard interface in a project..."
taxonomy_category:
  - "Desktop"
  - "Development"
  - "Mobile"
  - "Tips and Tricks"
  - "User interface"
  - "Xamarin"
taxonomy_post_tag:
  - "Android"
  - "Mobile"
  - "Rotator"
  - "Wizard"
  - "Xamarin.Forms"
---

# Create a Wizard View in Xamarin.Forms: A Novice’s Guide

[Paul Anderson](https://www.syncfusion.com/blogs/author/paulanderson)

![Create a Wizard View in Xamarin.Forms: A Novice's Guide](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Create-a-Wizard-View-in-Xamarin.Forms-A-Novices-Guide.png)


A wizard control is an interactive, customizable user interface that can hold more than one page. It is useful in showcasing step-by-step processes, and also helps break a complex task into simple steps. Using a wizard interface in a project simplifies the design and code work of developers. In this blog, we are going to create a simple walk-through page (wizard view) for a scheduler component using the Syncfusion [Xamarin Rotator](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rotator)
 control.

Our Xamarin Rotator control is a UI that provides an interactive way to move from one image to another and navigate through a collection of views. It supports various navigation options like swiping, autoplay, and tapping. It has all the necessary features that a wizard control possesses. So, let’s design a beautiful wizard view with it!

![Designing a Wizard View Using Xamarin Rotator Control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Designing-a-Wizard-View-Using-Xamarin-Rotator-Control-3.png)

Designing a Wizard View Using Xamarin Rotator Control

## Creating a wizard view

Follow these steps to create a wizard view using the Xamarin Rotator control:

1. Follow the [Getting Started with Xamarin Rotator Control](https://help.syncfusion.com/xamarin/rotator/getting-started) documentation to add a Xamarin.Forms SfRotator control to your application.
2. Let’s initialize the Rotator control and set the following necessary properties based on the UI requirements:Refer to the following code example. ``` <sfRotator:SfRotator x:Name="Rotator" BackgroundColor="Transparent" DotPlacement="None" EnableLooping="False" EnableSwiping="True" NavigationDirection="Horizontal" > ```
  - Set the **DotPlacement** property as ** none** and the ** NavigationDirection** property as ** horizontal**.
  - Then, enable the swiping gesture in the Rotator control by setting the **EnableSwiping** property as ** True** and disable looping by setting the ** EnableLooping** property as ** False**.

3. In this walk-through, I’m going to load a Scalable Vector Graphics ([SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) ) image. Create a DataTemplate with an SVG image and two labels for the header and content of the page. Then, assign the DataTemplate to the **ItemTemplate** property of the Xamarin Rotator control.Refer to the following code example.``` <sfRotator:SfRotator.ItemTemplate> <DataTemplate> <StackLayout BackgroundColor="Transparent" Spacing="0" VerticalOptions="Center"> <!-- Image for display svg image --> <svg:SVGImage BackgroundColor="Transparent" Source ="{Binding ImagePath}" VerticalOptions="Center" /> <!-- Label to display header --> <Label FontFamily="{StaticResource Montserrat-SemiBold}" FontSize="20" HorizontalTextAlignment="Center" Text="{Binding Header}" VerticalTextAlignment="Center" /> <!-- Label to display content --> <Label FontFamily="{StaticResource Montserrat-Medium}" FontSize="16" Text="{Binding Content}" VerticalTextAlignment="Center" /> </StackLayout> </DataTemplate> </sfRotator:SfRotator.ItemTemplate> ```
4. Then, create a model class with the required properties for the page.``` public class PageModel { #region Properties /// <summary> /// Gets or sets the image. /// </summary> public string ImagePath { get; set; } /// <summary> /// Gets or sets the header. /// </summary> public string Header { get; set; } /// <summary> /// Gets or sets the content. /// </summary> public string Content { get; set; } /// <summary> /// Gets or sets the view. /// </summary> public View RotatorItem { get; set; } #endregion } ```
5. Now, create a ViewModel class containing the business logic for the wizard control.``` public class PageViewModel { #region Fields private ObservableCollection<PageModel> pages; #endregion #region Constructor /// <summary> /// Initializes a new instance for the <see cref=" PageViewModel " /> class. /// </summary> public PageViewModel () { this.Pages= new ObservableCollection<PageModel> { new PageModel() { ImagePath = "ReSchedule.png", Header = "RESCHEDULE", Content = "Drag and drop meetings in order to reschedule them easily.", RotatorItem = new WalkthroughItemPage() }, new Boarding() { ImagePath = "ViewMode.png", Header = "VIEW MODE", Content = "Display your meetings using four configurable view modes", RotatorItem = new WalkthroughItemPage() }, new Boarding() { ImagePath = "TimeZone.png", Header = "TIME ZONE", Content = "Display meetings created for different time zones.", RotatorItem = new WalkthroughItemPage() } }; } #endregion #region Properties public ObservableCollection<PageModel> Pages { get { return this.pages; } set { if (this.pages== value) { return; } this.pages= value; this.NotifyPropertyChanged(); } } #endregion ```
6. Finally, assign the **Pages** property of the ViewModel to the ** ItemsSource** property of the Rotator control.``` <sfRotator:SfRotator x:Name="Rotator" DotPlacement="None" EnableLooping="False" EnableSwiping="True" ItemsSource="{Binding Boardings}" NavigationDirection="Horizontal" SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"> <sfRotator:SfRotator.ItemTemplate> <DataTemplate> <StackLayout> <!-- Image for display svg image --> <svg:SVGImage BackgroundColor="Transparent" Source ="{Binding ImagePath}" /> <!-- Label to display header --> <Label Text="{Binding Header}" /> <!-- Label to display content --> <Label Text="{Binding Content}" /> </StackLayout> </DataTemplate> </sfRotator:SfRotator.ItemTemplate> </sfRotator:SfRotator> ```

## Output

After executing the above code examples, we will get the wizard view pages shown in the .gif image.

![Designing a Wizard View Using Xamarin Rotator Control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Designing-a-Wizard-View-Using-Xamarin-Rotator-Control.gif)

Designing a Wizard View Using Xamarin Rotator Control

## Resource

For more information refer to the [Creating Wizard View using Xamarin Rotator](https://github.com/SyncfusionExamples/xamarin-sfrotator-samples/tree/main/WizardControlXamarin)
 sample.

## Conclusion

Thanks for reading! I hope you now have a clear idea of how to create a wizard view using our [Xamarin Rotator](https://help.syncfusion.com/xamarin/rotator/overview)
 control. With a wizard view, you can easily add a sequence for your users by splitting it into stages. This will reduce your workload and save coding time, and also help you create a highly customizable component.

Our Rotator control is available in our [ASP.NET Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/rotator)
, [UWP](https://www.syncfusion.com/uwp-ui-controls/rotator)
, and [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-rotator)
 platform suites. Try them out and leave your feedback in the comments section below!

If you are an existing Syncfusion user, you can download the latest version from the [License and Downloads](https://www.syncfusion.com/account/downloads)
 page and try the new features for yourself. Also, our NuGet packages are available on [NuGet.org](https://www.nuget.org/)
.

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to check out these features. Also, try our other samples from this [GitHub](https://github.com/syncfusion/xamarin-demos/tree/master/Forms/PdfViewer)
 location.

You can also contact us through our [support forums](https://www.syncfusion.com/forums)
, [Direct-Trac](https://www.syncfusion.com/support/directtrac/)
, or [feedback portal](https://www.syncfusion.com/feedback/)
. We are always happy to assist you!

## Related blogs

- [Easily Create a Meeting Room Calendar using Xamarin.Forms Scheduler](https://www.syncfusion.com/blogs/post/easily-create-a-meeting-room-calendar-using-xamarin-forms-scheduler.aspx)
- [Replicating a Facebook Like UI in Xamarin](https://www.syncfusion.com/blogs/post/replicating-a-facebook-like-ui-in-xamarin.aspx)
- [Create Custom Renderers for a Control in Xamarin.Forms](https://www.syncfusion.com/blogs/post/how-to-create-custom-renderers-for-a-control-in-xamarin-forms.aspx)
- [Connect Azure Bot Service to Xamarin.Forms Chat Control](https://www.syncfusion.com/blogs/post/how-to-connect-azure-bot-service-to-xamarin-forms-chat-control.aspx)
- [5 Simple Steps to Create a Marquee Control in Your Xamarin.Forms Apps](https://www.syncfusion.com/blogs/post/create-xamarin-marquee-control.aspx)