# 画面設計書 54-TabStrip

## 概要

本ドキュメントは、AvaloniaフレームワークのControlCatalogサンプルアプリケーションにおけるTabStripデモページの画面設計書です。TabStripコントロールの基本機能とデータバインディングパターンを視覚的にデモンストレーションします。

### 本画面の処理概要

本画面は、Avaloniaフレームワークが提供するTabStripコントロールの機能を実演するデモページです。TabStripは、選択可能なタブのストリップを表示するコントロールで、TabControlとは異なりコンテンツ領域を持たず、タブの選択状態のみを管理します。

**業務上の目的・背景**：TabStripは、タブベースのナビゲーションUIにおいて、コンテンツ表示を別のコントロールで管理したい場合や、タブヘッダーのみを独立したコンポーネントとして使用したい場合に有用です。例えば、カスタムレイアウトでのタブナビゲーション、ページネーション、ステップインジケーターなどの実装に活用できます。本デモページは、開発者がTabStripのXAMLインライン定義とItemTemplateを使用した動的生成の両方のアプローチを理解するための参考資料として機能します。

**画面へのアクセス方法**：ControlCatalogアプリケーションのメインウィンドウから、HamburgerMenuナビゲーションを使用して「TabStrip」項目を選択することで本画面にアクセスします。

**主要な操作・処理内容**：
1. XAML定義TabStripでのタブ選択（Item 1、Item 2、Disabled）
2. 動的生成TabStripでのタブ選択（ViewModelから生成されたアイテム）
3. 無効化されたタブ（Disabled）の非選択状態を確認

**画面遷移**：HamburgerMenuから他のデモページへ遷移可能。本ページからの特別な遷移先はありません。

**権限による表示制御**：本デモページでは権限による表示制御は実装されていません。すべての機能がすべてのユーザーに公開されます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 16 | TabControl | 主機能 | TabStripコントロールのデモ。タブストリップUI |

## 画面種別

デモ / 機能確認

## URL/ルーティング

ControlCatalogアプリケーション内のHamburgerMenuナビゲーションによるページ遷移（直接URLなし）

## 入出力項目

| 項目名 | 項目種別 | 入力/出力 | データ型 | 説明 |
|--------|----------|-----------|----------|------|
| Tabs | ViewModel | 入力 | TabControlPageViewModelItem[] | 動的タブのデータソース |
| SelectedItem | プロパティ | 出力 | object | 選択されたタブアイテム |

## 表示項目

| 表示項目 | 説明 |
|----------|------|
| ページ説明テキスト | "A control which displays a selectable strip of tabs" |
| XAML定義セクション | "Defined in XAML"ヘッダー付き |
| Item 1タブ | 最初のタブ |
| Item 2タブ | 2番目のタブ |
| Disabledタブ | 無効化されたタブ（選択不可） |
| 動的生成セクション | "Dynamically generated"ヘッダー付き |
| 動的生成タブ | ViewModelのTabsプロパティから生成 |
| Separator | セクション区切り線 |

## イベント仕様

### 1-TabStripItem選択

TabStripItemをクリックすると、TabStripのSelectedItemが変更され、選択状態の視覚的フィードバックが表示されます。

### 2-IsEnabled制御

スタイルでTabStripItemのIsEnabledプロパティがViewModelItemのIsEnabledにバインドされており、falseの場合はタブが選択不可になります。

## データベース更新仕様

### 操作別データベース影響一覧

本画面はUIデモのため、データベース操作は発生しません。

## メッセージ仕様

本画面にはメッセージ表示機能は実装されていません。

## 例外処理

本画面はデモ用途のため、特別な例外処理は実装されていません。Disabledタブはクリックしても選択されません。

## 備考

- TabStripはTabControlの内部コンポーネントとして使用されますが、単独でも使用可能です
- TabStripItemはTabItemとは異なり、Contentプロパティを持ちません
- ItemTemplateを使用することで、タブヘッダーの表示をカスタマイズできます
- TabControlPageViewModelを再利用しており、TabControlPageと同じデータ構造を共有しています

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

TabStripPageはTabControlPageと同じViewModelを再利用しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | TabControlPageViewModel.cs | `samples/ControlCatalog/ViewModels/TabControlPageViewModel.cs` | Tabs配列の構造とTabControlPageViewModelItemを確認 |

**読解のコツ**: TabStripPageではImage、Textプロパティは使用されず、HeaderとIsEnabledのみが利用されています。ViewModelの再利用パターンとして参考になります。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | TabStripPage.xaml | `samples/ControlCatalog/Pages/TabStripPage.xaml` | 2つのTabStrip（インラインと動的生成）の定義を確認 |
| 2-2 | TabStripPage.xaml.cs | `samples/ControlCatalog/Pages/TabStripPage.xaml.cs` | ViewModelの初期化を確認 |

**主要処理フロー**:
1. **行8-10**: コードビハインドでTabControlPageViewModelを作成
2. **行13-29**: Tabs配列の初期化（3つのアイテム、Imageプロパティは設定なし）
3. **行12-16**: XAMLでインラインTabStripItemを定義
4. **行15**: DisabledタブにIsEnabled="False"を設定
5. **行21-32**: ItemsSourceとItemTemplateを使用した動的TabStrip定義
6. **行23-25**: スタイルでIsEnabledをViewModelItemにバインド

#### Step 3: スタイルとテンプレートを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | TabStripPage.xaml（Styles） | `samples/ControlCatalog/Pages/TabStripPage.xaml` | TabStripItemのIsEnabledバインディングスタイル |

**主要処理フロー**:
- **行22-26**: TabStrip.Styles内でTabStripItemのIsEnabledプロパティをViewModelItemのIsEnabledにバインド
- **行27-31**: ItemTemplate内でTextBlockを使用してHeaderを表示

### プログラム呼び出し階層図

```
MainView (HamburgerMenu)
    │
    └─ TabStripPage (UserControl)
           │
           ├─ TabControlPageViewModel (再利用)
           │      └─ Tabs (TabControlPageViewModelItem[])
           │             ├─ Item1: Header="Item 1"
           │             ├─ Item2: Header="Item 2"
           │             └─ Item3: Header="Disabled", IsEnabled=false
           │
           ├─ TabStrip (インライン)
           │      ├─ TabStripItem: "Item 1"
           │      ├─ TabStripItem: "Item 2"
           │      └─ TabStripItem: "Disabled" (IsEnabled=False)
           │
           └─ TabStrip (動的生成)
                  └─ ItemsSource ──▶ Tabs
                         └─ ItemTemplate
                                └─ TextBlock (Header)
```

### データフロー図

```
[入力]                      [処理]                         [出力]

コードビハインド初期化 ───▶ new TabControlPageViewModelItem[] ───▶ Tabs配列
                                       │
                                       └──▶ DataContext設定

ItemsSource="{Binding Tabs}" ───▶ TabStrip.ItemsSource ───▶ TabStripItem生成
                                           │
                                           └──▶ Style適用 ───▶ IsEnabledバインド

TabStripItem選択 ───▶ SelectedItem更新 ───▶ 視覚的フィードバック
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| TabStripPage.xaml | `samples/ControlCatalog/Pages/TabStripPage.xaml` | ソース | ページのXAML定義 |
| TabStripPage.xaml.cs | `samples/ControlCatalog/Pages/TabStripPage.xaml.cs` | ソース | コードビハインド、ViewModel初期化 |
| TabControlPageViewModel.cs | `samples/ControlCatalog/ViewModels/TabControlPageViewModel.cs` | ソース | 共有ViewModel |
| TabStrip.cs | `src/Avalonia.Controls/Primitives/TabStrip.cs` | フレームワーク | TabStripコントロール本体 |
| TabStripItem.cs | `src/Avalonia.Controls/Primitives/TabStripItem.cs` | フレームワーク | TabStripItemコントロール |
