# 画面設計書 102-Menu

## 概要

本ドキュメントは、IntegrationTestAppにおけるメニューコントロールのテストページ（MenuPage）の画面設計書です。

### 本画面の処理概要

本画面は、Avaloniaフレームワークのメニューコントロール機能を統合テストするためのテストページです。階層構造を持つメニューの表示、キーボードアクセラレータ、メニュー項目のクリックイベント処理などをテストできます。

**業務上の目的・背景**：本画面は、Avaloniaフレームワークの品質保証のために存在します。メニューコントロールは、アプリケーションの主要なナビゲーション手段として広く使用される重要な機能です。階層メニュー、キーボードショートカット（InputGesture）、フォーカス管理などの機能が正しく動作することを検証し、フレームワーク全体の信頼性を向上させます。

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

**主要な操作・処理内容**：
1. Rootメニューをクリックして子メニューを展開
2. Child 1メニュー項目をクリック（またはCtrl+Oショートカット）
3. Child 2メニュー項目をホバーしてサブメニュー（Grandchild）を展開
4. Grandchildメニュー項目をクリック
5. クリックされたメニュー項目名がテキストブロックに表示
6. Resetボタンで表示をクリア

**画面遷移**：
- 遷移元：IntegrationTestApp MainWindow（ListBoxナビゲーション）
- 遷移先：なし（テストページ単体）

**権限による表示制御**：本画面は統合テスト用のため、権限による表示制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 17 | Menu | 主機能 | メニューのテスト。階層メニュー構造の表示と操作 |

## 画面種別

テスト画面

## URL/ルーティング

IntegrationTestApp内のUserControlとして読み込まれるため、URLルーティングはありません。
クラス名: `IntegrationTestApp.Pages.MenuPage`

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| クリックメニュー項目 | 出力 | string | - | 最後にクリックされたメニュー項目のヘッダー |
| フォーカステスト入力 | 入力 | string | - | フォーカス管理テスト用のテキスト入力 |

## 表示項目

| 項目名 | コントロール名 | 種別 | 説明 |
|--------|--------------|------|------|
| Root Menu | RootMenuItem | MenuItem | ルートメニュー項目（ヘッダー: "_Root"） |
| Child 1 | Child1MenuItem | MenuItem | 子メニュー項目1（ヘッダー: "_Child 1"、Ctrl+O） |
| Child 2 | Child2MenuItem | MenuItem | 子メニュー項目2（ヘッダー: "C_hild 2"） |
| Grandchild | GrandchildMenuItem | MenuItem | 孫メニュー項目（ヘッダー: "_Grandchild"） |
| Clicked MenuItem | ClickedMenuItem | TextBlock | クリックされたメニュー項目名を表示（初期値: "None"） |
| Reset Button | MenuClickedMenuItemReset | Button | 表示リセットボタン |
| Focus Test | MenuFocusTest | TextBox | フォーカス管理テスト用テキストボックス |

## イベント仕様

### 1-MenuClicked

Child1MenuItemまたはGrandchildMenuItemがクリックされた際に発火します。

**処理フロー**:
1. クリックされたMenuItemのHeaderプロパティを取得
2. ClickedMenuItemテキストブロックに表示

### 2-MenuClickedMenuItemReset_Click

Resetボタンがクリックされた際に発火します。

**処理フロー**:
1. ClickedMenuItemテキストブロックを "None" にリセット

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

本画面はUIテスト用であり、データベースとの連携はありません。

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|------------|------|--------------|---------|
| MSG-001 | 情報 | None | 初期状態またはリセット後 |
| MSG-002 | 情報 | _Child 1 | Child 1メニュークリック時 |
| MSG-003 | 情報 | _Grandchild | Grandchildメニュークリック時 |

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| senderがMenuItemでない場合 | Headerの取得に失敗し、nullが表示される可能性 |

## 備考

- メニューヘッダーの`_`（アンダースコア）はキーボードアクセスキーを示します（例: "_Root"はAlt+Rでアクセス）
- Child 1には`InputGesture="Ctrl+O"`が設定されており、キーボードショートカットでも操作可能です
- MenuFocusTestテキストボックスは、メニュー操作後のフォーカス移動テストに使用されます

---

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

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

### 推奨読解順序

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

メニューコントロールの基本構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | MenuItem.cs | `src/Avalonia.Controls/MenuItem.cs` | メニュー項目の基本クラス |
| 1-2 | Menu.cs | `src/Avalonia.Controls/Menu.cs` | メニューコンテナクラス |

**読解のコツ**: MenuItemはHeaderedSelectingItemsControlを継承しており、階層構造をサポートします。InputGestureプロパティでキーボードショートカットを設定できます。

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

処理の起点となるXAMLファイルとコードビハインドを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | MenuPage.axaml | `samples/IntegrationTestApp/Pages/MenuPage.axaml` | 画面レイアウトとメニュー階層の定義 |
| 2-2 | MenuPage.axaml.cs | `samples/IntegrationTestApp/Pages/MenuPage.axaml.cs` | イベントハンドラの実装 |

**主要処理フロー**:
1. **行8-15**: DockPanel.Dock="Top"でメニューを配置
2. **行9**: RootMenuItemが親メニュー
3. **行10**: Child1MenuItemにClick="MenuClicked"とInputGesture="Ctrl+O"を設定
4. **行11-13**: Child2MenuItemの子としてGrandchildMenuItemを配置
5. **行17**: ClickedMenuItemテキストブロックで結果表示
6. **行18**: Resetボタンでリセット

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

クリックイベントの処理フローを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | MenuPage.axaml.cs | `samples/IntegrationTestApp/Pages/MenuPage.axaml.cs` | MenuClickedメソッドの実装 |

**主要処理フロー**:
- **行13-17**: MenuClickedでsenderをMenuItemにキャストしてHeaderを取得
- **行20-23**: MenuClickedMenuItemReset_Clickでテキストをリセット

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

```
MenuPage
    │
    ├─ Menu (DockPanel.Dock="Top")
    │      │
    │      └─ RootMenuItem
    │             ├─ Child1MenuItem ─── Click → MenuClicked()
    │             │                          └─ ClickedMenuItem.Text = Header
    │             │
    │             └─ Child2MenuItem
    │                    └─ GrandchildMenuItem ─── Click → MenuClicked()
    │                                                   └─ ClickedMenuItem.Text = Header
    │
    ├─ StackPanel
    │      ├─ ClickedMenuItem (TextBlock) ← 結果表示
    │      ├─ MenuClickedMenuItemReset (Button) ─── Click → Reset
    │      └─ MenuFocusTest (TextBox) ← フォーカステスト用
    │
    └─ MenuClickedMenuItemReset_Click()
           └─ ClickedMenuItem.Text = "None"
```

### データフロー図

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

MenuItem Click ───▶ MenuClicked() ───▶ ClickedMenuItem.Text
                           │
                           ▼
                    sender as MenuItem
                           │
                           ▼
                    Header?.ToString()
                           │
                           ▼
Reset Button Click ───▶ Reset to "None" ───▶ ClickedMenuItem.Text
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MenuPage.axaml | `samples/IntegrationTestApp/Pages/MenuPage.axaml` | ソース | 画面レイアウト定義（XAML） |
| MenuPage.axaml.cs | `samples/IntegrationTestApp/Pages/MenuPage.axaml.cs` | ソース | イベントハンドラ実装（コードビハインド） |
| MainWindow.axaml | `samples/IntegrationTestApp/MainWindow.axaml` | ソース | 親ウィンドウ（ナビゲーション） |
| Menu.cs | `src/Avalonia.Controls/Menu.cs` | ソース | メニューコントロールの実装 |
| MenuItem.cs | `src/Avalonia.Controls/MenuItem.cs` | ソース | メニュー項目コントロールの実装 |
