{"id":23061586,"url":"https://github.com/syncfusionexamples/xamarin-sfrotator-samples","last_synced_at":"2025-04-03T07:18:57.687Z","repository":{"id":49166763,"uuid":"352526613","full_name":"SyncfusionExamples/xamarin-sfrotator-samples","owner":"SyncfusionExamples","description":"This repository contains examples for the Syncfusion Rotator  control in the Xamarin forms application.","archived":false,"fork":false,"pushed_at":"2024-03-22T08:53:55.000Z","size":858,"stargazers_count":0,"open_issues_count":2,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-08T20:48:14.932Z","etag":null,"topics":["rotator","rotator-controller","wizard-control","xamarin","xamarin-forms"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SyncfusionExamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-29T05:30:07.000Z","updated_at":"2024-03-28T11:15:54.000Z","dependencies_parsed_at":"2023-02-13T20:30:51.312Z","dependency_job_id":"263499c0-0790-46b2-9337-9febb5f18231","html_url":"https://github.com/SyncfusionExamples/xamarin-sfrotator-samples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin-sfrotator-samples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin-sfrotator-samples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin-sfrotator-samples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin-sfrotator-samples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/xamarin-sfrotator-samples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246952280,"owners_count":20859813,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rotator","rotator-controller","wizard-control","xamarin","xamarin-forms"],"created_at":"2024-12-16T03:17:52.606Z","updated_at":"2025-04-03T07:18:57.669Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to create a Wizard View in Xamarin.Forms\n\nThis repository showcases the creation of Wizard View in Xamarin.Forms with the help of a Rotator control.\n##  Blog reference\n[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)\n\n##   Create a Wizard View in Xamarin.Forms\n1.   Follow the Getting Started with Xamarin Rotator Control documentation to add a Xamarin.Forms SfRotator control to your application.\n2.  Let’s initialize the Rotator control and set the following necessary properties based on the UI requirements:\n\n    *  Set the DotPlacement property as none and the NavigationDirection property as horizontal.\n    *   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.\n\nRefer to the following code example.\n\n```\n\u003csfRotator:SfRotator x:Name=\"Rotator\"\n                       BackgroundColor=\"Transparent\"\n                       DotPlacement=\"None\"\n                       EnableLooping=\"False\"\n                       EnableSwiping=\"True\"\n                       NavigationDirection=\"Horizontal\" \u003e\n```\n3.  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.\n\n```\n\u003csfRotator:SfRotator.ItemTemplate\u003e\n    \u003cDataTemplate\u003e\n        \u003cStackLayout BackgroundColor=\"Transparent\"\n                     Spacing=\"0\"\n                     VerticalOptions=\"Center\"\u003e\n\n            \u003c!-- Image for display svg image --\u003e\n            \u003csvg:SVGImage BackgroundColor=\"Transparent\"\n                          Source =\"{Binding ImagePath}\"\n                          VerticalOptions=\"Center\" /\u003e\n\n            \u003c!-- Label to display header --\u003e\n            \u003cLabel FontFamily=\"{StaticResource Montserrat-SemiBold}\"\n                   FontSize=\"20\"\n                   HorizontalTextAlignment=\"Center\"\n                   Text=\"{Binding Header}\"\n                   VerticalTextAlignment=\"Center\" /\u003e\n\n            \u003c!-- Label to display content --\u003e\n            \u003cLabel FontFamily=\"{StaticResource Montserrat-Medium}\"\n                   FontSize=\"16\"\n                   Text=\"{Binding Content}\"\n                   VerticalTextAlignment=\"Center\" /\u003e\n        \u003c/StackLayout\u003e\n    \u003c/DataTemplate\u003e\n\u003c/sfRotator:SfRotator.ItemTemplate\u003e\n```\n4.  Then, create a model class with the required properties for the page\n\n```\npublic class PageModel\n{ \n#region Properties\n\n    /// \u003csummary\u003e\n    /// Gets or sets the image.\n    /// \u003c/summary\u003e\n    public string ImagePath { get; set; }\n\n    /// \u003csummary\u003e\n    /// Gets or sets the header.\n    /// \u003c/summary\u003e\n    public string Header { get; set; }\n\n    /// \u003csummary\u003e\n    /// Gets or sets the content.\n    /// \u003c/summary\u003e\n    public string Content { get; set; }\n\n    /// \u003csummary\u003e\n    /// Gets or sets the view.\n    /// \u003c/summary\u003e\n    public View RotatorItem { get; set; }\n\n#endregion\n}\n```\n5.  Now, create a ViewModel class containing the business logic for the wizard control.\n```\npublic class PageViewModel \n{\n#region Fields\n\nprivate ObservableCollection\u003cPageModel\u003e pages;\n\n#endregion\n\n#region Constructor\n\n/// \u003csummary\u003e\n/// Initializes a new instance for the \u003csee cref=\" PageViewModel \" /\u003e class.\n/// \u003c/summary\u003e\npublic PageViewModel ()\n{\n    this.Pages= new ObservableCollection\u003cPageModel\u003e\n    {\n        new PageModel()\n        {\n            ImagePath = \"ReSchedule.png\",\n            Header = \"RESCHEDULE\",\n            Content = \"Drag and drop meetings in order to reschedule them easily.\",\n            RotatorItem = new WalkthroughItemPage()\n        },\n        new Boarding()\n        {\n            ImagePath = \"ViewMode.png\",\n            Header = \"VIEW MODE\",\n            Content = \"Display your meetings using four configurable view modes\",\n            RotatorItem = new WalkthroughItemPage()\n        },\n        new Boarding()\n        {\n            ImagePath = \"TimeZone.png\",\n            Header = \"TIME ZONE\",\n            Content = \"Display meetings created for different time zones.\",\n            RotatorItem = new WalkthroughItemPage()\n        }\n    };\n\n}\n\n#endregion\n\n#region Properties\n\npublic ObservableCollection\u003cPageModel\u003e Pages\n{\n    get\n    {\n        return this.pages;\n    }\n    set\n    {\n        if (this.pages== value)\n        {\n            return;\n        }\n\n        this.pages= value;\n        this.NotifyPropertyChanged();\n    }\n}\n\n#endregion\n```\n6.  Finally, assign the Pages property of the ViewModel to the ItemsSource property of the Rotator control.\n\n```\n\u003csfRotator:SfRotator\n         x:Name=\"Rotator\"\n           DotPlacement=\"None\"\n           EnableLooping=\"False\"\n           EnableSwiping=\"True\"\n           ItemsSource=\"{Binding Boardings}\"\n           NavigationDirection=\"Horizontal\"\n           SelectedIndex=\"{Binding SelectedIndex, Mode=TwoWay}\"\u003e\n \n    \u003csfRotator:SfRotator.ItemTemplate\u003e\n       \u003cDataTemplate\u003e\n          \u003cStackLayout\u003e\n \n            \u003c!--  Image for display svg image  --\u003e\n            \u003csvg:SVGImage BackgroundColor=\"Transparent\"                               \n                  Source =\"{Binding ImagePath}\" /\u003e\n \n             \u003c!--  Label to display header  --\u003e\n             \u003cLabel Text=\"{Binding Header}\" /\u003e\n \n             \u003c!--  Label to display content  --\u003e\n             \u003cLabel Text=\"{Binding Content}\" /\u003e\n         \u003c/StackLayout\u003e\n      \u003c/DataTemplate\u003e\n   \u003c/sfRotator:SfRotator.ItemTemplate\u003e\n \u003c/sfRotator:SfRotator\u003e\n ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fxamarin-sfrotator-samples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fxamarin-sfrotator-samples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fxamarin-sfrotator-samples/lists"}