# 画面設計書 94-ListBox

## 概要

本ドキュメントは、IntegrationTestAppアプリケーションにおけるListBoxPageの画面設計書です。ListBoxコントロールの基本機能をテストするためのページとして設計されています。

### 本画面の処理概要

**業務上の目的・背景**：本画面は、AvaloniaフレームワークにおけるListBoxコントロールの統合テストを目的としています。大量データのリスト表示、複数選択モード、選択状態の制御など、ListBoxの基本的な振る舞いが正しく動作することを検証するためのテストUIを提供します。特に100項目のデータバインディングと複数選択機能のテストに重点を置いており、UIオートメーションテストやE2Eテストでのコントロール操作検証に使用されます。

**画面へのアクセス方法**：IntegrationTestAppのメインウィンドウ左側のListBoxナビゲーションから「ListBox」項目を選択することでアクセスします。

**主要な操作・処理内容**：
1. ListBoxから単一または複数の項目を選択（SelectionMode="Multiple"）
2. リスト内の100項目（Item 0 ～ Item 99）をスクロールして閲覧
3. 「Clear Selection」ボタンで選択をクリア

**画面遷移**：この画面はIntegrationTestAppのメインウィンドウ内のページとして表示されます。他画面への遷移機能はありません。

**権限による表示制御**：特になし。すべてのユーザーが全機能を利用可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 9 | ListBox | 主機能 | ListBoxのテスト。複数選択モード、データバインディング、選択クリア |

## 画面種別

テスト・検証画面

## URL/ルーティング

デスクトップアプリケーションのため、URLルーティングはなし。MainWindowのListBoxナビゲーションから「ListBox」を選択。

## 入出力項目

| 項目名 | 入出力 | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| BasicListBox | 入力 | ListBox | - | テスト対象のListBox。100項目、複数選択モード |
| ListBoxSelectionClear | 入力 | Button | - | 選択クリアボタン |

## 表示項目

| 項目名 | コントロール名 | 説明 |
|--------|--------------|------|
| BasicListBox | ListBox | 100項目（Item 0 ～ Item 99）を持つリストボックス |

## イベント仕様

### 1-ListBoxSelectionClear_Click

**トリガー**: 「Clear Selection」ボタン押下

**処理内容**:
1. BasicListBox.SelectedIndexを-1に設定
2. すべての選択状態がクリアされる

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

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

本画面はUIコントロールのテスト用であり、データベース操作は行いません。

## メッセージ仕様

本画面ではシステムメッセージの表示はありません。

## 例外処理

本画面では例外処理は定義されていません。

## 備考

- SelectionMode="Multiple"により、Ctrlキーまたはクリックで複数項目を選択可能
- ListBoxItemsプロパティはコンストラクタで100項目を生成し、DataContextとして設定
- ItemsSourceバインディングによりViewModelパターンでデータを供給
- DockPanelレイアウトでListBoxを上部、ボタンを下部に配置

---

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

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

### 推奨読解順序

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

まず、ListBoxに表示されるデータの構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ListBoxPage.axaml.cs | `samples/IntegrationTestApp/Pages/ListBoxPage.axaml.cs` | ListBoxItemsプロパティの定義とデータ生成 |

**読解のコツ**: Enumerable.Range(0, 100)で0から99までの100個の整数を生成し、"Item " + xでフォーマットしています。

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

処理の起点となるページファイルを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ListBoxPage.axaml | `samples/IntegrationTestApp/Pages/ListBoxPage.axaml` | UI構造、バインディング定義、SelectionMode設定 |
| 2-2 | ListBoxPage.axaml.cs | `samples/IntegrationTestApp/Pages/ListBoxPage.axaml.cs` | コンストラクタでのデータ初期化 |

**主要処理フロー**:
1. **行12-14 (axaml.cs)**: コンストラクタでListBoxItemsを生成、DataContextを自身に設定
2. **行13 (axaml)**: ItemsSourceバインディングとSelectionMode="Multiple"の設定
3. **行11 (axaml)**: Clear Selectionボタンの定義

#### Step 3: イベント処理を理解する

選択クリアのイベントハンドラを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ListBoxPage.axaml.cs | `samples/IntegrationTestApp/Pages/ListBoxPage.axaml.cs` | ListBoxSelectionClear_Clickの実装 |

**主要処理フロー**:
- **行19-22**: SelectedIndexを-1に設定して選択クリア

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

```
ListBoxPage
    │
    ├─ コンストラクタ
    │      ├─ InitializeComponent()
    │      ├─ ListBoxItems = Enumerable.Range(0, 100)
    │      │                 .Select(x => "Item " + x)
    │      │                 .ToList()
    │      └─ DataContext = this
    │
    └─ ListBoxSelectionClear_Click
           └─ BasicListBox.SelectedIndex = -1
```

### データフロー図

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

コンストラクタ実行    ───▶  Enumerable.Range(0, 100)  ───▶  ListBoxItems
                          .Select(x => "Item " + x)       (100項目のリスト)
                                    │
                                    ▼
                          DataContext = this       ───▶  ListBoxに表示
                                    │
                          ItemsSource バインディング

Clear Selection    ───▶  SelectedIndex = -1  ───▶  すべての選択解除
ボタン押下
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ListBoxPage.axaml | `samples/IntegrationTestApp/Pages/ListBoxPage.axaml` | ソース | ページのUI定義 |
| ListBoxPage.axaml.cs | `samples/IntegrationTestApp/Pages/ListBoxPage.axaml.cs` | ソース | ページのコードビハインド、データ生成 |
| MainWindow.axaml | `samples/IntegrationTestApp/MainWindow.axaml` | ソース | メインウィンドウとナビゲーション |
| MainWindow.axaml.cs | `samples/IntegrationTestApp/MainWindow.axaml.cs` | ソース | ページ生成ファクトリ（行88） |
