syncfusion-maui-tab-view

Syncfusion .NET MAUI Tab View の実装

.NET MAUI Tab View（SfTabView）は、モバイルアプリケーションやデスクトップアプリケーション向けに、高度なタブナビゲーションインターフェイスを提供するコントロールです。カスタマイズ可能なタブバー、ネストされたタブ、スワイプジェスチャ、豊富な外観カスタマイズオプションを備えています。

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

ユーザーが次のことを必要としている場合に、このスキルを使用します。

• .NET MAUI アプリケーションにタブナビゲーションインターフェイスを実装する
• スクロール可能または固定のタブバーを備えたタブビューを作成する
• カスタムヘッダー、アイコン、コンテンツを使用してタブ項目を設定する
• 複数のナビゲーションレベルを持つネストされたタブ構造を構築する
• モバイルで使いやすいタブナビゲーションにスワイプジェスチャを追加する
• タブ選択イベントを処理し、カスタムナビゲーションロジックを実装する
• タブバーの外観（配置、高さ、インジケーター、背景）をカスタマイズする
• テンプレートやビジュアル状態を使用して個々のタブ項目をスタイル設定する
• ItemsSource を使用したデータバインディング対応のタブビューを実装する
• Liquid Glass 効果やカスタムビジュアルテーマを適用する
• 複数のコンテンツセクションが必要な複雑なレイアウトを構築する

コンポーネントの概要

Syncfusion .NET MAUI Tab View（SfTabView）は、次の機能を提供する高度なタブナビゲーションコントロールです。

主な機能：

• 複数の幅モードに対応した固定およびスクロール可能なタブバー
• テキスト、アイコン、カスタムテンプレートによる柔軟なヘッダーのカスタマイズ
• 独立したヘッダー配置に対応したネストされたタブ
• DataTemplate に対応した ItemsSource バインディング
• モバイルナビゲーション向けのスワイプジェスチャ
• 選択状態を追跡する包括的なイベントシステム
• ビジュアル状態管理とインジケーターのカスタマイズ
• Liquid Glass のテーマ設定に対応

主な使用例：

• 複数のセクションにわたるコンテンツの整理
• モバイルアプリのナビゲーションパターン
• カテゴリ別ビューを備えたダッシュボードレイアウト
• 設定インターフェイス
• タブをすばやく切り替えてコンテンツを閲覧

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

はじめに

📄 参照先： references/getting-started.md

• MauiProgram.cs でのハンドラーの登録
• SfTabView の基本的な初期化（XAML および C#）
• Items コレクションを使用したタブの追加
• ItemsSource を使用したデータバインディング
• HeaderItemTemplate と ContentItemTemplate
• 条件付きテンプレート向けの DataTemplateSelector
• クイックスタートのコード例

タブバーの設定

📄 参照先： references/tab-bar-configuration.md

• TabWidthMode のオプション（Default と SizeToContent）
• 固定およびスクロール可能なタブバー
• TabBarHeight のカスタマイズ
• TabBarPlacement（Top、Bottom、Left、Right）
• TabBarBackground のスタイル設定
• インジケーターの設定（色、配置、太さ）
• タブの間隔とビジュアルレイアウト

タブ項目の設定

📄 参照先： references/tab-item-configuration.md

• テキストとアイコンを使ったヘッダーコンテンツ
• アイコンの配置を指定する ImagePosition（Left、Top、Right、Bottom）
• フォントとテキストのスタイル設定（FontSize、FontFamily、FontAttributes、TextColor）
• BadgeText と BadgeSettings を使用したバッジと通知インジケーター
• バッジの種類（Error、Warning、Success、Information、カスタム）
• 任意の .NET MAUI ビューを使ったコンテンツの設定
• IsEnabled を使用した無効状態のスタイル設定
• 項目ごとのカスタマイズと動的な更新

ネストされたタブ

📄 参照先： references/nested-tabs.md

• ネストされた SfTabView 構造の作成
• レベルごとに異なるヘッダー配置
• ネストされたタブ間のナビゲーション
• レイアウトパターンとベストプラクティス
• 複数レベルのタブ階層
• 完全なネストの例

イベントと操作

📄 参照先： references/events-interaction.md

• TabItemTapped イベントの処理
• SelectionChanging イベント（キャンセル可能）
• SelectionChanged イベント
• イベント引数とプロパティ
• SelectedIndex を使用したプログラムによる選択
• タブ選択の防止
• カスタムナビゲーションロジック

スワイプジェスチャー

📄 参照： references/swiping-gestures.md

• スワイプナビゲーションの有効化
• EnableSwiping プロパティ
• タッチジェスチャーの設定
• プラットフォーム固有の動作
• アクセシビリティに関する考慮事項
• モバイル向けに最適化されたパターン

ビジュアルのカスタマイズ

📄 参照： references/visual-customization.md

• ビジュアルステートマネージャー
• 選択インジケーターのカスタマイズ
• IndicatorBackground と配置オプション
• IndicatorWidthMode の設定
• カスタムインジケータービュー
• Liquid Glass エフェクトの統合
• カラースキームとテーマ
• アニメーションとトランジション

ハウツーガイド

📄 参照： references/how-to.md

• SelectedIndex を使用したプログラムによるタブ選択
• バッジと通知の実装パターン
• 動的なバッジの更新とデータバインディング
• デスクトップでのホバーエフェクトの無効化
• ロジックに応じたタブの表示切り替え
• カスタムアニメーション時間の制御
• フォントの自動スケーリングによるタブのアクセシビリティ
• スクロールボタンのカスタマイズ
• 一般的なパターン（ウィザード／ステッパー、ダッシュボード）