Skip to main content

​
Overview

FlowKanban is a high-level WinUI/Uno container component for building interactive Kanban boards. It manages columns, tasks, swimlanes, and provides a modern industrial interface with a horizontally scrollable main board area and a vertical utility sidebar for board-level actions. Namespace: Flowery.Uno.Kanban.Controls
Assembly: Flowery.Uno.Kanban.dll

​
Key Features

  • Column & Task Management: Add, remove, and reorder columns and tasks dynamically
  • Swimlanes: Matrix-style grouping with lane-aware drag & drop
  • WIP Limits: Per-column and per-lane limits with visual warnings
  • Multi-Board Management: Navigate between multiple boards via Home screen
  • Undo/Redo: Command history for reversible operations
  • Multi-Select: Bulk operations (move, archive, delete, priority)
  • Blocked State: Mark tasks as blocked to prevent forward movement
  • JSON Persistence: Atomic save strategy with schema migration
  • Done Aging: Auto-archive tasks that remain in Done column beyond threshold
  • Search & Filter: Real-time task filtering across board

​
Basic Usage

​
Minimal Setup

<kanban:FlowKanban x:Name="ProjectBoard" />

​
Programmatic Binding

<kanban:FlowKanban Board="{x:Bind ViewModel.BoardData}" />

​
With Manager

var manager = new FlowKanbanManager(ProjectBoard);
manager.CreateDefaultBoard();
manager.AddTask(manager.FindColumnByTitle("Backlog"), "Implement OAuth");

​
Core Properties

​
Board Data

​
Board
FlowKanbanData
default:"new FlowKanbanData()"
Root data model containing columns, tasks, lanes, and board metadata. Setting this property replaces the entire board.
​
BoardStore
IBoardStore
Persistence backend for boards. Default is FlowKanbanBoardStore using JSON storage. Swap to implement custom persistence (database, cloud).
​
LastBoardId
string?
Last board ID loaded or saved via persistence. Used for automatic board restoration on initialization.

​
Behavior Configuration

​
ConfirmColumnRemovals
bool
default:"true"
Require confirmation dialog before deleting columns. Stored in user settings.
​
ConfirmCardRemovals
bool
default:"true"
Require confirmation dialog before deleting tasks. Stored in user settings.
​
AutoSaveAfterEdits
bool
default:"true"
Automatically save board to persistent storage after any edit (debounced 800ms). Stored in user settings.
​
AutoExpandCardDetails
bool
default:"true"
Expand all sections in task editor dialog by default. Stored in user settings.
​
AddCardPlacement
FlowKanbanAddCardPlacement
default:"Bottom"
Controls where inline “Add Card” control appears in columns: Bottom, Top, or Both. Stored in user settings.

​
Undo/Redo

​
EnableUndoRedo
bool
default:"false"
Enables command history for undo/redo operations. When enabled, supports up to 50 undoable commands. Stored in user settings.
​
CommandHistory
FlowKanbanCommandHistory
Undo/redo stack manager. Provides CanUndo, CanRedo, NextUndoDescription, and NextRedoDescription properties.

​
Layout & Sizing

​
BoardSize
DaisySize
default:"Medium"
Current size tier for board controls. Affects card font size, spacing, and column width. Values: ExtraSmall, Small, Medium, Large, ExtraLarge.
​
ColumnWidth
double
default:"280"
Width in pixels for each column. Constrained between MinColumnWidth (100) and MaxColumnWidth (380).
​
IsStatusBarVisible
bool
default:"true"
Controls visibility of the status bar at the bottom of the board. Persisted in user settings.

​
Swimlanes

​
IsSwimlaneLayoutEnabled
bool
True when Board.GroupBy is set to Lane and lanes exist. Triggers matrix-style swimlane grid layout.
​
IsStandardLayoutEnabled
bool
True when swimlanes are disabled or no lanes exist. Triggers standard columnar layout.
​
LaneRows
ObservableCollection<FlowKanbanLaneRowView>
Lane row view models used by the swimlane grid template. Auto-populated when swimlanes are enabled.

​
Selection

​
HasSelection
bool
True when one or more tasks are selected. Used to enable bulk operation commands.
​
SelectedCount
int
Count of currently selected tasks.
​
SelectedBulkMoveColumn
FlowKanbanColumnData?
Target column for bulk move operations. Bind to ComboBox for bulk move UI.

​
Search & Filter

​
SearchText
string
default:""
Search text used to filter task cards. Matches against task title, description, and tags.

​
Commands

​
Column Operations

​
AddColumnCommand
ICommand
Appends a new column to the board. Shows input dialog for column title.
​
RemoveColumnCommand
ICommand
Parameter: FlowKanbanColumnData
Removes the specified column. Shows confirmation dialog if ConfirmColumnRemovals is true.
​
EditColumnCommand
ICommand
Parameter: FlowKanbanColumnData
Opens the column editor dialog for the specified column.
​
ToggleColumnCollapseCommand
ICommand
Parameter: FlowKanbanColumnData
Toggles the collapsed/expanded state of a column.

​
Task Operations

​
AddCardCommand
ICommand
Parameter: FlowKanbanColumnData
Adds a new task to the specified column. Opens task editor dialog.
​
QuickAddCardCommand
ICommand
Creates a new card in the active column using inline add control.
​
RemoveCardCommand
ICommand
Parameter: FlowTask
Removes the specific task. Shows confirmation dialog if ConfirmCardRemovals is true.
​
EditCardCommand
ICommand
Parameter: FlowTask
Opens the task editor dialog for the specified task.

​
Undo/Redo

​
UndoCommand
ICommand
Undoes the last operation. Enabled when EnableUndoRedo is true and CommandHistory.CanUndo is true.
​
RedoCommand
ICommand
Redoes the last undone operation. Enabled when EnableUndoRedo is true and CommandHistory.CanRedo is true.

​
Bulk Operations

​
BulkMoveCommand
ICommand
Parameter: FlowKanbanColumnData?
Moves all selected tasks to the specified column. Raises CardMoving and CardMoved events.
​
BulkSetPriorityCommand
ICommand
Parameter: string? (priority value)
Sets priority for all selected tasks. Values: Low, Normal, High, Critical.
​
BulkSetTagsCommand
ICommand
Parameter: string? (comma-separated tags)
Sets tags for all selected tasks.
​
BulkSetDueDateCommand
ICommand
Parameter: DateTimeOffset?
Sets due date for all selected tasks. Null clears the due date.
​
BulkArchiveCommand
ICommand
Archives all selected tasks. Shows confirmation dialog before executing.
​
BulkDeleteCommand
ICommand
Permanently deletes all selected tasks. Shows confirmation dialog before executing.
​
ClearSelectionCommand
ICommand
Deselects all tasks.

​
Persistence

​
SaveCommand
ICommand
Serializes the current board to app state storage using the board ID as key.
​
LoadCommand
ICommand
Deserializes the most recently saved board from app state storage.
​
SaveToFileCommand
ICommand
Exports board to JSON file using file picker (Windows only).
​
LoadFromFileCommand
ICommand
Imports board from JSON file using file picker (Windows only).

​
Board Management

​
EditBoardCommand
ICommand
Opens the board properties dialog (title, description, lanes).
​
RenameBoardCommand
ICommand
Opens inline rename dialog for the board title.
​
ShowHomeCommand
ICommand
Navigates to the Home screen for multi-board management.
​
OpenBoardCommand
ICommand
Parameter: FlowBoardMetadata
Opens the specified board from the Home screen.
​
CreateBoardCommand
ICommand
Creates a new blank board from the Home screen.
​
CreateDemoBoardCommand
ICommand
Creates a demo board with sample data for testing.

​
View Controls

​
SettingsCommand
ICommand
Opens the Kanban settings dialog.
​
ZoomInCommand
ICommand
Increases board size tier (enlarges cards).
​
ZoomOutCommand
ICommand
Decreases board size tier (shrinks cards).
​
ToggleStatusBarCommand
ICommand
Toggles the status bar visibility.
​
ToggleArchiveColumnVisibilityCommand
ICommand
Shows or hides the archive column for the current board.
​
ShowKeyboardHelpCommand
ICommand
Opens the keyboard shortcuts help dialog.
​
ShowMetricsCommand
ICommand
Opens the board metrics/statistics dialog.
​
ShowUserManagementCommand
ICommand
Opens the user management panel (when enabled).

​
Events

​
BoardSizeChanged
EventHandler<DaisySize>
Raised when the board size tier changes (via zoom).
​
ColumnWidthChanged
EventHandler<double>
Raised when the column width changes.
​
CompactLayoutChanged
EventHandler<bool>
Raised when the Kanban switches between compact and standard layouts.
​
DragEnded
EventHandler
Raised when a drag operation ends (completed or cancelled). Columns should clean up drop indicators.
​
CardMoving
EventHandler<CardMovingEventArgs>
Raised before a card is moved. Handlers can cancel the move by setting Cancel = true on the event args.CardMovingEventArgs Properties:
  • Task: FlowTask - The task being moved
  • SourceColumn: FlowKanbanColumnData - Origin column
  • TargetColumn: FlowKanbanColumnData - Destination column
  • TargetIndex: int - Index in target column
  • TargetLaneId: string? - Lane ID after move
  • TargetWipCount: int - WIP count after move
  • TargetWipLimit: int? - WIP limit for target
  • WouldExceedWip: bool - True if move exceeds WIP
  • Cancel: bool - Set to true to prevent move
  • CancelReason: string? - Message to display if cancelled
​
CardMoved
EventHandler<CardMovedEventArgs>
Raised after a card has been moved to a new location.CardMovedEventArgs Properties:
  • Task: FlowTask - The moved task
  • SourceColumn: FlowKanbanColumnData - Origin column
  • TargetColumn: FlowKanbanColumnData - Destination column
​
CardEdited
EventHandler<FlowTask>
Raised when a card’s properties are edited via the task editor dialog.
​
ColumnEdited
EventHandler<FlowKanbanColumnData>
Raised when a column’s properties are edited.
​
BoardEdited
EventHandler<BoardEditedEventArgs>
Raised when board-level properties are edited (title, description, lanes).
​
LaneGroupingChanged
EventHandler
Raised when lane grouping or lane definitions change (enables/disables swimlanes).
​
SearchFilterChanged
EventHandler
Raised when the search filter changes (text or task match state).

​
Board Data Model

​
FlowKanbanData

The root data model representing the entire board.
​
Id
string
Unique board identifier. Auto-generated GUID if not set.
​
Title
string
default:"Kanban Board"
Board title displayed in header and Home screen.
​
Description
string?
Optional board description.
​
Columns
ObservableCollection<FlowKanbanColumnData>
All columns in the board. Add/remove columns to modify board structure.
​
Lanes
ObservableCollection<FlowKanbanLane>
Swimlane definitions. When non-empty and GroupBy is Lane, enables swimlane layout.
​
GroupBy
FlowKanbanGroupBy
default:"None"
View-only grouping mode: None (standard columns) or Lane (swimlane matrix).
​
ArchiveColumnId
string?
ID of the designated archive column. Tasks moved here are flagged as archived.
​
IsArchiveColumnHidden
bool
default:"false"
When true, hides the archive column from view.
​
DoneColumnId
string?
ID of the designated Done column. Tasks moved here receive CompletedAt timestamp.
​
AutoArchiveDoneEnabled
bool
default:"false"
When true, automatically archives Done tasks older than AutoArchiveDoneDays.
​
AutoArchiveDoneDays
int
default:"30"
Number of days a task can remain in Done before auto-archiving (when enabled).
​
CreatedDate
DateTime
Board creation timestamp.
​
CreatedBy
string?
User who created the board.

​
Persistence

​
Storage Architecture

FlowKanban uses StateStorageProvider for JSON persistence:
  • User settings: kanban.user.settings.<userId> (confirmation prompts, auto-save, undo/redo, status bar)
  • Board files: kanban.board.<boardId> (one entry per board)
  • Global admin: kanban.admin.global (bootstrap admin ID)

​
IBoardStore Interface

Swappable persistence backend. Default implementation is FlowKanbanBoardStore. 
public interface IBoardStore
{
    bool TrySaveBoard(FlowKanbanData board, out Exception? error);
    bool TryLoadBoard(string boardId, out FlowKanbanData? data, out Exception? error);
    bool TryDeleteBoard(string boardId, out Exception? error);
    IReadOnlyList<FlowBoardMetadata> ListAvailableBoards();
}

​
Safe Persistence API

​
TrySaveBoard(out error)
bool
Saves the current board to storage. Returns false if an exception occurs.
​
TryLoadLastBoard(out error)
bool
Loads the last saved board (by LastBoardId). Returns false if not found or error occurs.
​
TryLoadBoard(boardId, out error)
bool
Loads a specific board by ID. Returns false if not found or error occurs.
​
TrySaveSettings(out error)
bool
Saves current user settings to storage. Returns false if an exception occurs.
​
TryLoadSettings(forceReload, out error)
bool
Loads user settings from storage. Returns false if an exception occurs.
​
TryRenameBoard(boardId, newTitle, out error)
bool
Renames a stored board without loading it. Returns false if not found or error occurs.
​
TryDeleteBoard(boardId, out error)
bool
Deletes a stored board by ID. Returns false if not found or error occurs.
​
TryDuplicateBoard(boardId, out newBoardId, out error)
bool
Duplicates a stored board. Returns false if source not found or error occurs.
​
TryExportBoard(boardId, out json, out error)
bool
Exports a board to JSON string without loading it. Returns false if not found or error occurs.

​
Atomic Save Strategy

Boards are saved using a temp-file rename strategy for power-loss safety:
  1. Serialize to <key>.tmp
  2. Rename to <key>
  3. Delete temp file
This ensures partial writes never corrupt the stored board.

​
Schema Migration

Boards are automatically upgraded via FlowKanbanMigration on load. Legacy formats are converted to the latest schema transparently.

​
Keyboard Shortcuts

ShortcutAction
Ctrl + BAdd column
Ctrl + DDelete last column
Ctrl + TRename active column
Ctrl + NCreate card in active column
Ctrl + +Zoom in
Ctrl + -Zoom out
Ctrl + ZUndo (when enabled)
Ctrl + YRedo (when enabled)
Ctrl + Alt + Left/RightSwitch active column

​
Undo/Redo Behavior

​
Recorded Operations

  • Move card
  • Add card
  • Delete card
  • Edit title/description/palette
  • Block/unblock
  • Archive/unarchive (including bulk flows)

​
NOT Recorded

  • Priority/tags/due date edits
  • Column operations
  • Board settings
  • Zoom
  • Selection
  • Search/sort changes

​
Rules

  • History size: 50 commands (configurable via FlowKanbanCommandHistory.MaxHistorySize)
  • Redo invalidation: Executing a new command clears the redo stack
  • Toggle behavior: When EnableUndoRedo is false, commands execute immediately without history

​
Swimlanes (Advanced)

​
Enabling Swimlanes

var manager = new FlowKanbanManager(kanban);
manager.AddLane("Frontend");
manager.AddLane("Backend");
manager.AddLane("DevOps");
kanban.Board.GroupBy = FlowKanbanGroupBy.Lane;

​
Lane Properties

​
Id
string
Unique lane identifier (auto-generated GUID).
​
Title
string
Lane display name shown in row header.
​
Color
DaisyColor
default:"Default"
Optional color for lane row header.

​
Lane-Aware Drag & Drop

When dropping a task into a lane cell:
  • Task’s LaneId is updated to match the target lane
  • WIP limits can be set per-lane (overrides column-level limit)
  • Unassigned tasks (legacy LaneId = null or "0") appear in “Unassigned” lane

​
Lane WIP Limits

var manager = new FlowKanbanManager(kanban);
var inProgress = manager.FindColumnByTitle("In Progress");

// Set column-level WIP limit
manager.SetColumnWipLimit(inProgress, 10);

// Set lane-specific WIP limit (overrides column limit for that lane)
var frontendLane = manager.FindLaneByTitle("Frontend");
manager.SetLaneWipLimit(inProgress, frontendLane.Id, 5);

​
Best Practices

​
When to Use FlowKanban

✅ Use FlowKanban when you need:
  • A complete Kanban board UI with minimal setup
  • Multi-board management with Home screen
  • Built-in persistence and undo/redo
  • Swimlane support
  • User settings and preferences
❌ Use FlowKanbanManager when you need:
  • Programmatic board manipulation without UI
  • Custom UI with Kanban logic
  • Server-side board processing
  • Headless testing

​
Performance Considerations

  • Large boards: Consider enabling archive column and auto-archive for Done tasks
  • Swimlanes: Performance degrades with >20 lanes or >500 tasks per lane
  • Search: Debounced 300ms to avoid re-filtering on every keystroke
  • Auto-save: Debounced 800ms to batch rapid edits

​
Accessibility

  • All buttons expose AutomationProperties.Name for screen readers
  • Cards expose AutomationProperties.AutomationId via task ID
  • Tab navigation works across header, board, and sidebar
  • Arrow-key navigation planned for future release
  • FlowKanbanManager - Programmatic API
  • FlowKanbanHome - Multi-board home screen
  • FlowKanbanColumn - Individual column control
  • FlowTaskCard - Individual task card control
  • FlowTaskEditorDialog - Task editing modal
  • FlowBoardEditorDialog - Board properties modal
  • FlowKanbanSettingsDialog - Settings modal

Build docs developers (and LLMs) love

Get started for freeTalk to us