syncfusion-wpf-tabbedwindow

Name: syncfusion-wpf-tabbedwindow
Author: syncfusion

github.com/syncfusionデザイン・UI5163 回インストール1 週間前に更新

リポジトリ

syncfusion-wpf-tabbedwindow について

`SfChromelessWindow` と `SfTabControl` を組み合わせた WPF タブウィンドウ実装のスキルです。ドキュメント型 UI、ウィンドウ間のタブ移動、MVVM バインディングを扱います。

主な機能

01タブの並べ替えと切り離し
02ウィンドウ間でのタブ統合
03タブの追加、削除、選択
04ItemsSource によるデータバインド
05タブとコンテンツのテンプレート設定
06ウィンドウモードとテーマの設定

活用シーン

01複数タブのドキュメントエディター構築
02タブをフローティングウィンドウにする
03ウィンドウ間のタブ移動を管理
04MVVM コレクションによるタブ制御

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-tabbedwindow

インストール後、Claude Code で/syncfusion-wpf-tabbedwindowを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

customization.md

data-binding.md

getting-started.md

merge-tabs.md

tab-management.md

詳細

Syncfusion WPF タブ付きウィンドウの実装

SfChromelessWindow と SfTabControl を組み合わせ、タブの高度な管理、切り離しウィンドウ、ウィンドウ間でのタブ結合機能を備えた、プロフェッショナルなドキュメントベースのアプリケーションを作成するための、Syncfusion WPF Tabbed Window コントロールの実装ガイドです。

このスキルを使用する場面

複数のタブ、ブラウザー風のインターフェイス、切り離しウィンドウ、タブの結合、MVVM バインディングを備えたドキュメントベースのアプリケーションに使用します。セットアップ、ウィンドウモード、タブ管理、データバインディング、フローティングウィンドウ、カスタマイズについて説明します。

コンポーネントの概要

Tabbed Window は、SfChromelessWindow と SfTabControl を組み合わせた強力な機能で、次の機能を備えたプロフェッショナルなドキュメントベースのアプリケーションを実現します。

ドラッグ＆ドロップによる並べ替え - タブバー内またはウィンドウ間で直感的にタブを並べ替えられます
切り離しウィンドウ - ウィンドウの境界外にタブをドラッグして、フローティングウィンドウを作成できます
タブの結合 - 検証機能を使って、複数の TabbedWindow インスタンス間でタブを移動できます
柔軟なタブ管理 - 閉じる／新規タブボタンを使って、タブの追加、削除、選択を動的に行えます
MVVM のサポート - データ駆動型シナリオ向けに ItemsSource を介した完全なデータバインディングを利用できます
ウィンドウの種類モード - タブ付きモード（タイトルバーに統合）または通常モード（コンテンツベース）を利用できます
コンテンツのカスタマイズ - ヘッダー、アイコン、コンテンツ用のテンプレートを設定できます
イベント駆動型アーキテクチャ - すべてのタブ操作に対応する包括的なイベントを備えています

必要な主要アセンブリ：

Syncfusion.SfChromelessWindow.WPF
Syncfusion.Shared.WPF

名前空間：

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

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

はじめに

📄 参照： references/getting-started.md

次の操作を行う場合：

必要なアセンブリをインストールして参照する
XAML またはコードビハインドで最初のタブ付きウィンドウを作成する
ウィンドウの種類モード（タブ付きと通常）を理解する
アプリケーションに適したモードを選択する
基本的なタブ項目を作成する
必須プロパティを設定する

主なトピック： インストール、基本的なウィンドウのセットアップ、WindowType プロパティ、タブ付きモードと通常モードの比較、アセンブリ参照、名前空間のインポート

タブ管理

📄 参照： references/tab-management.md

次の操作を行う場合：

タブに閉じるボタンを追加する
新規タブ（＋）ボタンを有効にする
動的なタブ作成に向けて NewTabRequested イベントを処理する
新規タブボタンの外観をカスタマイズする
キーボードショートカット（Ctrl+Tab、Ctrl+Shift+Tab、Ctrl+T）を実装する
マウスの中ボタンクリックによるタブの閉じる操作に対応する
プログラムからタブを追加、削除、選択する

主なトピック： CloseButtonVisibility、EnableNewTabButton、NewTabRequested イベント、NewTabButtonStyle、キーボードショートカット、タブの選択

データバインディング（MVVM）

📄 参照： references/data-binding.md

次の操作を行う場合：

タブを ViewModel のコレクションにバインドする
タブ付きウィンドウで MVVM パターンを実装する
データ駆動型のタブシナリオに ItemsSource を使用する
タブのモデルと ViewModel を作成する
テンプレートを使ってタブのヘッダーとコンテンツをカスタマイズする
ItemTemplate と ContentTemplate を設定する
タブのスタイル設定に ItemContainerStyle を使用する
ObservableCollection を使って動的なコレクション更新を処理する

主なトピック： MVVM パターン、ItemsSource バインディング、ItemTemplate、ContentTemplate、ItemContainerStyle、ObservableCollection、タブのモデル

タブの統合とフローティングウィンドウ

📄 参照： references/merge-tabs.md

次の操作を行う場合：

フローティングウィンドウを作成するために、切り離し機能を有効にする
タブが独立したウィンドウになる仕組みを理解する
フローティングタブをメインウィンドウに再度アタッチする
複数のウィンドウ間でタブを統合する
PreviewTabMerge イベントを使用して統合操作を検証する
移動可能なタブを制御する
統合操作中にアイテムを変換する
複数ウィンドウのワークスペースシナリオに対応する

主なトピック： ウィンドウの切り離し、ウィンドウ外へのドラッグ動作、フローティングウィンドウのライフサイクル、PreviewTabMerge イベント、TabMergePreviewEventArgs、ウィンドウ間の統合、統合の検証

カスタマイズとスタイル設定

📄 参照： references/customization.md

次の操作を行う場合：

Syncfusion のテーマを適用する
ウィンドウのクロームの外観をカスタマイズする
タブヘッダーとコンテンツ領域のスタイルを設定する
カスタムのヘッダーおよびコンテンツテンプレートを作成する
閉じるボタンの外観をカスタマイズする
ドラッグ＆ドロップ時の視覚的なフィードバックを設定する
色、フォント、間隔を設定する
レスポンシブデザインを実装する
プロフェッショナルな外観にするためのベストプラクティスに従う

主なトピック： テーマの適用、スタイルのカスタマイズ、テンプレートのカスタマイズ、外観、AllowDragDrop、レスポンシブデザイン、プロフェッショナルなスタイル設定

クイックスタートの例

閉じるボタン付きの基本的なタブウィンドウ

XAML：

<syncfusion:SfChromelessWindow x:Class="TabbedWindowApp.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="Document Manager"
        WindowType="Tabbed"
        Height="600" 
        Width="900">
        
        <syncfusion:SfTabControl 
            AllowDragDrop="True"
            EnableNewTabButton="True"
            NewTabRequested="OnNewTabRequested">
            
            <syncfusion:SfTabItem 
                Header="Document 1" 
                CloseButtonVisibility="Visible">
                <TextBlock Text="Welcome to Document 1" 
                          Margin="20"/>
            </syncfusion:SfTabItem>
            
            <syncfusion:SfTabItem 
                Header="Document 2" 
                CloseButtonVisibility="Visible">
                <TextBlock Text="Welcome to Document 2" 
                          Margin="20"/>
            </syncfusion:SfTabItem>
            
        </syncfusion:SfTabControl>
            
</syncfusion:SfChromelessWindow>

コードビハインド：

using Syncfusion.Windows.Controls;

public partial class MainWindow : SfChromelessWindow
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void OnNewTabRequested(object sender, NewTabRequestedEventArgs e)
    {
        var tabCount = ((SfTabControl)sender).Items.Count;
        var newTab = new SfTabItem 
        { 
            Header = $"Document {tabCount + 1}",
            Content = new TextBlock 
            { 
                Text = $"New Document {tabCount + 1}",
                Margin = new Thickness(20)
            },
            CloseButtonVisibility = Visibility.Visible
        };
        
        e.Item = newTab;
    }
}

よくあるパターン

パターン 1：ドラッグ＆ドロップと新しいタブに対応したドキュメントエディター

<syncfusion:SfChromelessWindow WindowType="Tabbed">
    <syncfusion:SfTabControl 
        AllowDragDrop="True"
        EnableNewTabButton="True"
        NewTabRequested="OnNewTabRequested">
        
    </syncfusion:SfTabControl>
</syncfusion:SfChromelessWindow>

パターン 2：MVVM のデータバインドされたタブ

<syncfusion:SfTabControl ItemsSource="{Binding OpenDocuments}">
    <syncfusion:SfTabControl.ItemContainerStyle>
        <Style TargetType="syncfusion:SfTabItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding Title}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </syncfusion:SfTabControl.ItemContainerStyle>
    
    <syncfusion:SfTabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Content}" />
        </DataTemplate>
    </syncfusion:SfTabControl.ContentTemplate>
</syncfusion:SfTabControl>

主なプロパティとイベント

基本プロパティ

プロパティ	型	説明
`WindowType`	WindowType	`Tabbed`（クローム統合型）または `Normal`（コンテンツベース）
`AllowDragDrop`	bool	ドラッグ＆ドロップによる並べ替えと切り離しを有効にします
`EnableNewTabButton`	bool	新しいタブ（+）ボタンの表示／非表示を切り替えます
`SelectedItem`	object	現在アクティブなタブ
`SelectedIndex`	int	アクティブなタブのインデックス
`ItemsSource`	IEnumerable	タブをコレクションにバインドします（MVVM）
`CloseButtonVisibility`	Visibility	タブごとの閉じるボタンの表示／非表示を切り替えます

重要なイベント

イベント	説明
`NewTabRequested`	ユーザーが + ボタンをクリックしたときに発生します。タブを作成するには `e.Item` を設定します
`PreviewTabMerge`	ウィンドウ間でタブが移動する前に発生します。検証するには `e.Allow` を設定します
`SelectionChanged`	アクティブなタブが変更されたときに発生します

スタイル設定プロパティ

プロパティ	説明
`NewTabButtonStyle`	新しいタブボタンのスタイル
`ItemTemplate`	タブヘッダー用の DataTemplate
`ContentTemplate`	タブコンテンツ用の DataTemplate
`ItemContainerStyle`	SfTabItem コンテナーのスタイル

ベストプラクティス

適切なモードを選択する： ドキュメント中心のアプリには Tabbed モードを使用し、タブが補助的なナビゲーションである場合は Normal モードを使用します
ドラッグ＆ドロップを有効にする： 直感的な並べ替えと切り離し機能のため、AllowDragDrop="True" を設定します
NewTabRequested を処理する： EnableNewTabButton="True" の場合は、必ずこのイベントハンドラーを実装します
MVVM パターン： 関心を明確に分離したデータ駆動型のシナリオでは、ItemsSource バインディングを使用します
統合を検証する： ウィンドウ間で移動できるタブを制御するには、PreviewTabMerge を使用します
キーボードサポート： ユーザー向けにキーボードショートカット（Ctrl+Tab、Ctrl+Shift+Tab、Ctrl+T）を説明します
視覚的なフィードバック： ユーザーが操作しやすいよう、ドラッグ＆ドロップ操作に明確な視覚的インジケーターを用意します

Markdown 対応

ログインしてコメント

基本情報

作者: syncfusion
リポジトリ: syncfusion/wpf-ui-components-skills
カテゴリ: デザイン・UI
インストール数: 163
GitHub スター: 5

問題を報告