# 画面設計書 98-ContextMenu

## 概要

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

### 本画面の処理概要

**業務上の目的・背景**：本画面は、AvaloniaフレームワークにおけるContextMenuコントロールの統合テストを目的としています。右クリックによるコンテキストメニューの表示、メニュー項目の配置と動作などを検証するためのテストUIを提供します。UIオートメーションテストやE2Eテストでのコンテキストメニュー操作検証に使用されます。

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

**主要な操作・処理内容**：
1. ボタンを右クリックしてコンテキストメニューを表示
2. コンテキストメニューの項目（Item 1, Item 2）を選択

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 19 | ContextMenu | 主機能 | コンテキストメニューのテスト。右クリックメニュー表示、項目選択 |

## 画面種別

テスト・検証画面

## URL/ルーティング

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

## 入出力項目

| 項目名 | 入出力 | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| ShowContextMenu | 入力 | Button | - | コンテキストメニュー表示トリガーのボタン |
| ContextMenuItem1 | 入力 | MenuItem | - | コンテキストメニュー項目1 |
| ContextMenuItem2 | 入力 | MenuItem | - | コンテキストメニュー項目2 |

## 表示項目

| 項目名 | コントロール名 | 説明 |
|--------|--------------|------|
| ShowContextMenu | Button | 「Right-click to show context menu.」テキストを持つボタン |
| ContextMenu | ContextMenu | 2つのMenuItem（Item 1, Item 2）を持つコンテキストメニュー |

## イベント仕様

本画面はコードビハインドにイベントハンドラを定義していません。ContextMenuの標準動作のみを使用します。

### ContextMenuの標準動作

**右クリック**:
- ボタン上で右クリック: ContextMenuがポップアップ表示

**メニュー項目選択**:
- クリック: MenuItem選択（現在の実装ではイベントハンドラなし）

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- Button.ContextMenu添付プロパティでコンテキストメニューを関連付け
- ContextMenuItem1, ContextMenuItem2という名前でUIオートメーションからアクセス可能
- 現在の実装ではMenuItemにClickイベントハンドラは設定されていない（テスト用途）
- コードビハインドはInitializeComponent()のみで、追加のロジックなし

---

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

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

### 推奨読解順序

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

まず、ContextMenuコントロールの構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ContextMenu.cs | `src/Avalonia.Controls/ContextMenu.cs` | ContextMenuクラス、Open/Closeメソッド |
| 1-2 | MenuItem.cs | `src/Avalonia.Controls/MenuItem.cs` | MenuItem、Headerプロパティ |

**読解のコツ**: ContextMenuはPopupを内部的に使用しており、右クリックイベントで自動的に表示されます。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ContextMenuPage.axaml | `samples/IntegrationTestApp/Pages/ContextMenuPage.axaml` | UI構造、ContextMenuの定義 |
| 2-2 | ContextMenuPage.axaml.cs | `samples/IntegrationTestApp/Pages/ContextMenuPage.axaml.cs` | コードビハインド（最小限） |

**主要処理フロー**:
1. **行8 (axaml)**: ShowContextMenuボタンの定義
2. **行9-14 (axaml)**: Button.ContextMenuとしてContextMenuを定義
3. **行11-12 (axaml)**: MenuItem（Item 1, Item 2）の定義

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

```
ContextMenuPage
    │
    └─ コンストラクタ
           └─ InitializeComponent()
                  │
                  └─ ShowContextMenu 生成
                         │
                         └─ Button.ContextMenu
                                │
                                └─ ContextMenu
                                       ├─ ContextMenuItem1 (Header="Item 1")
                                       └─ ContextMenuItem2 (Header="Item 2")
```

### データフロー図

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

ボタン上で        ───▶  ContextMenu.Open()      ───▶  コンテキストメニュー表示
右クリック

MenuItem          ───▶  MenuItem.OnClick        ───▶  メニュー閉じる
クリック                 (イベントハンドラなし)
```

### 関連ファイル一覧

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