{"id":23061591,"url":"https://github.com/syncfusionexamples/xamarin-forms-sfcarousel","last_synced_at":"2026-05-02T04:40:11.666Z","repository":{"id":98096394,"uuid":"361628513","full_name":"SyncfusionExamples/xamarin-forms-sfcarousel","owner":"SyncfusionExamples","description":"This example demonstrates integration of SfCarouselView component into Xamarin.Forms projects, including basic usage and advanced configurations.","archived":false,"fork":false,"pushed_at":"2024-03-22T08:59:10.000Z","size":1262,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-08T20:48:14.637Z","etag":null,"topics":["carousel","carouselview","xamarin","xamarin-carousel","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-04-26T05:30:49.000Z","updated_at":"2024-03-28T11:05:31.000Z","dependencies_parsed_at":"2023-04-28T23:34:23.967Z","dependency_job_id":"701a788f-31a9-4218-b5a8-02de9c559b7c","html_url":"https://github.com/SyncfusionExamples/xamarin-forms-sfcarousel","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-forms-sfcarousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin-forms-sfcarousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin-forms-sfcarousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin-forms-sfcarousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/xamarin-forms-sfcarousel/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":["carousel","carouselview","xamarin","xamarin-carousel","xamarin-forms"],"created_at":"2024-12-16T03:17:52.753Z","updated_at":"2026-05-02T04:40:06.633Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Xamarin Carousel View (SfCarousel) \n\nThe Essential Xamarin Carousel control allows navigating through image data in an interactive way so that they can be viewed or selected. Also, provides various customization options for its item arrangements.\n\nFor know more details about Carousel: https://www.syncfusion.com/xamarin-ui-controls/xamarin-carousel-view\n\nCarousel user guide documentation: https://help.syncfusion.com/xamarin/carousel-view/getting-started\n## Getting Started with Xamarin Carousel View (SfCarousel)\n\nThis section explains how to showcase a Gallery of photos along with a Title using Xamarin Carousel View (SfCarousel) Control.\n\n## Create a Simple SfCarousel\nThe Xamarin Carousel View (SfCarousel) control is configured entirely in C# code or by using XAML markup. The following steps explain on how to create a SfCarousel and configure its elements,\n\n*   Adding namespace for the added assemblies.\n**[XAML]**\n\n```\nxmlns:carousel=\"clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms\"\n```\n*   Now add the SfCarousel control with a required optimal name by using the included namespace.\n**[XAML]**\n```\n    \u003ccarousel:SfCarousel x:Name=\"carousel\" /\u003e\n```\n\n## Add Carousel Items\nWe can populate the carousel’s items by using any one of the following ways,\n\n*   Through SfCarouselItem\n\n*   Through ItemTemplate\n\n##  Through SfCarouselItem\nBy passing the list of SfCarouselItem , we can get the view of SfCarousel control. In that we can pass Images as well as Item content.\n\nThe following code example illustrates to add list of Images in Carousel ,\n\n**[C#]**\n```\nusing Syncfusion.SfCarousel.XForms;\nusing System.Collections.ObjectModel;\nusing Xamarin.Forms;\nnamespace CarouselSample\n{\n    public partial class MainPage : ContentPage\n    {\n        public MainPage()\n        {\n            InitializeComponent();\n            SfCarousel carousel = new SfCarousel()\n            {\n                ItemWidth = 170,\n                ItemHeight = 250\n            };\n            ObservableCollection\u003cSfCarouselItem\u003e carouselItems = new ObservableCollection\u003cSfCarouselItem\u003e();\n            carouselItems.Add(new SfCarouselItem() { ImageName = \"carousel_person1.png\" });\n            carouselItems.Add(new SfCarouselItem() { ImageName = \"carousel_person2.png\" });\n            carouselItems.Add(new SfCarouselItem() { ImageName = \"carousel_person3.png\" });\n            carouselItems.Add(new SfCarouselItem() { ImageName = \"carousel_person4.png\" });\n            carouselItems.Add(new SfCarouselItem() { ImageName = \"carousel_person5.png\" });\n            carousel.ItemsSource = carouselItems;\n            this.Content = carousel;\n        }\n    }\n}\n```\nThe following code example illustrates to add list of Item in Carousel ,\n\n**[C#]**\n```\nusing Syncfusion.SfCarousel.XForms;\nusing System.Collections.ObjectModel;\nusing Xamarin.Forms;\nnamespace CarouselSample\n{\n    public partial class MainPage : ContentPage\n    {\n        public MainPage()\n        {\n            InitializeComponent();\n            SfCarousel carousel = new SfCarousel()\n            {\n                ItemWidth = 170,\n                ItemHeight = 250\n            };\n            ObservableCollection\u003cSfCarouselItem\u003e carouselItems = new ObservableCollection\u003cSfCarouselItem\u003e();\n            carouselItems.Add(new SfCarouselItem()\n            {\n                ItemContent = new Button()\n                {\n                    Text = \"ItemContent1\",\n                    TextColor = Color.White,\n                    BackgroundColor = Color.FromHex(\"#7E6E6B\"),\n                    FontSize = 12\n                }\n            });\n            carouselItems.Add(new SfCarouselItem()\n            {\n                ItemContent = new Label()\n                {\n                    Text = \"ItemContent2\",\n                    BackgroundColor = Color.FromHex(\"#7E6E6B\"),\n                    HorizontalTextAlignment = TextAlignment.Center,\n                    VerticalTextAlignment = TextAlignment.Center,\n                    FontSize = 12\n                }\n            });\n            carouselItems.Add(new SfCarouselItem()\n            {\n                ItemContent = new Image()\n                {\n                    Source = \"carousel_person1.png\",\n                    Aspect = Aspect.AspectFit\n                }\n            });\n            carousel.ItemsSource = carouselItems;\n            this.Content = carousel;\n        }\n    }\n}\n```\n## Through ItemTemplate\nItemTemplate property of Xamarin Carousel View (SfCarousel) control is used to customize the contents of SfCarousel items.\n\n*   Create a model view which holds image data\n\n```\nnamespace CarouselSample\n{\n    public class CarouselModel\n    {\n        public CarouselModel(string imageString)\n        {\n            Image = imageString;\n        }\n        private string _image;\n        public string Image\n        {\n            get { return _image; }\n            set { _image = value; }\n        }\n    }\n}\n```\n*   Populate carousel items collection in View model with the image data.\n```\nusing System.Collections.Generic;\nnamespace CarouselSample\n{\n    public class CarouselViewModel\n    {\n        public CarouselViewModel()\n        {\n            ImageCollection.Add(new CarouselModel(\"carousel_person1.png\"));\n            ImageCollection.Add(new CarouselModel(\"carousel_person2.png\"));\n            ImageCollection.Add(new CarouselModel(\"carousel_person3.png\"));\n            ImageCollection.Add(new CarouselModel(\"carousel_person4.png\"));\n            ImageCollection.Add(new CarouselModel(\"carousel_person5.png\"));\n        }\n        private List\u003cCarouselModel\u003e imageCollection = new List\u003cCarouselModel\u003e();\n        public List\u003cCarouselModel\u003e ImageCollection\n        {\n            get { return imageCollection; }\n            set { imageCollection = value; }\n        }\n    }\n}\n```\nThe following code illustrates the way to use ItemTemplate in both XAML as well as C#\n\n**[C#]**\n```\n\u003cContentPage.BindingContext\u003e\n        \u003clocal:CarouselViewModel/\u003e\n    \u003c/ContentPage.BindingContext\u003e\n    \u003cContentPage.Resources\u003e\n        \u003cResourceDictionary\u003e\n            \u003cDataTemplate x:Key=\"itemTemplate\"\u003e\n                \u003cImage Source=\"{Binding Image}\" \n                       Aspect=\"AspectFit\"/\u003e\n            \u003c/DataTemplate\u003e\n        \u003c/ResourceDictionary\u003e\n    \u003c/ContentPage.Resources\u003e\n    \u003cContentPage.Content\u003e\n        \u003ccarousel:SfCarousel x:Name=\"carousel\"  \n                             ItemTemplate=\"{StaticResource itemTemplate}\" \n                             ItemsSource=\"{Binding ImageCollection}\" \n                             HeightRequest=\"400\" \n                             WidthRequest=\"800\" /\u003e\n\u003c/ContentPage.Content\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fxamarin-forms-sfcarousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fxamarin-forms-sfcarousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fxamarin-forms-sfcarousel/lists"}