Skip to main content

Overview

FlowKanban is a high-level container component for building interactive Kanban boards. It provides a modern, industrial interface with specialized layout zones and comprehensive task management capabilities.
The Kanban system spans multiple partial classes for modularity: FlowKanban.cs (core), FlowKanban.Dialogs.cs (modals), FlowKanban.Drop.cs (drag & drop), FlowKanban.Home.cs (multi-board navigation), and FlowKanban.UI.cs (sizing and scrolling).

Quick Start

Basic Kanban Board

<kanban:FlowKanban x:Name="ProjectBoard" />
Simply dropping the control into a page provides a fully functional board with:
  • Column and task management
  • Drag & drop reordering
  • Built-in dialogs for editing
  • Auto-save and persistence
  • Undo/redo support

Programmatic Setup

Bind to an existing data structure in your ViewModel:
<kanban:FlowKanban Board="{x:Bind ViewModel.MyGlobalBoard}" />

Key Features

Column Management

Columns represent workflow phases (e.g., “To Do”, “In Progress”, “Done”). Users can add, remove, rename, and reorder columns through the UI or programmatically.
Set per-column limits with automatic enforcement and visual warnings. Columns display their current count and WIP limit, with visual indicators when limits are exceeded.
Define Definition of Done (DoD) or Entry criteria for each column using the policy field.

Task Management

  • Create and delete tasks within individual columns
  • Drag & drop to move tasks between columns or reorder within a column
  • Multi-select for bulk operations (move, archive, delete)
  • Blocked state - mark tasks as blocked with reasons and duration tracking
    • Blocked tasks cannot move forward to later columns or be archived
    • Progress is capped at 99% until unblocked
  • Subtasks with completion tracking
  • Priority badges (non-normal priority displayed)
  • Progress badges (>0% displayed)
  • Archive - move completed tasks to an archive column

Swimlanes

1

Enable swimlanes

Toggle swimlanes in board properties dialog. Set Board.GroupBy to Lane.
2

Create lanes

Add lanes in the board editor dialog. Each lane gets a unique ID and title.
3

Assign tasks to lanes

Drag tasks into lane rows or edit task properties to set the lane.
4

Unassigned lane

Legacy lane IDs (0, null, or unknown) surface in an auto-created “Unassigned” swimlane row.
Lane Management:
  • Create, reorder, and delete lanes in board properties
  • Fallback lane selection on delete (reassigns tasks to another lane)
  • Lane-aware drag & drop (dropping into a lane cell updates the task’s LaneId)

Undo/Redo

Command history for card operations with bounded stack (50 entries).Recorded operations:
  • Move card, add card, delete card
  • Edit title/description/palette
  • Block/unblock, archive/unarchive
  • Bulk flows (one command per task)
Not recorded:
  • Priority/tags/due date edits
  • Column operations
  • Board settings, zoom, selection

Multi-Board Management

FlowKanban now supports multiple boards! Use the Home screen to navigate between boards, create new ones, and manage your board library.
The Home screen (FlowKanbanHome) provides:
  • Responsive grid of boards with thumbnails
  • Search bar for filtering boards by name
  • Sort options (modification date, title)
  • Board actions: rename, duplicate, delete, export
  • Create Board action in toolbar
Navigate to Home via the sidebar button.

Layout Zones

Main Board Area (Left/Center)

The core workspace uses a ScrollViewer for horizontal navigation between columns. Each column is a vertical stack of FlowTaskCard controls.

Swimlane Grid (When Enabled)

The swimlane layout renders a fixed header row for columns and a row per lane. Each lane row contains a column cell with lane filtering applied, enabling true matrix-style boards.

Utility Sidebar (Right)

A space-efficient vertical bar (56px wide) containing square DaisyButton controls for board-level management:
  • Home
  • Settings
  • Undo/Redo
  • Zoom In/Out
  • Save/Load
  • Metrics/Help

Dialogs

FlowTaskEditorDialog

A full-featured modal for editing FlowTask objects. Uses DaisyCollapse sections:
Title, description, palette color, subtasks
Due date, start date, reminder
Story points, estimated hours, priority, progress
Assignee field
var saved = await FlowTaskEditorDialog.ShowAsync(task, control.XamlRoot);

FlowBoardEditorDialog

Edits board-level properties:
  • Title, description, created by
  • Read-only metadata (created date, board ID)
  • Swimlane enablement
  • Full lane management (add, reorder, delete with fallback reassignment)
var saved = await FlowBoardEditorDialog.ShowAsync(board, control.XamlRoot);

FlowKanbanSettingsDialog

Configures Kanban instance settings. User-scoped preferences are persisted per user.
SettingDescription
Confirm column removalsRequire confirmation before deleting a column
Confirm card removalsRequire confirmation before deleting a card
Auto-Save after editsAuto-save board after any edit
Auto-expand card detailsExpand card details in the editor by default
Enable undo/redoToggles command history and undo/redo UI
Display Add CardPlacement (Bottom/Top/Both)
Show archive columnShows or hides the archive column
Show welcome messageToggle the Home welcome panel
await FlowKanbanSettingsDialog.ShowAsync(kanban, control.XamlRoot);

Persistence

Persistence is handled via StateStorageProvider and stores data in the same application settings location as other .state files.
  • User settings: kanban.user.settings.<userId> (with fallback to legacy kanban.settings)
  • Board files: kanban.board.<id> (one entry per board ID)
  • Global admin: kanban.admin.global (bootstrap admin ID)

FlowKanbanManager API

FlowKanbanManager provides a full programmatic API for managing a FlowKanban board.

Initialization

var manager = new FlowKanbanManager(myKanbanControl);

Column Management

// Add columns
manager.AddColumn("Backlog");
manager.InsertColumn("Review", 2);

// Find and modify
var col = manager.FindColumnByTitle("In Progress");
manager.RenameColumn(col, "Active");
manager.SetColumnWipLimit(col, 5);

// Remove
manager.RemoveColumn(col);
manager.RemoveColumnByTitle("Done");

Task Management

// Add tasks
var backlog = manager.FindColumnByTitle("Backlog");
manager.AddTask(backlog, "Implement auth", "OAuth2 integration", DaisyPalette.Primary);

// Find and move
var task = manager.FindTaskById("task-123");
var inProgress = manager.FindColumnByTitle("In Progress");
manager.MoveTask(task, inProgress);

// Update
manager.UpdateTask(task, title: "Implement OAuth2 auth", priority: FlowTaskPriority.High);

// Remove
manager.RemoveTask(task);

WIP & Policy Management

// Set WIP limit
manager.SetColumnWipLimit(col, 3);

// Check violations
if (manager.IsWipExceeded(col))
{
    var violations = manager.GetOverWipColumns();
}

// Set policy
manager.SetColumnPolicy(col, "Code reviewed and tested");

Blocked & Archive State

// Block tasks
manager.SetBlocked(task, "Waiting for API access");
var blockedTasks = manager.GetBlockedTasks();
manager.ClearBlocked(task);

// Archive
manager.ArchiveTask(task);
manager.ArchiveCompletedTasks(col); // Archive all 100% progress tasks
manager.PurgeArchivedTasks(); // Permanently delete archived cards

Lane Operations (Swimlanes)

// Add lanes
manager.AddLane("Frontend");
manager.InsertLane("Backend", 1);

// Assign tasks
var lane = manager.Lanes[0];
manager.SetTaskLane(task, lane);

// Query
var frontendTasks = manager.GetTasksForLane(lane);

// Remove
var fallbackLane = manager.Lanes[0];
manager.RemoveLane(lane, fallbackLane);

Selection & Bulk Operations

// Select tasks
manager.SelectTask(task1);
manager.SelectTask(task2);

// Bulk operations
manager.BulkMove(targetColumn);
manager.BulkSetPriority(FlowTaskPriority.High);
manager.BulkSetBlocked(true, "Team capacity");
manager.BulkArchive();
manager.BulkDelete();

// Clear selection
manager.DeselectAll();

Board Operations

// Create default board
manager.CreateDefaultBoard(); // Creates "To Do", "In Progress", "Done"

// Custom reset
manager.ResetBoard(new[] { "Backlog", "Active", "Review", "Done" });

// Export/Import
var json = manager.ExportToJson();
manager.ImportFromJson(json);

// Statistics
var stats = manager.GetStatistics();
Console.WriteLine($"Columns: {stats.ColumnCount}, Tasks: {stats.TotalTaskCount}");
foreach (var (column, count) in stats.TasksPerColumn)
{
    Console.WriteLine($"{column}: {count} tasks");
}

Zoom & Size

manager.ZoomIn();
manager.ZoomOut();
manager.SetZoom(DaisySize.Large);

if (manager.CanZoomIn)
    manager.ZoomIn();

Complete Example

var manager = new FlowKanbanManager(ProjectBoard);

// Create structure
manager.CreateDefaultBoard();

// Add swimlanes
manager.AddLane("Frontend");
manager.AddLane("Backend");

// Add tasks
var backlog = manager.FindColumnByTitle("To Do");
var authTask = manager.AddTask(backlog, "Implement auth", "OAuth2 integration", DaisyPalette.Primary);
manager.SetTaskLane(authTask, manager.Lanes[1]); // Backend lane

// Set WIP limits
var inProgress = manager.FindColumnByTitle("In Progress");
manager.SetColumnWipLimit(inProgress, 3);

// Move task
manager.MoveTask(authTask, inProgress);

// Block if over WIP
if (manager.IsWipExceeded(inProgress))
{
    manager.SetBlocked(authTask, "Team at capacity");
}

// Export for backup
var json = manager.ExportToJson();
File.WriteAllText("board-backup.json", json);

Properties

PropertyTypeDescription
BoardFlowKanbanDataThe root data model containing the columns and tasks
BoardStoreIBoardStorePersistence backend for boards (default JSON store)
BoardSizeDaisySizeCurrent size tier for board controls
ConfirmColumnRemovalsboolRequire confirmation before deleting a column
ConfirmCardRemovalsboolRequire confirmation before deleting a card
AutoSaveAfterEditsboolAuto-save board after edits
AddCardPlacementFlowKanbanAddCardPlacementInline add card placement (Bottom/Top/Both)
EnableUndoRedoboolEnables undo/redo command history
CommandHistoryFlowKanbanCommandHistoryUndo/redo stack manager
IsStatusBarVisibleboolControls visibility of the status bar
IsSwimlaneLayoutEnabledboolTrue when Board.GroupBy is set to Lane and lanes exist
UserProviderIUserProviderUser provider for identity resolution (defaults to LocalUserProvider)

Commands

CommandParameterAction
AddColumnCommandNoneAppends a new column to the board
RemoveColumnCommandFlowKanbanColumnDataRemoves the specified column
EditColumnCommandFlowKanbanColumnDataOpens the column editor dialog
AddCardCommandFlowKanbanColumnDataAdds a new task to the specified column
RemoveCardCommandFlowTaskRemoves the specific task
EditCardCommandFlowTaskOpens the task editor dialog
UndoCommandNoneUndoes the last command
RedoCommandNoneRedoes the last undone command
SaveCommandNoneSerializes the current board
LoadCommandNoneDeserializes the last saved board
SettingsCommandNoneOpens Kanban settings dialog
EditBoardCommandNoneOpens board properties dialog
ZoomInCommandNoneIncreases board size tier
ZoomOutCommandNoneDecreases board size tier

Best Practices

The FlowKanbanManager provides a safer, more convenient API than manipulating the Board data model directly.
Set AutoSaveAfterEdits = true to automatically persist changes after edits.
WIP limits help teams manage capacity and highlight bottlenecks.
Lanes are ideal for tracking by team, priority, feature area, or any other dimension.
Use manager.ExportToJson() to create backups or migrate boards between environments.

Build docs developers (and LLMs) love