syncfusion-wpf-gantt

WPF ガントコントロールの実装

WPF アプリケーション向けの Syncfusion® Essential Gantt コントロールを実装するための包括的なガイドです。Gantt コントロールは、グリッド、スケジュール、リソース割り当ての機能を備えた MS Project のようなプロジェクト管理ビューアーです。プロジェクトマネージャーが計画を立て、リソースを割り当て、タスクの進捗を追跡し、プロジェクトのタイムラインを管理できるように設計されています。

このスキルを使用するタイミング

次のような場合に、このスキルを使用します。

• WPF アプリケーションにプロジェクト管理機能を実装する
• ガントチャート形式でタスクのタイムラインを可視化する
• 親子関係を持つタスク階層を作成する
• 先行タスク／後続タスクの関係を持つタスクの依存関係を設定する
• タスクのスケジュールや日付を調整するドラッグ＆ドロップを有効にする
• ベースラインや進捗インジケーターを使用してプロジェクトの進捗を追跡する
• リソースを管理し、タスクに割り当てる
• カスタムノード、ツールチップ、スタイルを使用してガントの表示をカスタマイズする
• XML 形式のプロジェクトデータをインポート／エクスポートする
• ズームやタイムラインのナビゲーションを実装する
• タスク管理用のフィルターと並べ替えを追加する
• 国際的なプロジェクト向けにローカライズをサポートする

このスキルでは、基本設定から高度なカスタマイズまで、ガントコントロールの実装全体を扱います。

コンポーネントの概要

アーキテクチャ

Essential Gantt コントロールは、次の 3 つの主要コンポーネントで構成されています。

1. GanttGrid - スケジュールされたタスクを階層構造と編集可能なフィールドとともに表示する表形式のビュー
2. GanttChart - タスクバー、マイルストーン、依存関係を表示するグラフィカルな表現
3. ScheduleHeader - 進捗の測定と追跡に使用するタイムラインヘッダー

主な機能

タスク管理：

• 階層型のタスク構造（親タスク／子タスク）
• タスクのプロパティ（名前、開始日／終了日、期間、進捗）
• 目標日のマイルストーン対応
• コネクタを使用したタスクの依存関係

表示機能：

• 完了率を示す進捗インジケーター
• タスクの種類に応じたカスタムノードスタイル
• 視覚的に強調するハイライトとストリップライン
• タスクの詳細情報を表示するカスタムツールチップ

操作：

• ドラッグによるタスクの開始日／終了日の調整
• 行内でのタスクのドラッグ＆ドロップ
• グリッドとチャート間の自動同期
• タイムラインのスケール変更に対応したズーム

データ操作：

• MVVM に対応したデータバインディング
• ObservableCollection のサポート
• プロジェクトデータの XML インポート／エクスポート
• フィルターおよび並べ替え機能
• 大規模プロジェクト向けのデータ仮想化

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

次のような場合に参照してください。

• WPF プロジェクトに Gantt コントロールをインストールして設定する
• Gantt コントロールのアーキテクチャとコンポーネントを理解する
• XAML デザイナーまたはコードから GanttControl を追加する
• 基本プロパティ（ChartWidth、GridWidth）を設定する
• スケジュールの種類と範囲のパディングを設定する
• タスク階層の自動展開モードを設定する
• Gantt コントロールにテーマを適用する

扱うトピック： インストール、コントロールの構造、クラス図、基本設定、スケジュールの種類、自動展開モード、テーマ設定

---

データバインディングとタスク管理

📄 参照： references/data-binding.md

次のような場合に参照してください。

• プロジェクトデータ用の TaskDetails コレクションを作成する
• GanttControl の ItemsSource にデータをバインドする
• ObservableCollection を使用して ViewModel パターンを実装する
• タスクのプロパティ（ID、名前、日付、進捗）を定義する
• 親子関係のあるタスク階層を作成する
• 外部プロパティのバインディングを設定する
• タスクにリソースを割り当てる
• データモデルのベストプラクティスに従う

扱うトピック： TaskDetails のバインディング、ObservableCollection、タスクのプロパティ、階層の作成、リソースの割り当て、MVVM パターン

---

スケジュールと時間管理

📄 お読みください： references/task-scheduling.md

次のことを行う必要がある場合：

• スケジュールの種類（Hours、Days、Weeks、Months、Years）を設定する
• カスタムのDateTimeスケジュールまたは数値スケジュールを実装する
• 稼働日と営業時間を設定してカレンダーをカスタマイズする
• 休日と非稼働日を定義する
• 表示を見やすくするため、スケジュール範囲のパディングを設定する
• ズーム機能を実装する
• GanttGridに時刻付きの日付を表示する
• タイムラインとスケジュールビューを管理する

対象トピック： スケジュールの種類、カレンダーのカスタマイズ、休日、ズーム、タイムライン管理、スケジュール設定

---

タスクの関係と依存関係

📄 お読みください： references/task-relationships.md

次のことを行う必要がある場合：

• タスク間の依存関係を作成する
• 先行タスクと後続タスクを設定する
• 視覚的な依存関係を示すコネクターを実装する
• 変更を連鎖的に反映する階層の自動更新を有効にする
• 元のスケジュールを追跡するためのベースライン対応を追加する
• ベースラインと比較してタスクの進捗状況を追跡する
• プロジェクトの目標を示すマイルストーンを実装する
• さまざまな関係の種類を定義する

対象トピック： 依存関係、コネクター、階層の自動更新、ベースライン、マイルストーン、関係の種類、進捗状況の追跡

---

視覚的なカスタマイズ

📄 お読みください： references/customization.md

次のことを行う必要がある場合：

• タスクの種類に応じたカスタムノードスタイルを適用する
• タスクの詳細情報を含むカスタムツールチップを作成する
• 特定のタスクを強調表示する
• タイムライン上に視覚的なガイドとしてストリップラインを追加する
• DateTimeインジケーターをカスタマイズする
• ヘッダーノードとタスクノードのスタイルを設定する
• 進捗状況インジケーターをカスタマイズする
• 視覚的なテーマとテンプレートを適用する
• 条件付きスタイルを実装する

対象トピック： カスタムノードスタイル、ツールチップ、強調表示、ストリップライン、DateTimeインジケーター、テーマ、テンプレート、条件付きスタイル

---

インタラクションとドラッグ＆ドロップ

📄 お読みください： references/drag-drop-interaction.md

次のことを行う必要がある場合：

• タスクの日付を調整できるようにドラッグを有効にする
• タスクバーのドラッグによる開始日と終了日の変更を実装する
• タスクの並べ替え用にドラッグ＆ドロップを設定する
• ドラッグ操作中のデータの自動同期を処理する
• ドラッグイベントに応答する
• ドラッグの動作と制約を設定する
• カスタムのドラッグ検証を実装する

対象トピック： ドラッグによるサイズ変更、ドラッグ＆ドロップによる並べ替え、イベント処理、同期、ドラッグの制約

---

データ操作

📄 お読みください： references/data-operations.md

次のことを行う必要がある場合：

• 条件に基づいてタスクをフィルタリングする
• さまざまなプロパティでタスクリストを並べ替える
• 大規模プロジェクト向けにデータの仮想化を実装する
• XMLファイルからプロジェクトデータをインポートする
• プロジェクトデータをXML形式でエクスポートする
• タスクに対して一括操作を実行する
• タスクコレクションを検索およびフィルタリングする
• 大規模なデータセットでパフォーマンスを最適化する

対象トピック： フィルタリング、並べ替え、仮想化、XMLのインポート／エクスポート、一括操作、検索、パフォーマンス最適化

---

リソース管理

📄 お読みください： references/resource-management.md

次のことを行う必要がある場合：

• Ganttにリソースビューを実装する
• リソース用のGanttインラインアイテムを設定する
• タスクにリソースを割り当てる
• リソースコレクションを作成して管理する
• タスク全体のリソース割り当て状況を追跡する
• 複数リソースのタスク割り当てを実装する
• チャートにリソース情報を表示する

対象トピック： リソースビュー、インラインアイテム、リソースの割り当て、コレクション、割り当て状況の追跡、複数リソースのタスク

ローカライズと国際化

📄 参照： references/localization.md

次のような場合に使用します。

• 言語ごとにフローの方向（LTR／RTL）を設定する
• ローカライズへの対応を実装する
• 文化圏に応じた書式を適用する
• 多言語リソースを管理する
• ロケールに応じて日付と時刻をフォーマットする
• リソース文字列と UI テキストをローカライズする
• 国際的なプロジェクトチームに対応する

対象トピック： フローの方向、ローカライズ、文化圏に応じた書式、多言語リソース、日付／時刻の書式設定、リソース文字列

---

クイックスタートの例

基本的なガントコントロールの実装

ガントコントロールを使い始めるための最小限の例を紹介します。

XAML：

<Window x:Class="GanttDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="Project Management" Height="600" Width="1000">
    
    <syncfusion:GanttControl x:Name="ganttControl"
                             ItemsSource="{Binding TaskDetails}"
                             GridWidth="300"
                             ChartWidth="700">
        <syncfusion:GanttControl.DataContext>
            <local:ViewModel/>
        </syncfusion:GanttControl.DataContext>
    </syncfusion:GanttControl>
    
</Window>

ViewModel（C#）：

using System;
using System.Collections.ObjectModel;
using Syncfusion.Windows.Controls.Gantt;

public class ViewModel
{
    public ObservableCollection<TaskDetails> TaskDetails { get; set; }

    public ViewModel()
    {
        TaskDetails = new ObservableCollection<TaskDetails>();
        
        // Create parent task
        var parentTask = new TaskDetails
        {
            TaskId = 1,
            TaskName = "Project Planning",
            StartDate = new DateTime(2024, 1, 1),
            FinishDate = new DateTime(2024, 1, 15),
            Progress = 40d
        };
        
        // Add child tasks
        parentTask.Child.Add(new TaskDetails
        {
            TaskId = 2,
            TaskName = "Define project scope",
            StartDate = new DateTime(2024, 1, 1),
            FinishDate = new DateTime(2024, 1, 5),
            Progress = 100d
        });
        
        parentTask.Child.Add(new TaskDetails
        {
            TaskId = 3,
            TaskName = "Gather requirements",
            StartDate = new DateTime(2024, 1, 6),
            FinishDate = new DateTime(2024, 1, 10),
            Progress = 50d
        });
        
        TaskDetails.Add(parentTask);
    }
}

結果： 階層構造、進捗の追跡、タイムラインの可視化に対応した、プロジェクトタスクを表示するガントコントロールが完成します。

よく使われるパターン

パターン 1：タスクの依存関係の設定

// Create tasks with dependencies
var task1 = new TaskDetails 
{ 
    TaskId = 1, 
    TaskName = "Design", 
    StartDate = new DateTime(2024, 1, 1),
    FinishDate = new DateTime(2024, 1, 10)
};

var task2 = new TaskDetails 
{ 
    TaskId = 2, 
    TaskName = "Development",
    StartDate = new DateTime(2024, 1, 11),
    FinishDate = new DateTime(2024, 1, 25)
};

// Task2 depends on Task1 (Finish-to-Start)
task2.Predecessor.Add(new Predecessor { GanttTaskIndex = 1, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });

TaskDetails.Add(task1);
TaskDetails.Add(task2);

パターン 2：リソースの割り当て

// Define resources
var resources = new ObservableCollection<Resource>
{
    new Resource { ID = 1, Name = "John Smith" },
    new Resource { ID = 2, Name = "Jane Doe" }
};

// Assign resources to task
var task = new TaskDetails
{
    TaskId = 1,
    TaskName = "Implementation",
    StartDate = new DateTime(2024, 1, 1),
    FinishDate = new DateTime(2024, 1, 15),
    Resources = resources
};

パターン 3：カスタムスケジュールタイプ

<syncfusion:GanttControl x:Name="ganttControl"
                         ItemsSource="{Binding TaskDetails}"
                         ScheduleType="WeekWithDays"
                         ScheduleRangePadding="5">
</syncfusion:GanttControl>

// Or in code-behind
ganttControl.ScheduleType = ScheduleType.WeekWithDays;
ganttControl.ScheduleRangePadding = 5;

パターン 4：ベースラインの比較

// Enable baseline support
var task = new TaskDetails
{
    TaskId = 1,
    TaskName = "Project Phase 1",
    StartDate = new DateTime(2024, 1, 1),
    FinishDate = new DateTime(2024, 2, 1),
    BaselineStart = new DateTime(2024, 1, 1),
    BaselineFinish = new DateTime(2024, 1, 25),  // Original plan
    Progress = 60d
};
// Actual finish extends beyond baseline - shows delay

主なプロパティと API

必須プロパティ

プロパティ	型	説明
ItemsSource	IEnumerable	表示する TaskDetails のコレクション
GridWidth	GridLength	ガントグリッド領域の幅
ChartWidth	GridLength	ガントチャート領域の幅
ScheduleType	ScheduleType	タイムラインのスケール（時間、日、週など）
ScheduleRangePadding	int	スケジュール単位のパディング
AutoExpandMode	GanttAutoExpandMode	タスクの初期展開状態
ShowDateWithTime	bool	グリッドに日付とともに時刻を表示

TaskDetails のプロパティ

プロパティ	型	説明
TaskId	int	タスクの一意な識別子
TaskName	string	タスクの表示名
StartDate	DateTime	タスクの開始日時
FinishDate	DateTime	タスクの終了日時
Duration	TimeSpan	タスクの期間（計算または設定）
Progress	double	完了率（0～100）
Child	Collection	階層構造を表す子タスク
Predecessor	Collection	タスクの依存関係
Resources	Collection	割り当て済みのリソース

よく使われるメソッド

• ExpandAll() - すべてのタスクノードを展開します
• CollapseAll() - すべてのタスクノードを折りたたみます
• ExportToXML() - プロジェクトを XML ファイルにエクスポートします
• ImportFromXML() - XML ファイルからプロジェクトをインポートします

アーキテクチャの概要

┌─────────────────────────────────────────────────────────────┐
│                      GanttControl                            │
├─────────────────────────────────────────────────────────────┤
│                                                               │
│  ┌──────────────────────┐  ┌─────────────────────────────┐ │
│  │    GanttGrid         │  │   GanttChartVisualControl   │ │
│  │  ┌────────────────┐  │  │  ┌────────────────────────┐ │ │
│  │  │ Header         │  │  │  │  ScheduleHeader        │ │ │
│  │  ├────────────────┤  │  │  ├────────────────────────┤ │ │
│  │  │ Parent Task    │  │  │  │  ═══╗                  │ │ │
│  │  │  ├─ Child 1    │  │  │  │     ║═══════           │ │ │
│  │  │  └─ Child 2    │  │  │  │          ║═════════════║ │ │
│  │  │ Parent Task    │  │  │  │  ═══════════╗          │ │ │
│  │  │  ├─ Child 3    │  │  │  │            ║════       │ │ │
│  │  └────────────────┘  │  │  └────────────────────────┘ │ │
│  └──────────────────────┘  └─────────────────────────────┘ │
│                                                               │
│         Data: ObservableCollection<TaskDetails>              │
└─────────────────────────────────────────────────────────────┘

よくあるユースケース

1. ソフトウェアプロジェクト管理 - 開発スプリント、タスク、マイルストーンを追跡します
2. 建設計画 - 建設フェーズ、依存関係、リソースを管理します
3. イベント計画 - イベントのタスク、タイムライン、リソースの割り当てをスケジュールします
4. 研究プロジェクト - 研究フェーズ、実験、成果物を追跡します
5. 製造スケジュール管理 - 生産タスク、依存関係、リソースを計画します
6. マーケティングキャンペーン - キャンペーンのタスク、タイムライン、チームの割り当てを管理します