Column in .NET MAUI Kanban Board (SfKanban)

Customizing Column Size

By default, columns are sized smartly to arrange the default elements of the cards with better readability. However, you can define the minimum and maximum width for the columns in SfKanban using MinimumColumnWidth and MaximumColumnWidth properties respectively.

<kanban:SfKanban MinimumColumnWidth ="300" MaximumColumnWidth ="340">
</kanban:SfKanban>
kanban.MinimumColumnWidth = 300;
kanban.MaximumColumnWidth = 340;

You can also define the exact column width using ColumnWidth property of SfKanban.

<kanban:SfKanban ColumnWidth ="250">
</kanban:SfKanban>
kanban.ColumnWidth = 250;

Categorizing Columns

To categorize columns based on a specific property, you must explicitly define the property path using the ColumnMappingPath property. However, only the properties of KanbanModel can be assigned to ColumnMappingPath. By default, SfKanban will categorize the items using the Category property of KanbanModel.

<kanban:SfKanban ColumnMappingPath="ID">
</kanban:SfKanban>
kanban.ColumnMappingPath = "ID";

Category for a column

You can assign a specific category to a column by setting the Categories property of the KanbanColumn. This will display cards with the specified category under the corresponding column. For example, to map the In Progress category to the In Progress column

<kanban:KanbanColumn x:Name="progressColumn" Categories="In Progress" />
progressColumn.Categories = new List<object>() { "In Progress" };

Headers

Header shows the category Title, Items count, Min and Max informations of a column. The UI of the header can be replaced entirely using HeaderTemplate property of SfKanban. The following code snippet and screenshot illustrates this.

<kanban:SfKanban.HeaderTemplate >
    <DataTemplate>
        <StackLayout WidthRequest="300" HeightRequest="40"  BackgroundColor="Silver">
            <Label Margin="10" Text="{Binding Title}" TextColor="Purple" HorizontalOptions="Start" />
        </StackLayout>
    </DataTemplate>
</kanban:SfKanban.HeaderTemplate>
var headerTemplate = new DataTemplate(() => 
{
    StackLayout root = new StackLayout()
    { 
        WidthRequest = 300, 
        HeightRequest = 40, 
        BackgroundColor = Color.Silver 
    };
    Label label = new Label();
    label.Margin = new Thickness(10); 
    label.SetBinding(Label.TextProperty, new Binding("Title") );
    label.TextColor = Color.Purple;
    label.HorizontalOptions = LayoutOptions.Start; 
    root.Children.Add(label);
    return root;
});
kanban.HeaderTemplate = headerTemplate;

Expand/Collapse Column

Columns can be expanded/collapsed by tapping the toggle button which is placed at top right corner of the Kanban header. IsExpanded property of KanbanColumn is used to programmatically expand/collapse the Kanban column. The following code example describes the above behavior.

<kanban:SfKanban.Columns>
    <kanban:KanbanColumn x:Name="column1" Title="To Do" IsExpanded="false" />
    <kanban:KanbanColumn x:Name="column2" Title="In Progress" IsExpanded="false" />
</kanban:SfKanban.Columns>
KanbanColumn column1 = new KanbanColumn();
column1.IsExpanded = false; 
KanbanColumn column2 = new KanbanColumn();
column2.IsExpanded = false;

kanban.Columns.Add(column1);
kanban.Columns.Add(column2);

Enable/Disable Drag & Drop

You can enable and disable the drag and drop operation of the cards for particular column using AllowDrag and AllowDrop properties of KanbanColumn.

The following code is used to disable the drag operation from progress column.

<kanban:SfKanban.Columns>
    <kanban:KanbanColumn AllowDrag="false"/>
</kanban:SfKanban.Columns>
KanbanColumn progressColumn = new KanbanColumn();
progressColumn.AllowDrag = false;

The following code is used to disable the drop operation of the cards into the progress column.

<kanban:SfKanban.Columns>
    <kanban:KanbanColumn AllowDrop="false"/>
</kanban:SfKanban.Columns>
KanbanColumn progressColumn = new KanbanColumn();
progressColumn.AllowDrop = false;

Items Count

ItemsCount property is used to get the total cards count in each column.

  • C#
    • int count = todoColumn.ItemsCount;

    Work In-Progress Limit

    MinimumLimit and MaximumLimit properties are used to define the minimum and maximum number of items in a column. If the actual items count is exceeded or lesser than the specified limits, the error bars are used to indicate this violation. Following properties of ErrorBarSettings are used to customize the appearance of error bar.

    • Fill, of type Brush, used to change the default color of the error bar.
    • MaxValidationFill, of type Brush, used to change the maximum validation color of the error bar.
    • MinValidationFill, of type Brush, used to change the minimum validation color of the error bar.
    • Height,of type double, used to change the height of the error bar.
    <kanban:KanbanColumn x:Name="todoColumn" Title="To Do" MinimumLimit="2" MaximumLimit="1">
</kanban:KanbanColumn>
    todoColumn.MinimumLimit = 2; 
todoColumn.MaximumLimit = 1;
    <kanban:KanbanColumn x:Name="todoColumn" Title="To Do" MinimumLimit="3" MaximumLimit="5">
    <kanban:KanbanColumn.ErrorBarSettings>
        <kanban:KanbanErrorBarSettings Fill="Green" MinValidationFill="Orange" MaxValidationFill="Red" Height="4"/>
    </kanban:KanbanColumn.ErrorBarSettings>
</kanban:KanbanColumn>
    KanbanColumn todoColumn = new KanbanColumn();
todoColumn.Title = "To Do";
todoColumn.MaximumLimit = 5;
todoColumn.MinimumLimit = 3;
KanbanErrorBarSettings kanbanErrorBarSettings = new KanbanErrorBarSettings()
{
    Fill = Colors.Green,
    MaxValidationFill = Colors.Red,
    MinValidationFill = Colors.Orange,
    Height = 4,
};
todoColumn.ErrorBarSettings = kanbanErrorBarSettings;
kanban.Columns.Add(todoColumn);