syncfusion-wpf-tab-navigation

TabNavigationControl の実装（WPF）

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

次のようなニーズがある場合に、このスキルを使用します。

• アニメーション付きの切り替え効果（スライド、フェード、ズーム、ぼかしなど）でページや項目を表示する
• WPF で広告ローテーターやバナー形式のコンテンツ切り替え機能を構築する
• コンテンツ領域間で視覚的に切り替わる、タブベースのナビゲーションを作成する
• 項目のコレクションをアニメーション付きタブナビゲーターにバインドする
• ヘッダーストリップ、ナビゲーションボタン、タブストリップの表示を制御する
• 切り替えアニメーションを使って、プログラムからページを切り替える

---

コンポーネントの概要

TabNavigationControl                    (root container)
└── TabNavigationItem  (×N)            (each page/item)
    ├── Header                          — tab label text
    └── Content                         — page content (any UIElement)

アセンブリ： Syncfusion.Tools.WPF + Syncfusion.Shared.WPF
名前空間： Syncfusion.Windows.Tools.Controls
XAML スキーマ： http://schemas.syncfusion.com/wpf

---

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

はじめに

📄 参照： references/getting-started.md

• アセンブリ参照と NuGet パッケージ
• XAML 名前空間（syncfusion スキーマ）
• 宣言型のコントロール設定
• XAML と C# での TabNavigationItem の追加
• SfSkinManager を使ったテーマ設定

データバインディング

📄 参照： references/data-binding.md

• ItemsSource を介した ObservableCollection のバインド
• XML データソースからのバインド
• Model + ViewModel + MainWindow の接続
• XAML の ItemsSource バインドパターン

切り替え効果

📄 参照： references/transition-effects.md

• 7 種類の TransitionEffect 値すべて：Slide、Fade、Zoom、Blur、Push、PushIn、Wipe
• 各効果の XAML の例
• 各効果を選択する場面
• 選択ガイド

外観

📄 参照： references/appearance.md

• HeaderVisibility — ヘッダータブストリップの表示／非表示
• NavigationButtonVisibility — 前／次の矢印ボタンの表示／非表示
• TabStripVisibility — タブストリップパネルの表示／非表示
• XAML と C# の例

---

クイックスタート

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

<syncfusion:TabNavigationControl x:Name="tabNavigation"
                                  TransitionEffect="Slide"
                                  Width="400" Height="300">
    <syncfusion:TabNavigationItem Header="Page 1">
        <syncfusion:TabNavigationItem.Content>
            <TextBlock Text="Welcome to Page 1" FontSize="18" HorizontalAlignment="Center"/>
        </syncfusion:TabNavigationItem.Content>
    </syncfusion:TabNavigationItem>
    <syncfusion:TabNavigationItem Header="Page 2">
        <syncfusion:TabNavigationItem.Content>
            <TextBlock Text="Welcome to Page 2" FontSize="18" HorizontalAlignment="Center"/>
        </syncfusion:TabNavigationItem.Content>
    </syncfusion:TabNavigationItem>
    <syncfusion:TabNavigationItem Header="Page 3">
        <syncfusion:TabNavigationItem.Content>
            <TextBlock Text="Welcome to Page 3" FontSize="18" HorizontalAlignment="Center"/>
        </syncfusion:TabNavigationItem.Content>
    </syncfusion:TabNavigationItem>
</syncfusion:TabNavigationControl>

using Syncfusion.Windows.Tools.Controls;

TabNavigationControl tabNavigation = new TabNavigationControl();
tabNavigation.TransitionEffect = TransitionEffect.Slide;

TabNavigationItem item1 = new TabNavigationItem { Header = "Page 1", Content = "Content 1" };
TabNavigationItem item2 = new TabNavigationItem { Header = "Page 2", Content = "Content 2" };
tabNavigation.Items.Add(item1);
tabNavigation.Items.Add(item2);
this.Content = tabNavigation;

---

よくあるパターン

シナリオ	方法
固定ページのセット	XAML で宣言型の TabNavigationItem を使用
動的なデータ駆動型タブ	ItemsSource + ObservableCollection<TabNavigationItem>
滑らかなスライド切り替え	TransitionEffect="Slide"
コンテンツ間のフェード	TransitionEffect="Fade"
すべての UI 要素を非表示にする（全画面コンテンツ）	HeaderVisibility="Collapsed" + TabStripVisibility="Collapsed" + NavigationButtonVisibility="Collapsed"
自動ローテーションするバナー	ItemsSource をバインドし、タイマーで SelectedIndex を制御

---

主要なプロパティ

プロパティ	型	説明
TransitionEffect	TransitionEffect enum	項目の切り替え時のアニメーション
ItemsSource	IEnumerable	データバインドによる項目の生成に使用するデータコレクション
HeaderVisibility	Visibility	ヘッダータブストリップの表示／非表示
NavigationButtonVisibility	Visibility	前／次の矢印ボタンの表示／非表示
TabStripVisibility	Visibility	タブストリップパネルの表示／非表示

TabNavigationItem のプロパティ：

プロパティ	説明
Header	タブのラベルテキスト
Content	ページのコンテンツ（文字列または UIElement）