syncfusion-wpf-tabbed-mdi-form について
WPF 開発者向けに、アプリ内の複数のドキュメントやパネルを管理する Syncfusion DocumentContainer の実装を解説します。タブ型と MDI のレイアウト、ウィンドウ切り替え、状態の保存を扱います。
主な機能
- 01TDI と MDI のレイアウト
- 025 種類のウィンドウ切り替えスタイル
- 03タブグループと固定
- 04レイアウト状態の保存と復元
- 05ウィンドウのサイズ変更、全画面、キー操作
活用シーン
- 01複数ドキュメント対応のコードエディター
- 02タブ形式でのドキュメント管理
- 03複数のレポートやパネルの表示
- 04セッション間でのレイアウト保持
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ wpf-ui-components-skills --skill syncfusion-wpf-tabbed-mdi-formインストール後、Claude Code で/syncfusion-wpf-tabbed-mdi-formを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/advanced-features.mdcontainer-modes.mdcustomization.mdgetting-started.mdstate-persistence.mdtab-management.mdwindow-management.mdwindow-switchers.md詳細
Syncfusion WPF DocumentContainer の実装
Syncfusion WPF DocumentContainer(タブ付き MDI フォーム)は、アプリケーション内でドキュメント、コントロール、パネルを格納するためのコントロールです。MDI(Multiple Document Interface)と TDI(Tabbed Document Interface)の両方のレイアウトを作成できるため、Visual Studio や最新の IDE のドキュメント管理システムのような、ナビゲーションしやすいアプリケーションを簡単に構築できます。
このスキルを使用する場面
次のような場合に、DocumentContainer コントロールを使用します。
- マルチドキュメントインターフェイス:複数のドキュメントを同時に管理するアプリケーションを作成する(Visual Studio、Word、Excel など)
- タブ付きインターフェイス:ドキュメントやパネルのタブベースのナビゲーションを実装する
- MDI アプリケーション:フローティング/サイズ変更可能なウィンドウを備えた従来型の Multiple Document Interface アプリケーションを構築する
- TDI アプリケーション:ピン留め可能なタブを備えた最新の Tabbed Document Interface アプリケーションを作成する
- ドキュメント管理:単一のアプリケーションウィンドウ内で複数のビュー、エディター、パネルを扱う
- ウィンドウの切り替え:キーボードショートカット(CTRL+TAB)を使って複数のドキュメント間を簡単に移動できるようにする
- 状態の永続化:アプリケーションのセッション間でドキュメントのレイアウト、位置、状態を保存および復元する
- プロフェッショナルなレイアウト:Visual Studio 形式のドキュメント管理とウィンドウ構成を備えたアプリケーションを作成する
コンポーネントの概要
主な機能:
- デュアルモード対応:TDI(タブ付き)および MDI(Multiple Document)インターフェイス
- ナビゲーション用の 5 種類のウィンドウスイッチャースタイル(Immediate、List、QuickTabs、VS2005、VistaFlip)
- ウィンドウの状態管理(最小化、最大化、サイズ変更)
- 関連するドキュメントを整理するためのタブグループ
- タブのピン留め/ピン留め解除による、永続ドキュメントと一時ドキュメントの使い分け
- 状態の永続化(Registry、XML、Binary、Isolated Storage)
- 全画面モード対応
- ドラッグ&ドロップによるカスタマイズ
- キーボードナビゲーションとショートカット
- テーマとスキンへの対応
アセンブリ要件:
- Syncfusion.Tools.WPF
- Syncfusion.Shared.WPF
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
- アセンブリのデプロイと NuGet パッケージ
- デザイナーまたはコードからの DocumentContainer の追加
- コンテナーへのドキュメントウィンドウの追加
- ドキュメントのヘッダー設定
- 完全なサンプルを使った基本的な TDI/MDI の設定
コンテナーモード(TDI と MDI)
📄 参照: references/container-modes.md
- TDI(Tabbed Document Interface)の理解
- MDI(Multiple Document Interface)の理解
- Mode プロパティの設定
- 各モードの使い分け
- 実行時のモード切り替え
- モード固有の機能と動作
ウィンドウ管理
📄 参照: references/window-management.md
- MDI ウィンドウの最小化(CanMDIMinimize プロパティ)
- MDI ウィンドウの最大化
- ウィンドウ状態の設定(Normal、Minimized、Maximized)
- ウィンドウのサイズ変更と MDI 境界の設定
- キーボードを使ったウィンドウのサイズ変更
- ウィンドウの配置パターン
タブ管理
📄 参照: references/tab-management.md
- ドキュメント項目の追加と削除
- タブグループの作成と整理
- タブのピン留めとピン留め解除
- タブのナビゲーションと順序
- 動的なタブ管理
- Items コレクションの操作
ウィンドウスイッチャー
📄 参照: references/window-switchers.md
- CTRL+TAB ナビゲーションの概要
- SwitchMode プロパティとオプション
- Immediate、List、QuickTabs モード
- VS2005 モードと VistaFlip モード
- アプリケーションに適したスイッチャーの選択
- ウィンドウナビゲーション用のキーボードショートカット
状態の永続化
📄 参照: references/state-persistence.md
- SaveDockState メソッドと LoadDockState メソッド
- Registry への保存(Binary/SOAP formatter)
- Isolated Storage への保存
- XML ファイルへの保存
- Binary ファイルへの保存
- 状態のリセットと削除
- 状態管理のベストプラクティス
カスタマイズとスタイル設定
📄 参照: references/customization.md
- ドキュメントヘッダーの設定
- カスタムヘッダーテンプレート
- テーマとスキンのサポート
- ビジュアルカスタマイズオプション
- コンテナーの外観のスタイル設定
- カスタムレイアウト
高度な機能
📄 参照: references/advanced-features.md
- 全画面モード
- ドラッグアンドドロップの無効化
- MDI ウィンドウの配置
- イベント処理
- DockingManager との統合
- パフォーマンスの最適化
- よくある問題のトラブルシューティング
クイックスタート
基本的な TDI の実装
<Window 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="DocumentContainer Demo" Height="600" Width="800">
<Grid>
<syncfusion:DocumentContainer x:Name="documentContainer" Mode="TDI">
<FlowDocumentScrollViewer syncfusion:DocumentContainer.Header="Document 1">
<FlowDocument>
<Paragraph>Content of Document 1</Paragraph>
</FlowDocument>
</FlowDocumentScrollViewer>
<FlowDocumentScrollViewer syncfusion:DocumentContainer.Header="Document 2">
<FlowDocument>
<Paragraph>Content of Document 2</Paragraph>
</FlowDocument>
</FlowDocumentScrollViewer>
<FlowDocumentScrollViewer syncfusion:DocumentContainer.Header="Document 3">
<FlowDocument>
<Paragraph>Content of Document 3</Paragraph>
</FlowDocument>
</FlowDocumentScrollViewer>
</syncfusion:DocumentContainer>
</Grid>
</Window>
基本的な MDI の実装(C#)
using Syncfusion.Windows.Tools.Controls;
using System.Windows;
using System.Windows.Controls;
namespace DocumentContainerDemo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// Create DocumentContainer in MDI mode
DocumentContainer documentContainer = new DocumentContainer();
documentContainer.Mode = DocumentContainerMode.MDI;
documentContainer.SwitchMode = SwitchMode.VS2005;
// Add document windows
Button doc1 = new Button { Content = "Document 1 Content" };
Button doc2 = new Button { Content = "Document 2 Content" };
Button doc3 = new Button { Content = "Document 3 Content" };
// Set headers
DocumentContainer.SetHeader(doc1, "Document 1");
DocumentContainer.SetHeader(doc2, "Document 2");
DocumentContainer.SetHeader(doc3, "Document 3");
// Add to container
documentContainer.Items.Add(doc1);
documentContainer.Items.Add(doc2);
documentContainer.Items.Add(doc3);
// Set as window content
this.Content = documentContainer;
}
}
}
よく使われるパターン
パターン 1:QuickTabs スイッチャーを使用した TDI
Visual Studio のようなナビゲーションを備えた、最新のタブ付きアプリケーションに最適です。
<syncfusion:DocumentContainer Name="DocContainer"
Mode="TDI"
SwitchMode="QuickTabs">
</syncfusion:DocumentContainer>
パターン 2:ウィンドウ管理を使用した MDI
従来型の MDI アプリケーションで、最小化、最大化、サイズ変更を有効にします。
<syncfusion:DocumentContainer Name="DocContainer"
Mode="MDI"
CanMDIMinimize="True"
SwitchMode="VS2005">
</syncfusion:DocumentContainer>
パターン 3:状態の永続化(XML)
セッションをまたいでドキュメントのレイアウトを保存および復元します。
using System.Runtime.Serialization.Formatters.Binary;
// Save state to XML
BinaryFormatter formatter = new BinaryFormatter();
documentContainer.SaveDockState(formatter, StorageFormat.Xml, @"layout.xml");
// Load state from XML
BinaryFormatter formatter = new BinaryFormatter();
documentContainer.LoadDockState(formatter, StorageFormat.Xml, @"layout.xml");
パターン 4:動的なドキュメント管理
プログラムでドキュメントを追加および削除します。
// Add a new document
TextBox newDoc = new TextBox { Text = "New Document Content" };
DocumentContainer.SetHeader(newDoc, "New Document");
documentContainer.Items.Add(newDoc);
// Remove all documents
documentContainer.Items.Clear();
// Remove specific document
documentContainer.Items.Remove(newDoc);
主なプロパティ
| プロパティ | 型 | 説明 |
|---|---|---|
Mode | DocumentContainerMode | TDI または MDI モードを設定します |
SwitchMode | SwitchMode | ウィンドウスイッチャーのスタイル(Immediate、List、QuickTabs、VS2005、VistaFlip) |
CanMDIMinimize | bool | MDI ウィンドウの最小化を有効にします |
Items | ItemCollection | コンテナー内のドキュメントのコレクション |
主なメソッド
| メソッド | 説明 |
|---|---|
SaveDockState() | ドキュメントの状態をストレージ(Registry、XML、Binary)に保存します |
LoadDockState() | ストレージからドキュメントの状態を読み込みます |
ResetState() | コンテナーをデフォルトの状態にリセットします |
DeleteDockState() | ストレージから保存済みの状態を削除します |
Items.Add() | コンテナーにドキュメントを追加します |
Items.Clear() | すべてのドキュメントをコンテナーから削除します |
よくある使用例
- コードエディターと IDE:タブ付きまたは MDI レイアウトで、複数ドキュメントに対応したコード編集環境を作成します
- データ入力アプリケーション:複数のデータ入力フォームを同時に管理します
- ドキュメントビューアー:複数のドキュメント(PDF、画像、テキスト)をタブ付きインターフェースで表示します
- ダッシュボードアプリケーション:複数のダッシュボードパネルとグラフを整理します
- レポートツール:複数のレポートビューとエディターを管理します
- 設定ツール:複数の設定パネルまたはプロパティエディターを扱います
- 医療アプリケーション:複数のドキュメントビューで患者記録を管理します
- 金融アプリケーション:複数のグラフ、レポート、データグリッドを同時に表示します
次のステップ: 実装のニーズに応じて、上記の適切なリファレンスファイルを選択してください。初期設定は getting-started.md から始め、その後、必要に応じて各機能を確認してください。