Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/syncfusionexamples/xamarin-sfrotator-samples
This repository contains examples for the Syncfusion Rotator control in the Xamarin forms application.
https://github.com/syncfusionexamples/xamarin-sfrotator-samples
rotator rotator-controller wizard-control xamarin xamarin-forms
Last synced: about 2 months ago
JSON representation
This repository contains examples for the Syncfusion Rotator control in the Xamarin forms application.
- Host: GitHub
- URL: https://github.com/syncfusionexamples/xamarin-sfrotator-samples
- Owner: SyncfusionExamples
- Created: 2021-03-29T05:30:07.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-22T08:53:55.000Z (11 months ago)
- Last Synced: 2024-04-14T12:07:23.245Z (10 months ago)
- Topics: rotator, rotator-controller, wizard-control, xamarin, xamarin-forms
- Language: C#
- Homepage:
- Size: 838 KB
- Stars: 0
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How to create a Wizard View in Xamarin.Forms
This repository showcases the creation of Wizard View in Xamarin.Forms with the help of a Rotator control.
## Blog reference
[Create a Wizard View in Xamarin.Forms: A Novice’s Guide](https://www.syncfusion.com/blogs/post/create-a-wizard-view-in-xamarin-forms.aspx)
## Create a Wizard View in Xamarin.Forms
1. Follow the Getting Started with Xamarin Rotator Control 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:
* 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.
Refer to the following code example.
```
```
3. In this walk-through, I’m going to load a Scalable Vector Graphics (SVG) 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.
```
```
4. Then, create a model class with the required properties for the page
```
public class PageModel
{
#region Properties
///
/// Gets or sets the image.
///
public string ImagePath { get; set; }
///
/// Gets or sets the header.
///
public string Header { get; set; }
///
/// Gets or sets the content.
///
public string Content { get; set; }
///
/// Gets or sets the view.
///
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 pages;
#endregion
#region Constructor
///
/// Initializes a new instance for the class.
///
public PageViewModel ()
{
this.Pages= new ObservableCollection
{
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 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.
```
```