# 画面設計書 39-Menu

## 概要

本ドキュメントは、ControlCatalogサンプルアプリケーションのMenuページに関する画面設計書です。Menuコントロールの各種機能と使用方法をデモンストレーションするページです。

### 本画面の処理概要

Menuページは、AvaloniaフレームワークにおけるMenuコントロールの機能を確認するためのデモ画面です。XAML定義によるメニュー、動的に生成されるメニュー、混合パターンのメニュー、ネイティブメニューバーのフォールバック表示を学習・検証できます。

**業務上の目的・背景**：メニューはデスクトップアプリケーションの標準的なナビゲーション要素です。ファイル操作、編集操作、設定アクセスなど、アプリケーションの主要機能へのアクセス手段を提供します。AvaloniaのMenuコントロールは、サブメニュー、キーボードショートカット（InputGesture）、チェックボックス、ラジオボタンなど、多様な機能を備えています。

**画面へのアクセス方法**：ControlCatalogアプリケーションのMainViewから、HamburgerMenuナビゲーションを使用して「Menu」を選択することでアクセスできます。

**主要な操作・処理内容**：
1. XAML定義メニュー：標準メニュー項目、サブメニュー、アイコン付き、チェックボックス、ラジオボタン
2. 動的生成メニュー：ViewModelのMenuItemsコレクションからメニューを生成
3. 混合パターンメニュー：XAML定義とViewModelバインディングの組み合わせ
4. ネイティブメニューバー：プラットフォームにネイティブメニューがない場合のフォールバック表示

**画面遷移**：
- 遷移元：MainView（HamburgerMenuによるナビゲーション）
- 遷移先：なし（デモページのため他画面への遷移機能はなし）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 17 | Menu | 主機能 | Menuコントロールのデモ。アプリケーションメニュー構築 |
| 18 | MenuItem | 補助機能 | メニュー項目とサブメニュー |

## 画面種別

デモ/サンプル画面

## URL/ルーティング

HamburgerMenuナビゲーション経由でアクセス（Avalonia UIフレームワークのページベースナビゲーション）

## 入出力項目

| 項目名 | 入力/出力 | 型 | 説明 |
|--------|----------|------|------|
| メニュー選択 | 入力 | イベント | メニュー項目のクリック |
| チェックボックス/ラジオボタン | 入力 | イベント | トグル状態の変更 |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| NativeMenuBar | NativeMenuBar | ネイティブメニューのフォールバック表示 |
| Defined in XAML | Menu | XAML定義のメニュー |
| Dynamically generated | Menu | 動的生成のメニュー |
| Mixed | Menu | 混合パターンのメニュー |

## イベント仕様

### 1-XAML定義メニュー

各MenuItemはXAMLで静的に定義されています。InputGestureでキーボードショートカット、ToggleTypeでチェックボックス/ラジオボタンの動作を設定できます。

### 2-動的生成メニュー

ViewModelのMenuItemsコレクションがItemsSourceにバインドされ、スタイルでHeader、Items、Command、CommandParameterが設定されます。

### 3-Openコマンド

Open...メニュー項目がクリックされると、StorageProvider.OpenFilePickerAsyncを使用してファイル選択ダイアログが表示されます。

### 4-Saveコマンド

Saveメニュー項目がクリックされると、Debug.WriteLineでメッセージが出力されます。

### 5-OpenRecentコマンド

Recentサブメニューの項目がクリックされると、ファイルパスがCommandParameterとして渡され、Debug.WriteLineで出力されます。

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

本画面はデモ画面のため、データベース操作は行いません。

## メッセージ仕様

本画面には固有のメッセージ表示はありません。コマンド実行時にDebug.WriteLineでコンソールにメッセージが出力されます。

## 例外処理

本画面はデモ画面のため、特別な例外処理は実装されていません。

## 備考

- MenuItem.ToggleType: None（デフォルト）、CheckBox、Radio
- MenuItem.GroupName: ラジオボタンのグループ化
- MenuItem.InputGesture: キーボードショートカットの表示（Ctrl+A等）
- NativeMenuBar: macOSなどのネイティブメニューが利用できない場合のフォールバック
- アンダースコア（_）付きの文字はアクセスキーとして機能（Alt+キー）
- MenuItem.Headerが"-"の場合はSeparatorとして表示

---

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

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

### 推奨読解順序

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

ViewModelとMenuItemViewModelの構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | MenuItemViewModel.cs | `samples/ControlCatalog/ViewModels/MenuItemViewModel.cs` | Header、Command、Items構造を理解 |
| 1-2 | MenuPageViewModel.cs | `samples/ControlCatalog/ViewModels/MenuPageViewModel.cs` | MenuItems、RecentItems、コマンド実装を理解 |

**読解のコツ**: MenuItemViewModelは再帰的な構造（Itemsプロパティ）を持ち、サブメニューを表現します。

#### Step 2: UI定義を理解する

XAMLでMenuの各種パターンを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | MenuPage.xaml | `samples/ControlCatalog/Pages/MenuPage.xaml` | XAML定義、動的生成、混合パターンを理解 |

**主要処理フロー**:
- **行9**: NativeMenuBarのフォールバック表示
- **行15-55**: XAML定義のMenu（サブメニュー、アイコン、チェックボックス、ラジオボタン）
- **行59-68**: 動的生成のMenu（ViewModelバインディング）
- **行73-95**: 混合パターンのMenu（XAML + ViewModelのRecentItems）

#### Step 3: コードビハインドを理解する

DataContextの設定とViewの参照を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | MenuPage.xaml.cs | `samples/ControlCatalog/Pages/MenuPage.xaml.cs` | DataContext設定、View参照の設定 |

**主要処理フロー**:
1. **行11**: DataContext = new MenuPageViewModel()
2. **行16-22**: OnDataContextChangedでViewModel.Viewにthisを設定

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

```
MenuPage (UserControl)
    |
    +-- MenuPage.xaml.cs (Code-behind)
    |       |
    |       +-- InitializeComponent()
    |       +-- DataContext = new MenuPageViewModel()
    |       +-- OnDataContextChanged()
    |               +-- _model.View = this
    |
    +-- MenuPageViewModel (ViewModel)
    |       |
    |       +-- MenuItems: IReadOnlyList<MenuItemViewModel>
    |       |       +-- _File
    |       |       |       +-- Open... -> OpenCommand
    |       |       |       +-- Save -> SaveCommand
    |       |       |       +-- Recent -> RecentItems
    |       |       +-- _Edit
    |       |               +-- _Copy
    |       |               +-- _Paste
    |       |
    |       +-- RecentItems: IReadOnlyList<MenuItemViewModel>
    |       |       +-- File1.txt -> OpenRecentCommand
    |       |       +-- File2.txt -> OpenRecentCommand
    |       |
    |       +-- OpenCommand -> Open()
    |       |       +-- StorageProvider.OpenFilePickerAsync()
    |       |
    |       +-- SaveCommand -> Save()
    |       |       +-- Debug.WriteLine("Save")
    |       |
    |       +-- OpenRecentCommand -> OpenRecent(path)
    |               +-- Debug.WriteLine($"Open recent: {path}")
    |
    +-- MenuItemViewModel
            +-- Header: string
            +-- Command: ICommand
            +-- CommandParameter: object
            +-- Items: IList<MenuItemViewModel>
```

### データフロー図

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

MenuItem Click ───────> Command.Execute() ────────────> コマンド処理実行
                              |
                              +-- OpenCommand
                              |       +-- FilePickerダイアログ表示
                              |
                              +-- SaveCommand
                              |       +-- Debug.WriteLine
                              |
                              +-- OpenRecentCommand
                                      +-- Debug.WriteLine(path)

ToggleType MenuItem ──> IsChecked Toggle ─────────────> チェック状態変更

Radio MenuItem ───────> GroupName内で排他的選択 ──────> ラジオボタン動作
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MenuPage.xaml | `samples/ControlCatalog/Pages/MenuPage.xaml` | XAML | UI定義 |
| MenuPage.xaml.cs | `samples/ControlCatalog/Pages/MenuPage.xaml.cs` | ソース | コードビハインド |
| MenuPageViewModel.cs | `samples/ControlCatalog/ViewModels/MenuPageViewModel.cs` | ソース | ViewModel、コマンド実装 |
| MenuItemViewModel.cs | `samples/ControlCatalog/ViewModels/MenuItemViewModel.cs` | ソース | メニュー項目モデル |
| github_icon.png | `samples/ControlCatalog/Assets/github_icon.png` | 画像 | メニューアイコン |
