Getting Started with WinUI Kanban Control

12 Sep 202517 minutes to read

This section provides a quick overview of how to get started with the WinUI Kanban control (SfKanban) for WinUI and a walk-through to configure the WinUI Kanban control in a real-time scenario. Follow the steps below to add WinUI Kanban control to your project.

Creating an application with WinUI Kanban

Create a WinUI 3 desktop app for C# and .NET 6.
Add reference to the Syncfusion.Kanban.WinUI NuGet.
Import the control namespace Syncfusion.UI.Xaml.Kanban in XAML or C# code.

Initialize the WinUI Kanban control.

XAML
C#
<Window
    ...
    xmlns:kanban="using:Syncfusion.UI.Xaml.Kanban">

    <kanban:SfKanban x:Name="kanban"/>
</Window>
using Syncfusion.UI.Xaml.Kanban;
. . .
   
public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        SfKanban kanban = new SfKanban();
        this.Content = kanban;
    }
}

Populate WinUI Kanban item source

This section explains how to populate the WinUI Kanban control’s ItemSource by creating and binding both default and custom task data models.

Creating the default model tasks

Define the View Model: Create a view model class to set values for the properties listed in the KanbanModel class as shown in the following example code. Each KanbanModel instance represent a card in Kanban control.
Bind item source for Kanban: To populate the kanban card items, utilize the ItemsSource property of SfKanban.
Defining columns in the Kanban Board: The columns are generated automatically based on the different values of the Category in the KanbanModel class from the ItemsSource. However, you can manually define the columns by setting the AutoGenerateColumns property to false and adding KanbanColumn instances to the Columns property of SfKanban. You can define the column categories using the Categories property of KanbanColumn, and the cards will be added to their respective columns.

The following sample code demonstrates this process in action:

XAML
C#
ViewModel.cs
<kanban:SfKanban x:Name="kanban"
                 AutoGenerateColumns="False" 
                 ItemsSource="{Binding TaskDetails}">
        <kanban:KanbanColumn HeaderText="To Do" Categories="Open" />
        <kanban:KanbanColumn HeaderText="In Progress" Categories="In Progress" />
        <kanban:KanbanColumn HeaderText="Done" Categories="Done" />
    <kanban:SfKanban.DataContext>
        <local:ViewModel/>
    </kanban:SfKanban.DataContext>
</kanban:SfKanban>
this.kanban.AutoGenerateColumns = false;
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.Columns.Add(new KanbanColumn() { HeaderText = "To Do", Categories = "Open" });
this.kanban.Columns.Add(new KanbanColumn() { HeaderText = "In Progress", Categories = "In Progress" });
this.kanban.Columns.Add(new KanbanColumn() { HeaderText = "Done", Categories = "Done" });
using Syncfusion.UI.Xaml.Kanban;

public class ViewModel
{
    /// <summary>
    /// Gets or sets the collection of <see cref="KanbanModel"/> objects representing tasks in various stages.
    /// </summary>
    public ObservableCollection<KanbanModel> TaskDetails { get; set; }

    /// <summary>
    /// Initializes a new instance of the <see cref="ViewModel"/> class.
    /// </summary>
    public ViewModel()
    {
        this.TaskDetails = this.GetTaskDetails();
    }

    /// <summary>
    /// Method to get the kanban model collections.
    /// </summary>
    /// <returns>The kanban model collections.</returns>
    private ObservableCollection<KanbanModel> GetTaskDetails()
    {
        var taskDetails = new ObservableCollection<KanbanModel>();

        KanbanModel taskDetail = new KanbanModel();
        taskDetail.Title = "UWP Issue";
        taskDetail.Id = "651";
        taskDetail.Description = "Crosshair label template not visible in UWP";
        taskDetail.Category = "Open";
        taskDetail.IndicatorColorKey = "High";
        taskDetail.Tags = new List<string>() { "Bug Fixing" };
        taskDetails.Add(taskDetail);

        taskDetail = new KanbanModel();
        taskDetail.Title = "WinUI Issue";
        taskDetail.Id = "646";
        taskDetail.Description = "AxisLabel cropped when rotating the axis label";
        taskDetail.Category = "Open";
        taskDetail.IndicatorColorKey = "Low";
        taskDetail.Tags = new List<string>() { "Bug Fixing" };
        taskDetails.Add(taskDetail);

        taskDetail = new KanbanModel();
        taskDetail.Title = "Kanban Feature";
        taskDetail.Id = "25678";
        taskDetail.Description = "Provide drag and drop support";
        taskDetail.Category = "In Progress";
        taskDetail.IndicatorColorKey = "Low";
        taskDetail.Tags = new List<string>() { "New control" };
        taskDetails.Add(taskDetail);

        taskDetail = new KanbanModel();
        taskDetail.Title = "New Feature";
        taskDetail.Id = "29574";
        taskDetail.Description = "Dragging events support for Kanban";
        taskDetail.Category = "In Progress";
        taskDetail.IndicatorColorKey = "Normal";
        taskDetail.Tags = new List<string>() { "New Control" };
        taskDetails.Add(taskDetail);

        taskDetail = new KanbanModel();
        taskDetail.Title = "WF Issue";
        taskDetail.Id = "1254";
        taskDetail.Description = "HorizontalAlignment for tooltip is not working";
        taskDetail.Category = "Done";
        taskDetail.IndicatorColorKey = "High";
        taskDetail.Tags = new List<string>() { "Bug fixing" };
        taskDetails.Add(taskDetail);

        return taskDetails;
    }
}

defining-columns-using-default-model-in-winui-kanban

Creating the custom model tasks with data mapping

You can also map custom data model to our Kanban control. The following steps demonstrate how to render tasks using the WinUI Kanban control with respective custom data properties.

Create a data model for kanban: Create a simple data model in a new class file as shown in the following example code.
Create view model: Create a view model class to set values for the properties listed in the model class as shown in the following example code.
Bind item source for Kanban: To populate the Kanban card items, utilize the ItemsSource property of SfKanban control. Additionally, ensure that the following property of SfKanban are mapped from corresponding properties in the ItemsSource while initializing the kanban control.

The ColumnMappingPath specifies the name of the property within the data object that is used to generate columns in the Kanban control when AutoGenerateColumns is set to true.

Defining columns in the Kanban Board: The Columns in the Kanban board are mapped based on the values of a specified property (e.g., “Status”) from your custom data model. The ColumnMappingPath specifies the name of the property within the data object that is used to generate columns in the Kanban control when AutoGenerateColumns is set to true.

Alternatively, you can manually define columns by setting AutoGenerateColumns to false and adding instances of KanbanColumn to the Columns collection of the SfKanban control. Based on the property specified in ColumnMappingPath, the Kanban control will generate the columns and render the corresponding cards accordingly.

Let’s look at the practical code example:

XAML
C#
TaskDetails.cs
ViewModel.cs
<kanban:SfKanban x:Name="kanban"
                 ItemsSource="{Binding TaskDetails}"
                 ColumnMappingPath="Status">
    <kanban:SfKanban.DataContext>
        <local:ViewModel />
    </kanban:SfKanban.DataContext>
    <kanban:SfKanban.CardTemplate>
        <DataTemplate>
            <Border BorderBrush="Black"
                    BorderThickness="1"
                    CornerRadius="3"
                    Background="#F3CFCE">
                <StackPanel Margin="10">
                    <TextBlock Text="{Binding Title}"
                               TextAlignment="Center"
                               FontWeight="Bold"
                               FontSize="14" />
                    <TextBlock Text="{Binding Description}"
                               TextAlignment="Center"
                               FontSize="12"
                               TextWrapping="Wrap"
                               Margin="5" />
                </StackPanel>
            </Border>
        </DataTemplate>
    </kanban:SfKanban.CardTemplate>
</kanban:SfKanban>
this.kanban.ItemsSource = new ViewModel().TaskDetails;
this.kanban.ColumnMappingPath = "Status";
public class TaskDetails
{
    public string Title { get; set; }
    public string Description { get; set; }
    public object Status { get; set; }
}
public class ViewModel
{
    public ObservableCollection<TaskDetails> TaskDetails { get; set; }
    public ViewModel()
    {
        this.TaskDetails = this.GetTaskDetails();
    }

    private ObservableCollection<TaskDetails> GetTaskDetails()
    {
        var taskDetails = new ObservableCollection<TaskDetails>();

        TaskDetails taskDetail = new TaskDetails();
        taskDetail.Title = "UWP Issue";
        taskDetail.Description = "Crosshair label template not visible in UWP";
        taskDetail.Status = "Open";

        taskDetails.Add(taskDetail);

        taskDetail = new TaskDetails();
        taskDetail.Title = "WinUI Issue";
        taskDetail.Description = "AxisLabel cropped when rotating the axis label";
        taskDetail.Status = "Open";

        taskDetails.Add(taskDetail);

        taskDetail = new TaskDetails();
        taskDetail.Title = "Kanban Feature";
        taskDetail.Description = "Provide drag and drop support";
        taskDetail.Status = "In Progress";

        taskDetails.Add(taskDetail);

        taskDetail = new TaskDetails();
        taskDetail.Title = "New Feature";
        taskDetail.Description = "ragging events support for Kanban";
        taskDetail.Status = "In Progress";

        taskDetails.Add(taskDetail);

        taskDetail = new TaskDetails();
        taskDetail.Title = "WF Issue";
        taskDetail.Description = "HorizontalAlignment for tooltip is not working";
        taskDetail.Status = "Done";

        taskDetails.Add(taskDetail);

        return taskDetails;
    }
}

defining-columns-using-custom-model-in-winui-kanban

NOTE

When manually defining columns, ensure the AutoGenerateColumns property of SfKanban is set to false.

When using a custom data model, the default card UI is not applicable. You must define a custom DataTemplate using the CardTemplate property to render the card content appropriately.

Theme

The WinUI Kanban supports light and dark themes, automatically adjusting to the system’s theme settings for a consistent and visually appealing experience in any environment.

Refer to the following link for guidance on applying themes: Themes for Syncfusion WinUI controls

You can find the kanban keys for all themes in this theme resource file.

theming-in-winui-kanban

Localization

The WinUI Kanban control supports the localization of all static default strings, allowing you to translate them into any supported language. For detailed instructions on how to localize the default strings, refer to the following link: Localization in WinUI controls.

localization-support-in-winui-kanban

Right to Left (RTL)

The WinUI Kanban control supports RTL (Right-to-Left) rendering, allowing both text and the control’s layout to be displayed from right to left. For more information on how to enable RTL rendering, please refer to the following link: Right to left in WinUI controls.

right-to-left-support-in-winui-kanban

NOTE

You can refer to our WinUI Kanban feature tour page for its groundbreaking feature representations. You can also explore our WinUI Kanban Examples that shows you how to render the Kanban in WinUI.