syncfusion-maui-kanban-board について
Syncfusion の SfKanban を実装する .NET MAUI 開発者向けガイドです。ドラッグ&ドロップ、WIP 制限、遷移ルール、データバインディング、カードや列のカスタマイズを扱います。
主な機能
- 01列でワークフローを可視化
- 02カード操作とイベント処理
- 03WIP 制限の設定
- 04カードと列のテンプレート編集
- 05状態遷移の検証
- 06並べ替えとローカライズ
活用シーン
- 01アジャイルのスプリントボード作成
- 02列ごとの進行中タスク数の制限
- 03状態間のカード移動の制御
- 04多言語タスク画面のカスタマイズ
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-kanban-boardインストール後、Claude Code で/syncfusion-maui-kanban-boardを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/advanced-features.mdcards.mdcolumns.mdcustomization.mddata-binding.mdevents.mdgetting-started.mdsorting.mdworkflows.md詳細
.NET MAUI でのカンバンボードの実装
このスキルを使用する場面
以下のニーズがある場合に、このスキルを使用してください。
- .NET MAUI アプリケーションでタスク管理用のカンバンボードを実装する
- 完了状況の異なる段階(未着手、進行中、完了など)でワークフローを可視化する
- スプリント計画やタスク追跡用のアジャイルボードを作成する
- 列をまたいで項目を整理、管理するカードベースのインターフェースを構築する
- ワークフローの段階間でタスクを移動するためのドラッグ&ドロップ機能を追加する
- 列にWIP 制限(仕掛中の作業)を実装する
- カードの移動に制限を設けてワークフローの遷移を構成する
- カスタムデータモデルやビジュアルデザインを使用してカードテンプレートをカスタマイズする
- タスクのカテゴリ分けとステータスインジケーターを追加する
- 国際的なユーザー向けにローカライズし、RTL/LTR レイアウトをサポートする
このスキルでは、ワークフローを豊富なカスタマイズオプションで効率的に可視化、管理できる Syncfusion .NET MAUI Kanban Board (SfKanban) コントロールを扱います。
コンポーネントの概要
SfKanban コントロールは、.NET MAUI アプリケーション向けの高度にインタラクティブでカスタマイズ可能なカンバンボードです。次の機能を提供します。
- 複数の段階(列)にわたるワークフローの可視化
- 列間でのカードのドラッグ&ドロップ
- タスクの流れを制御する仕掛中の作業(WIP)制限
- 標準モデルまたはカスタムモデルを使った柔軟なデータバインディング
- テンプレート、画像、タグ、インジケーターなどを含む豊富なカードカスタマイズ
- 自動生成または手動設定による列の管理
- カードの遷移を制限するワークフロールール
- カード操作や状態変更に関するイベント
- 並べ替えとフィルタリング機能
- 多言語サポートのためのローカライズ
- リキッドグラススタイルなどの視覚効果
主な機能:
- あらゆるプロセスのワークフローを可視化する
- 仕掛中の作業(WIP)を制限する
- 許可または禁止される状態を設定してワークフローの遷移を管理する
- カード、列、テーマを高度にカスタマイズする
- プロセス内でスムーズに遷移する
- 標準データモデルとカスタムデータモデルの両方をサポートする
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
参照する場面: ユーザーが初めて SfKanban をセットアップする場合、パッケージをインストールする場合、または最初のカンバンボードを作成する場合。
対象トピック:
- Syncfusion.Maui.Kanban NuGet パッケージのインストール
- ConfigureSyncfusionCore によるハンドラーの登録
- XAML と C# での基本的な SfKanban の初期化
- 最初のカンバンボードの作成
- アプリケーションの実行とテスト
データバインディング
📄 参照: references/data-binding.md
参照する場面: ユーザーがカンバンにデータを追加する場合、標準の KanbanModel を使用する場合、カスタムデータモデルを作成する場合、または ItemsSource を構成する場合。
対象トピック:
- 組み込みプロパティを持つ標準の KanbanModel の使用
- データマッピングを使ったカスタムデータモデルの作成
- ObservableCollection を使った ItemsSource の設定
- 列のカテゴリ分けに使用する ColumnMappingPath の理解
- AutoGenerateColumns と手動での列定義の比較
- MVVM アーキテクチャ向けの ViewModel パターン
- バインディングコンテキストの構成
カード
📄 参照: references/cards.md
参照する場面: ユーザーがカードの外観をカスタマイズする場合、画像、タグ、インジケーターを追加する場合、またはカスタムカードテンプレートを作成する場合。
対象トピック:
- カードのプロパティ(Title、ImageURL、Category、Description、ID)
- ステータスカラー用の IndicatorFill
- ラベル用の Tags コレクション
- 完全なカスタマイズに対応する CardTemplate
- 画像の処理(アセンブリ参照とローカルパス)
- カードのレイアウトとデザインパターン
- 標準カード UI とカスタムカード UI
- カスタムモデル向けの BindingContext
列
📄 参照: references/columns.md
読むタイミング: ユーザーが列の設定、幅の制約の指定、カテゴリの定義、WIP 制限の有効化、または列の外観のカスタマイズを必要としている場合です。
対象トピック:
- 列のサイズ設定(MinimumColumnWidth、MaximumColumnWidth、ColumnWidth)
- Categories プロパティを使用した列の分類
- AutoGenerateColumns の設定
- KanbanColumn を使用した手動での列定義
- 1 つの列に複数のカテゴリを設定
- 仕掛かり(WIP)制限(MinimumLimit、MaximumLimit)
- 列テンプレートとカスタマイズ
- 列のヘッダーとタイトル
ワークフロー
📄 参照: references/workflows.md
読むタイミング: ユーザーがカードの移動の制限、許可する遷移の定義、または特定の列でのドラッグ&ドロップの防止を必要としている場合です。
対象トピック:
- KanbanWorkflow クラスの定義
- ソース状態を指定する Category プロパティ
- 遷移先の状態を指定する AllowedTransitions
- 列間のカード移動の制限
- 特定の遷移の防止
- ワークフローの検証
- 状態管理の例
イベント
📄 参照: references/events.md
読むタイミング: ユーザーがドラッグ&ドロップイベントやカードのタップを処理する、またはカードの操作に応答する必要がある場合です。
対象トピック:
- ドラッグ&ドロップイベントの処理
- DragStart、DragOver、DragEnd イベント
- カードのタップ/クリックイベント
- イベント引数とデータへのアクセス
- カスタムイベントハンドラー
- ドラッグ操作の許可または防止
- イベントベースの検証
並べ替え
📄 参照: references/sorting.md
読むタイミング: ユーザーが列内のカードを並べ替える、またはカスタムの並べ替えロジックを実装する必要がある場合です。
対象トピック:
- 並べ替えの設定
- カスタムの並べ替えロジック
- 並べ替え順のオプション(昇順、降順)
- 複数の並べ替えキー
- IComparer の実装
高度な機能
📄 参照: references/advanced-features.md
読むタイミング: ユーザーが RTL 対応、ローカライズ、または多言語設定を必要としている場合です。
対象トピック:
- フロー方向(LeftToRight、RightToLeft)
- 国際対応アプリ向けのローカライズサポート
- リソースファイルの設定
- 多言語設定
- カルチャ固有の書式設定
カスタマイズとスタイル設定
📄 参照: references/customization.md
読むタイミング: ユーザーが外観のカスタマイズ、リキッドグラス効果、テーマとの統合、または移行ガイドを必要としている場合です。
対象トピック:
- モダンな UI スタイル向けのリキッドグラス効果
- 外観のカスタマイズ手法
- アプリケーションのテーマとのテーマ統合
- カードと列のカスタムテンプレート
- スタイル設定のベストプラクティス
- 旧バージョンからの移行ガイド