# 画面設計書 53-TabControl

## 概要

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

### 本画面の処理概要

本画面は、Avaloniaフレームワークが提供するTabControlコントロールの機能を実演するデモページです。TabControlは、タブストリップと選択されたタブのコンテンツを表示するコントロールで、複数のビューを単一のコンテナ内で切り替えるUIパターンを実装します。

**業務上の目的・背景**：TabControlは、設定画面、ドキュメント編集、プロパティウィンドウなど、複数の関連情報をカテゴリ別に整理して表示するために広く使用されるUIコンポーネントです。本デモページは、開発者がTabControlのインラインTabItem定義とデータテンプレートを使用した動的TabItem生成の両方のアプローチを理解し、タブ配置位置の変更やコンテンツテンプレートのカスタマイズを適切に実装するための参考資料として機能します。

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

**主要な操作・処理内容**：
1. インラインTabItemからのタブ選択（Arch、Leaf、Disabled）
2. DataTemplateを使用した動的生成タブの選択
3. Tab Placementコンボボックスでタブストリップの配置位置を変更（Left/Bottom/Right/Top）
4. "Set TabItem.ContentTemplate"チェックボックスでコンテンツテンプレートを有効化
5. 各タブのコンテンツ（テキストと画像）の表示確認

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 16 | TabControl | 主機能 | TabControlコントロールのデモ。タブ切り替え |

## 画面種別

デモ / 機能確認

## URL/ルーティング

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

## 入出力項目

| 項目名 | 項目種別 | 入力/出力 | データ型 | 説明 |
|--------|----------|-----------|----------|------|
| TabPlacement | ViewModel | 入出力 | Dock | タブストリップの配置位置 |
| Tabs | ViewModel | 入力 | TabControlPageViewModelItem[] | 動的タブのデータソース |
| UseContentTemplates | CheckBox | 入出力 | bool | コンテンツテンプレート有効化フラグ |

## 表示項目

| 表示項目 | 説明 |
|----------|------|
| ページ説明テキスト | "A tab control that displays a tab strip along with the content of the selected tab" |
| インラインTabItemセクション | "From Inline TabItems"ヘッダー付き |
| Archタブ | 最初のタブ - テキストとdelicate-arch画像を表示 |
| Leafタブ | 2番目のタブ - テキストとmaple-leaf画像を表示 |
| Disabledタブ | 無効化されたタブ（選択不可） |
| DataTemplateセクション | "From DataTemplate"ヘッダー付き |
| 動的生成タブ | ViewModelのTabsプロパティから生成 |
| Tab Placementコンボボックス | Left/Bottom/Right/Top選択 |
| ContentTemplateチェックボックス | "Set TabItem.ContentTemplate" |

## イベント仕様

### 1-TabItem選択

TabItemをクリックすると、TabControlのSelectedItemが変更され、対応するコンテンツが表示領域に表示されます。

### 2-TabPlacement変更

コンボボックスでタブ配置位置を変更すると、ViewModelのTabPlacementプロパティが更新され、両方のTabControlに反映されます。

### 3-ContentTemplate有効化

"Set TabItem.ContentTemplate"チェックボックスをオンにすると、DockPanelにWithContentTemplatesクラスが適用され、各TabItemに赤枠のBorderテンプレートが適用されます。

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- TabItemのHeaderプロパティにアンダースコアプレフィックス（_Arch、_Leaf）を使用することで、アクセスキーを設定できます
- DisplayMemberBindingを使用して、ViewModelアイテムの特定のプロパティをタブヘッダーとして表示できます
- ContentTemplateを使用することで、タブコンテンツの表示方法をカスタマイズできます

---

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

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

### 推奨読解順序

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

TabControlPageはMVVMパターンを採用しており、ViewModelでタブデータとタブ配置を管理しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | TabControlPageViewModel.cs | `samples/ControlCatalog/ViewModels/TabControlPageViewModel.cs` | Tabs配列とTabPlacementプロパティの定義を理解 |
| 1-2 | TabControlPageViewModelItem | `samples/ControlCatalog/ViewModels/TabControlPageViewModel.cs` | Header、Text、Image、IsEnabledプロパティを確認 |

**読解のコツ**: TabControlPageViewModelItemはシンプルなPOCOクラスで、プロパティ変更通知は実装していません。静的なタブデータとして使用されています。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | TabControlPage.xaml | `samples/ControlCatalog/Pages/TabControlPage.xaml` | 2つのTabControl（インラインとDataTemplate）の定義を確認 |
| 2-2 | TabControlPage.xaml.cs | `samples/ControlCatalog/Pages/TabControlPage.xaml.cs` | ViewModelの初期化とBitmap読み込みを確認 |

**主要処理フロー**:
1. **行12-13**: コードビハインドでTabControlPageViewModelを作成
2. **行17-38**: Tabs配列の初期化（3つのTabControlPageViewModelItem）
3. **行38**: TabPlacement初期値をDock.Topに設定
4. **行42-44**: LoadBitmap静的メソッドでavares://URIから画像を読み込み
5. **行45-63**: XAMLでインラインTabItemを定義（Header属性でアクセスキー設定）
6. **行73-91**: DataTemplateを使用したTabControl定義

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | TabControlPage.xaml（Styles） | `samples/ControlCatalog/Pages/TabControlPage.xaml` | WithContentTemplatesクラスによる条件付きスタイル適用 |

**主要処理フロー**:
- **行7**: DockPanelにWithContentTemplatesクラスを条件付きで適用
- **行9-26**: WithContentTemplatesスタイル内でTabItemとTabControlのContentTemplateを設定
- **行13-16**: TabItemにBorder（赤枠）付きContentPresenterを適用

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

```
MainView (HamburgerMenu)
    │
    └─ TabControlPage (UserControl)
           │
           ├─ TabControlPageViewModel
           │      ├─ Tabs (TabControlPageViewModelItem[])
           │      │      ├─ Item1: Arch
           │      │      ├─ Item2: Leaf
           │      │      └─ Item3: Disabled
           │      │
           │      └─ TabPlacement (Dock)
           │
           ├─ TabControl (インライン)
           │      ├─ TabItem: _Arch
           │      ├─ TabItem: _Leaf
           │      └─ TabItem: _Disabled (IsEnabled=False)
           │
           └─ TabControl (DataTemplate)
                  └─ ItemsSource ──▶ Tabs
                         └─ DataTemplate
                                ├─ TextBlock (Text)
                                └─ Image (Image)
```

### データフロー図

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

コードビハインド初期化 ───▶ new TabControlPageViewModelItem[] ───▶ Tabs配列
       │
       └──▶ LoadBitmap("avares://...") ───▶ Bitmap ───▶ Item.Image

TabPlacement ComboBox ───▶ ViewModel.TabPlacement ───▶ TabControl.TabStripPlacement
                                                              ↓
                                                        タブストリップ位置更新

UseContentTemplates ───▶ DockPanel.Classes.WithContentTemplates ───▶ TabItem.ContentTemplate適用
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| TabControlPage.xaml | `samples/ControlCatalog/Pages/TabControlPage.xaml` | ソース | ページのXAML定義 |
| TabControlPage.xaml.cs | `samples/ControlCatalog/Pages/TabControlPage.xaml.cs` | ソース | コードビハインド、ViewModel初期化 |
| TabControlPageViewModel.cs | `samples/ControlCatalog/ViewModels/TabControlPageViewModel.cs` | ソース | ViewModel、タブデータ定義 |
| TabControl.cs | `src/Avalonia.Controls/TabControl.cs` | フレームワーク | TabControlコントロール本体 |
| TabItem.cs | `src/Avalonia.Controls/TabItem.cs` | フレームワーク | TabItemコントロール |
| delicate-arch-896885_640.jpg | `samples/ControlCatalog/Assets/` | リソース | Archタブの画像 |
| maple-leaf-888807_640.jpg | `samples/ControlCatalog/Assets/` | リソース | Leafタブの画像 |
