Getting Started with .NET MAUI Kanban Board (SfKanban)

This section provides a quick overview for working with Essential^® Kanban for .NET MAUI. It is an efficient way to visualize the workflow at each stage along its path to completion.

To get start quickly with our .NET MAUI Kanban Board, you can check the below video.

Prerequisites

Before proceeding, ensure that the following are set up:

Install .NET 8 SDK or later is installed.
Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later).

Step 1: Create a new .NET MAUI project

Go to File > New > Project and choose the .NET MAUI App template.
Name the project and choose a location. Click Next.
Select the .NET framework version and click Create.

Step 2: Install the Syncfusion^® .NET MAUI Kanban Board NuGet Package

In Solution Explorer, right-click the project and choose Manage NuGet Packages.
Search for Syncfusion.Maui.Kanban and install the latest version.
Ensure the necessary dependencies are installed correctly, and the project is restored.

Step 3: Register the handler

Syncfusion.Maui.Core nuget is a dependent package for all Syncfusion^® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion^® core.

MauiProgram.cs
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

namespace KanbanGettingStarted
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

            return builder.Build();
        }
    }
}

Step 4: Add .NET MAUI Kanban Board Control

To initialize the control, import the Syncfusion.Maui.Kanban namespace into your code.
Initialize SfKanban.

XAML
<ContentPage
    . . .    
    xmlns:kanban="clr-namespace:Syncfusion.Maui.Kanban;assembly=Syncfusion.Maui.Kanban">
    
    <kanban:SfKanban/>
    
</ContentPage>

You can also create the kanban board programmatically in the MainPage.xaml.cs file:

C#
using Syncfusion.Maui.Kanban;
namespace KanbanGettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();           
            SfKanban kanban = new SfKanban(); 
            this.Content = kanban;
        }
    }   
}

Prerequisites

Before proceeding, ensure that the following are set up:

Install .NET 8 SDK or later is installed.
Set up a .NET MAUI environment with Visual Studio Code.
Ensure that the .NET MAUI extension is installed and configured as described here.

Step 1: Create a new .NET MAUI project

Open the command palette by pressing Ctrl+Shift+P and type .NET:New Project and enter.
Choose the .NET MAUI App template.
Select the project location, type the project name and press Enter.
Then choose Create project.

Step 2: Install the Syncfusion^® .NET MAUI Kanban Board NuGet Package

Press Ctrl + ` (backtick) to open the integrated terminal in Visual Studio Code.
Ensure you’re in the project root directory where your .csproj file is located.
Run the command dotnet add package Syncfusion.Maui.Kanban to install the Syncfusion^® .NET MAUI Kanban Board NuGet package.
To ensure all dependencies are installed, run dotnet restore.

Step 3: Register the handler

Syncfusion.Maui.Core nuget is a dependent package for all Syncfusion^® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion^® core.

MauiProgram.cs
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

namespace KanbanGettingStarted
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

            return builder.Build();
        }
    }
}

Step 4: Add .NET MAUI Kanban Board Control

To initialize the control, import the Syncfusion.Maui.Kanban namespace into your code.
Initialize SfKanban.

XAML
<ContentPage
    . . .    
    xmlns:kanban="clr-namespace:Syncfusion.Maui.Kanban;assembly=Syncfusion.Maui.Kanban">
    
    <kanban:SfKanban/>
    
</ContentPage>

You can also create the kanban board programmatically in the MainPage.xaml.cs file:

C#
using Syncfusion.Maui.Kanban;
namespace KanbanGettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();           
            SfKanban kanban = new SfKanban(); 
            this.Content = kanban;
        }
    }   
}

Prerequisites

Before proceeding, ensure the following are set up:

Ensure you have the latest version of JetBrains Rider.
Install .NET 8 SDK or later is installed.
Make sure the MAUI workloads are installed and configured as described here.

Step 1: Create a new .NET MAUI Project

Go to File > New Solution, Select .NET (C#) and choose the .NET MAUI App template.
Enter the Project Name, Solution Name, and Location.
Select the .NET framework version and click Create.

Step 2: Install the Syncfusion^® MAUI Kanban NuGet Package

In Solution Explorer, right-click the project and choose Manage NuGet Packages.
Search for Syncfusion.Maui.Kanban and install the latest version.
Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: dotnet restore

Step 3: Register the handler

Syncfusion.Maui.Core nuget is a dependent package for all Syncfusion^® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion^® core.

MauiProgram.cs
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

namespace KanbanGettingStarted
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

            return builder.Build();
        }
    }
}

Step 4: Add .NET MAUI Kanban Board Control

To initialize the control, import the Syncfusion.Maui.Kanban namespace into your code.
Initialize SfKanban.

XAML
<ContentPage
    . . .    
    xmlns:kanban="clr-namespace:Syncfusion.Maui.Kanban;assembly=Syncfusion.Maui.Kanban">
    
    <kanban:SfKanban/>
    
</ContentPage>

You can also create the kanban board programmatically in the MainPage.xaml.cs file:

C#
using Syncfusion.Maui.Kanban;
namespace KanbanGettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();           
            SfKanban kanban = new SfKanban(); 
            this.Content = kanban;
        }
    }   
}

Define the View Model

Create a ViewModel class with a collection property to hold a collection of KanbanModel instances as shown below. Each KanbanModel instance represent a card in Kanban control.

public class ViewModel
{
    public ObservableCollection<KanbanModel> Cards { get; set; }
    public ViewModel()
    {
        Cards = new ObservableCollection<KanbanModel>();
        Cards.Add(new KanbanModel()
        {
            ID = 1,
            Title = "iOS - 1002",
            ImageURL = "People_Circle1.png",
            Category = "Open",
            Description = "Analyze customer requirements",
            IndicatorFill = Colors.Red,
            Tags = new List<string> { "Incident", "Customer" }
        });
        Cards.Add(new KanbanModel()
        {
            ID = 6,
            Title = "Xamarin - 4576",
            ImageURL = "People_Circle2.png",
            Category = "Open",
            Description = "Show the retrieved data from the server in grid control",
            IndicatorFill = Colors.Green,
            Tags = new List<string> { "Story", "Customer" }
        });
        Cards.Add(new KanbanModel()
        {
            ID = 13,
            Title = "UWP - 13",
            ImageURL = "People_Circle3.png",
            Category = "In Progress",
            Description = "Add responsive support to application",
            IndicatorFill = Colors.Brown,
            Tags = new List<string> { "Story", "Customer" }
        });
        Cards.Add(new KanbanModel()
        {
            ID = 2543,
            Title = "IOS- 11",
            Category = "Code Review",
            ImageURL = "People_Circle4.png",
            Description = "Check login page validation",
            IndicatorFill = Colors.Brown,
            Tags = new List<string> { "Story", "Customer" }
        });
        Cards.Add(new KanbanModel()
        {
            ID = 123,
            Title = "UWP-21",
            Category = "Done",
            ImageURL = "People_Circle5.png",
            Description = "Check login page validation",
            IndicatorFill = Colors.Brown,
            Tags = new List<string> { "Story", "Customer" }
        });
    }
    
}

Bind the ViewModel

Set the ViewModel instance as the BindingContext of your Page; this is done to bind properties of ViewModel to SfKanban.

NOTE

Add namespace of ViewModel class in your XAML page if you prefer to set BindingContext in XAML.

XAML
C#
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="KanbanGettingStarted.MainPage"
             xmlns:kanban="clr-namespace:Syncfusion.Maui.Kanban;assembly=Syncfusion.Maui.Kanban"
             xmlns:local="clr-namespace:KanbanGettingStarted"> 

    <ContentPage.BindingContext>
        <local:ViewModel/>  
    </ContentPage.BindingContext>
</ContentPage>
this.BindingContext = new ViewModel();

Bind Data to the Kanban Board

Bind the above data to SfKanban using ItemsSource property.

XAML
C#
<kanban:SfKanban ItemsSource="{Binding Cards}">
</kanban:SfKanban>
kanban.SetBinding(SfKanban.ItemsSourceProperty, "Cards");

Defining columns in the Kanban Board

The columns are generated automatically based on the different values of Category in the KanbanModel class from ItemsSource. But, you can also define the columns by setting AutoGenerateColumns property to false and adding KanbanColumn instance to Columns property of SfKanban. Define the categories of column using Categories property of KanbanColumn and cards will be added to the respective columns.

XAML
C#
<kanban:SfKanban x:Name="kanban" AutoGenerateColumns="False" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" ItemsSource="{Binding Cards}">

    <kanban:SfKanban.Columns>

        <kanban:KanbanColumn Title="To Do" Categories="Open" >
        </kanban:KanbanColumn>

        <kanban:KanbanColumn Title="In Progress" Categories="In Progress" >
        </kanban:KanbanColumn>

        <kanban:KanbanColumn Title="Code Review" Categories="Code Review" >
        </kanban:KanbanColumn>

        <kanban:KanbanColumn Title="Done" Categories="Done" >
        </kanban:KanbanColumn> 

    </kanban:SfKanban.Columns>

</kanban:SfKanban>
kanban.AutoGenerateColumns = false; 
kanban.SetBinding(SfKanban.ItemsSourceProperty, "Cards");

KanbanColumn openColumn = new KanbanColumn();
openColumn.Title = "Open";
kanban.Columns.Add(openColumn);

KanbanColumn progressColumn = new KanbanColumn();
progressColumn.Title = "In Progress";
kanban.Columns.Add(progressColumn);

KanbanColumn codeColumn = new KanbanColumn();
codeColumn.Title = "Code Review";
kanban.Columns.Add(codeColumn);

KanbanColumn doneColumn = new KanbanColumn();
doneColumn.Title = "Done";
kanban.Columns.Add(doneColumn);

openColumn.Categories = new List<object>() { "Open" };
progressColumn.Categories = new List<object>() { "In Progress" };
codeColumn.Categories = new List<object>() { "Code Review" };
doneColumn.Categories = new List<object>() { "Done" };

Running the Application

Press F5 to build and run the application. Once compiled, the Kanban board will display with the data provided.

You can find the complete getting started sample from this link.

Getting Started with .NET MAUI Kanban Board (SfKanban)

Prerequisites

Step 1: Create a new .NET MAUI project

Step 2: Install the Syncfusion® .NET MAUI Kanban Board NuGet Package

Step 3: Register the handler

Step 4: Add .NET MAUI Kanban Board Control

Prerequisites

Step 1: Create a new .NET MAUI project

Step 2: Install the Syncfusion® .NET MAUI Kanban Board NuGet Package

Step 3: Register the handler

Step 4: Add .NET MAUI Kanban Board Control

Prerequisites

Step 1: Create a new .NET MAUI Project

Step 2: Install the Syncfusion® MAUI Kanban NuGet Package

Step 3: Register the handler

Step 4: Add .NET MAUI Kanban Board Control

Define the View Model

Bind the ViewModel

Bind Data to the Kanban Board

Defining columns in the Kanban Board

Running the Application

Step 2: Install the Syncfusion^® .NET MAUI Kanban Board NuGet Package

Step 2: Install the Syncfusion^® .NET MAUI Kanban Board NuGet Package

Step 2: Install the Syncfusion^® MAUI Kanban NuGet Package