# 画面設計書 87-Expanders

## 概要

本ドキュメントは、VirtualizationDemoアプリケーションにおけるExpanders（エクスパンダー）ページの画面設計について記載します。

### 本画面の処理概要

このページは、Expanderコントロールと仮想化ListBoxを組み合わせたデモンストレーションを行います。100件のアイテムをExpanderとして表示し、各アイテムの展開・折りたたみ状態を仮想化環境で管理します。Expanderの動的なサイズ変更と仮想化の相互作用を確認できます。

**業務上の目的・背景**：
開発者がAvaloniaの仮想化機能と動的サイズ変更コントロール（Expander）を組み合わせる際の動作を理解することを目的としています。FAQページ、アコーディオンメニュー、階層的なデータ表示など、展開・折りたたみUIを持つ大量データ表示の実装に役立ちます。

**画面へのアクセス方法**：
VirtualizationDemoアプリケーションを起動後、メインウィンドウのHamburgerMenuから「Expanders」タブを選択することでアクセスできます。

**主要な操作・処理内容**：
1. 100件のExpanderItemViewModelを生成（"Item 0"〜"Item 99"）
2. ListBoxで仮想化表示
3. 各Expanderのヘッダーをクリックして展開・折りたたみ
4. 展開時に200x300ピクセルの空Borderを表示

**画面遷移**：
- 遷移元：VirtualizationDemo MainWindow（HamburgerMenuナビゲーション）
- 遷移先：なし（同一ウィンドウ内の他タブへはHamburgerMenu経由）

**権限による表示制御**：
特に権限による表示制御はありません。デモ用途のため全ての機能が常に利用可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 22 | Expander | 主機能 | 展開・折りたたみ可能なコンテンツ表示 |
| 41 | VirtualizingStackPanel | 補助機能 | Expanderリストの仮想化表示 |

## 画面種別

デモ / インタラクティブ

## URL/ルーティング

HamburgerMenuナビゲーション: "Expanders"タブ

## 入出力項目

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|-----|------|
| Expanderヘッダークリック | 入力 | PointerPressed | 展開・折りたたみの切り替え |
| IsExpanded状態 | 入出力 | bool | 各Expanderの展開状態 |

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| ListBox | ListBox | 仮想化されたExpanderリスト |
| Expander | Expander | "Item X"ヘッダーを持つ折りたたみコントロール |
| Expanderコンテンツ | Border | 展開時に表示される200x300の空Border |

## イベント仕様

### 1-コンストラクタ（ViewModel）

ExpanderPageViewModelの初期化時にデータを生成します。

- **トリガー**：ViewModelのコンストラクタ呼び出し時
- **処理内容**：
  1. Enumerable.Range(0, 100)で0〜99の範囲を生成
  2. 各インデックスに対してExpanderItemViewModelを作成
  3. Header = $"Item {x}"を設定
  4. ObservableCollectionに格納

### 2-InitializeComponent

ページ初期化時に発生するイベントです。

- **トリガー**：ページのコンストラクタ呼び出し時
- **処理内容**：
  1. XAMLリソースを読み込み
  2. UIコントロールツリーを構築

### 3-Expander展開・折りたたみ

ExpanderのIsExpandedプロパティ変更時のイベントです。

- **トリガー**：Expanderヘッダーのクリック
- **処理内容**：
  1. IsExpandedプロパティがトグル
  2. RaiseAndSetIfChangedで変更通知
  3. Expanderコンテンツの表示・非表示が切り替わる
  4. ListBoxの仮想化が再計算

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

本画面はデータベースを使用しません。

## メッセージ仕様

本画面はメッセージを表示しません。

## 例外処理

本画面は静的なデータ生成と単純なバインディングのため、特別な例外処理はありません。

## 備考

- Expanderの展開状態はViewModelで管理されるため、スクロールしても状態が保持される
- 200x300の空Borderはプレースホルダーで、実際の使用時はコンテンツを配置
- 仮想化環境でのExpander動作テストが主目的

---

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

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

### 推奨読解順序

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

ExpanderItemViewModelの構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ExpanderItemViewModel.cs | `samples/VirtualizationDemo/ViewModels/ExpanderItemViewModel.cs` | 行1-21で全体構造を確認 |

**読解のコツ**: HeaderとIsExpandedの2つのプロパティのみを持つシンプルなViewModelです。

#### Step 2: ViewModelを理解する

ExpanderPageViewModelのデータ生成ロジックを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ExpanderPageViewModel.cs | `samples/VirtualizationDemo/ViewModels/ExpanderPageViewModel.cs` | 行1-17で全体を確認 |

**主要処理フロー**:
- **行8-14**: コンストラクタでEnumerable.Range(0, 100)から100件生成
- **行10-13**: Selectで各インデックスをExpanderItemViewModelに変換
- **行12**: Header = $"Item {x}"を設定

#### Step 3: XAMLレイアウトとItemTemplateを理解する

Expanderの配置とコンテンツを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ExpanderPageView.axaml | `samples/VirtualizationDemo/Views/ExpanderPageView.axaml` | 行1-18で全体を確認 |

**主要処理フロー**:
- **行9**: ListBox ItemsSource="{Binding Items}"
- **行12**: Expander Header="{Binding Header}" IsExpanded="{Binding IsExpanded}"
- **行13**: Border Width="200" Height="300"（空のプレースホルダー）

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

```
ExpanderPageView (UserControl)
    │
    ├─ コンストラクタ
    │      └─ InitializeComponent()
    │
    └─ ExpanderPageViewModel (DataContext)
           │
           ├─ コンストラクタ
           │      └─ Enumerable.Range(0, 100)
           │             └─ Select(x => new ExpanderItemViewModel)
           │
           └─ Items (ObservableCollection<ExpanderItemViewModel>)
                  │
                  └─ ExpanderItemViewModel
                         ├─ Header (string) = "Item X"
                         └─ IsExpanded (bool) = false
```

### データフロー図

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

アプリ起動      ─▶ ViewModel生成            ─▶ 100件のアイテム
                        │
                        ▼
                   Enumerable.Range
                        │
                        ▼
                   ListBox表示              ─▶ Expanderリスト
                        │
                        ▼
Expanderクリック ─▶ IsExpanded変更          ─▶ 展開・折りたたみ
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ExpanderPageView.axaml | `samples/VirtualizationDemo/Views/ExpanderPageView.axaml` | テンプレート | ExpanderページのUIレイアウト |
| ExpanderPageView.axaml.cs | `samples/VirtualizationDemo/Views/ExpanderPageView.axaml.cs` | ソース | コードビハインド（InitializeComponentのみ） |
| ExpanderPageViewModel.cs | `samples/VirtualizationDemo/ViewModels/ExpanderPageViewModel.cs` | ソース | Expanderアイテムの生成と管理 |
| ExpanderItemViewModel.cs | `samples/VirtualizationDemo/ViewModels/ExpanderItemViewModel.cs` | ソース | 個々のExpanderアイテムのViewModel |
| MainWindow.axaml | `samples/VirtualizationDemo/MainWindow.axaml` | テンプレート | HamburgerMenuナビゲーションを提供 |
