Xamarin Forms and the Syncfusion Kanban Control | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (180).NET Core  (28).NET MAUI  (224)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (41)Black Friday Deal  (1)Blazor  (234)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (199)File Formats  (72)Flutter  (135)JavaScript  (226)Microsoft  (121)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (960)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (162)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (10)Business intelligence  (55)Button  (4)C#  (163)Chart  (145)Chart of the week  (57)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (676)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (20)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (519)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (400)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (624)What's new  (337)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Xamarin Forms and the Syncfusion Kanban Control

Xamarin Forms and Syncfusion Xamarin controls are a powerful combination to get great looking, cross-platform, native mobile apps while using a mostly shared code base.

In this blog post, we’re going to look at getting started with one of the newer controls to the Syncfusion Xamarin family: the kanban control.

First and foremost, all the source code for the examples below can be found here. If you’re not familiar with getting a Xamarin Forms app up and running, have a look at the quick start outlines here.

NuGet packages for Syncfusion controls can be found here; keep in mind you need a license to be able to use them. Luckily, if you’re a hobbyist developer or a company with less than five people, you can get a free Syncfusion community license!

Okay, time to get started. I’m going to assume you already set up a Xamarin Forms wireframe app. If not, check out the quick start above for details on how to get that up and running.

Usually a new Xamarin Forms project adds Windows Phone variant projects. I tend to stick with Universal Windows Platform (UWP) for Windows, since this is generally more actively supported by control suites.

To get access to the Syncfusion NuGets, setup a new NuGet package source that points to the Syncfusion NuGet location.

Add NuGet packages for the Syncfusion kanban control:

Be sure to set the source to the Syncfusion Xamarin NuGet location:

Every project needs to have a reference to the Syncfusion.Xamarin.SfKanban NuGet package. You’ll notice there are Android and iOS variants for the package, too; these are for the specific Xamarin native platforms.

Now for some code.

In the portable library, create a ViewModel class to contain all the items that the cards on the kanban control are going to bind to. A sample of the ViewModel class can be found here.

You need a class that is the model that each kanban card will represent. Syncfusion provides a default called KanbanModel. We’ll use this for now, but you can use your own model classes, too (which I’ll cover in another post). Place an ObservableCollection of this model as a property on the ViewModel Class.

Then, add some items to the collection:

Take note of the Category property, as this is going to be used by the control to know in which swim lane to place the kanban card.

Next, create a page that will host the kanban control – sample can be found here

Wire up the BindingContext of the Page to your ViewModel: