# 画面設計書 1-メインウィンドウ

## 概要

本ドキュメントは、ControlCatalogアプリケーションのメインウィンドウ（MainWindow）の画面設計を定義します。

### 本画面の処理概要

このメインウィンドウは、Avalonia UIフレームワークのコントロールカタログアプリケーションの中心となるウィンドウです。アプリケーション起動時に最初に表示され、各種UIコントロールのデモンストレーションページへのナビゲーション機能を提供します。

**業務上の目的・背景**：本画面は、Avalonia UIフレームワークの各種コントロールを一覧し、デモンストレーションするためのサンプルアプリケーションのエントリーポイントです。開発者がAvaloniaの各種コントロールの動作を確認し、実装方法を学習するために使用されます。ウィンドウの拡張クライアント領域やカスタムタイトルバー設定など、高度なウィンドウカスタマイズ機能のデモも兼ねています。

**画面へのアクセス方法**：アプリケーション起動時に自動的に表示されます。ControlCatalogアプリケーションを実行すると、このメインウィンドウがデフォルトで開かれます。

**主要な操作・処理内容**：
1. File > Openメニューからファイルを開く操作（Recent履歴に項目追加）
2. File > Exit（またはQuit）メニューからアプリケーションを終了
3. Edit > Copy/Pasteメニュー項目の表示
4. Options > チェックボックス・ラジオボタン型のメニュー項目操作
5. ウィンドウの最小化・最大化・通常状態の切り替え
6. ウィンドウのリサイズ操作
7. MainViewを通じた各コントロールデモページへのナビゲーション

**画面遷移**：
- 遷移元：アプリケーション起動
- 遷移先：MainView内のHamburgerMenuを通じて各デモページ（CompositionPage、AcceleratorPage等）に遷移
- DecoratedWindowへの遷移も可能

**権限による表示制御**：本アプリケーションはデモ用のため、特別な権限制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 42 | Window | 主機能 | アプリケーションのメインウィンドウを表示。ウィンドウの状態管理、サイズ変更、最小化・最大化を制御 |
| 48 | NativeMenu | 補助機能 | File/Edit/Optionsメニューをネイティブメニューバーとして表示 |
| 58 | Binding | 主機能 | ウィンドウプロパティ（ExtendClientAreaEnabled、WindowState等）のデータバインディング |

## 画面種別

メインウィンドウ（アプリケーションシェル）

## URL/ルーティング

デスクトップアプリケーションのため、URLルーティングは該当なし。アプリケーション起動時のエントリーポイント。

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 説明 | バインディング |
|--------|----------|----------|------|---------------|
| ExtendClientAreaEnabled | 入力 | bool | クライアント領域を装飾に拡張するか | MainWindowViewModel.ExtendClientAreaEnabled |
| ChromeHints | 入力 | ExtendClientAreaChromeHints | クライアント領域拡張時のクロームヒント | MainWindowViewModel.ChromeHints |
| TitleBarHeight | 入力 | double | タイトルバーの高さヒント | MainWindowViewModel.TitleBarHeight |
| CanResize | 入力 | bool | リサイズ可能かどうか | MainWindowViewModel.CanResize |
| CanMinimize | 入力 | bool | 最小化可能かどうか | MainWindowViewModel.CanMinimize |
| CanMaximize | 入力 | bool | 最大化可能かどうか | MainWindowViewModel.CanMaximize |
| WindowState | 入出力 | WindowState | ウィンドウの状態（通常/最小化/最大化/フルスクリーン） | MainWindowViewModel.WindowState |

## 表示項目

| 項目名 | 表示位置 | データ型 | 説明 |
|--------|----------|----------|------|
| Title | タイトルバー | string | "Avalonia Control Gallery" |
| Icon | タイトルバー | Icon | test_icon.ico |
| MainView | メインコンテンツ | UserControl | HamburgerMenuを持つメインビュー |
| Content In Title Bar | タイトルバー内 | TextBlock | ExtendClientAreaEnabled時に表示 |

## イベント仕様

### 1-OnOpenClicked

**トリガー**: File > Open メニュークリック（Ctrl+O）

**処理内容**:
1. Recent（最近使ったファイル）メニューに新しい項目を追加
2. 項目名は "Item " + (現在の項目数 + 1)

**コード参照**: MainWindow.xaml.cs 25-28行目

### 2-OnCloseClicked

**トリガー**: File > Exit/Quit メニュークリック（macOS: Cmd+Q、Windows: Alt+F4）

**処理内容**:
1. ウィンドウを閉じる（Close()メソッド呼び出し）
2. アプリケーションが終了

**コード参照**: MainWindow.xaml.cs 30-33行目

### 3-WindowState変更

**トリガー**: ウィンドウの最小化/最大化/復元操作

**処理内容**:
1. MainWindowViewModel.WindowStateプロパティが双方向バインディングで更新
2. UIに状態変化が反映

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

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

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

## メッセージ仕様

| メッセージID | 種別 | 内容 | 表示条件 |
|-------------|------|------|----------|
| N/A | - | - | - |

本画面では特別なメッセージ表示は行われません。

## 例外処理

| 例外種別 | 発生条件 | 対処 |
|----------|----------|------|
| - | - | - |

本画面では特別な例外処理は実装されていません。

## 備考

- macOSとWindows/Linuxで終了メニューの表示が異なる（macOS: "Quit Avalonia"、それ以外: "E_xit"）
- macOSとWindows/Linuxで終了のキーボードショートカットが異なる（macOS: Cmd+Q、それ以外: Alt+F4）
- Background="Transparent"により透過背景をサポート
- 最小ウィンドウサイズは500x300、デフォルトサイズは1024x800

---

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

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

### 推奨読解順序

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

まず、MainWindowViewModelで管理されるウィンドウの状態データを理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | MainWindowViewModel.cs | `samples/ControlCatalog/ViewModels/MainWindowViewModel.cs` | ウィンドウの状態（WindowState、ExtendClientAreaEnabled等）の管理方法を理解 |

**読解のコツ**: ViewModelBaseを継承しており、RaiseAndSetIfChangedメソッドでプロパティ変更通知を実装しています。各プロパティがXAMLのどの要素とバインドされているか確認してください。

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

処理の起点となるMainWindowクラスを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | MainWindow.xaml | `samples/ControlCatalog/MainWindow.xaml` | XAMLでのウィンドウ定義、データバインディング、NativeMenuの構造を理解 |
| 2-2 | MainWindow.xaml.cs | `samples/ControlCatalog/MainWindow.xaml.cs` | コードビハインドでのイベントハンドラ実装を確認 |

**主要処理フロー**:
1. **10-17行目（XAML）**: ウィンドウプロパティのデータバインディング定義
2. **19-53行目（XAML）**: NativeMenuの定義（File/Edit/Options）
3. **60-70行目（XAML）**: PanelとMainViewの配置
4. **25-28行目（C#）**: OnOpenClickedでRecent履歴に項目追加
5. **30-33行目（C#）**: OnCloseClickedでウィンドウを閉じる

#### Step 3: ネイティブメニューを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | MainWindow.xaml | `samples/ControlCatalog/MainWindow.xaml` | NativeMenu.Menu添付プロパティでメニュー定義 |

**主要処理フロー**:
- **21-33行目**: Fileメニュー（Open、Recent、Quit/Exit）
- **34-39行目**: Editメニュー（Copy、Paste）
- **40-51行目**: Optionsメニュー（CheckBox、Radio型メニュー）

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

```
App.axaml.cs（アプリケーション起動）
    │
    ├─ MainWindow（ウィンドウ初期化）
    │      ├─ InitializeComponent()
    │      │      └─ XAML解析・バインディング設定
    │      │
    │      ├─ MainWindowViewModel（DataContext）
    │      │      └─ プロパティバインディング
    │      │
    │      └─ MainView（コンテンツ）
    │             └─ HamburgerMenu
    │                    └─ 各デモページ
    │
    └─ NativeMenu
           ├─ OnOpenClicked → _recentMenu.Items.Insert()
           └─ OnCloseClicked → Close()
```

### データフロー図

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

ユーザー操作 ───────▶ MainWindow ─────────────▶ 画面表示
  │                        │
  ├─ File > Open ────▶ OnOpenClicked() ────▶ Recent履歴更新
  │                        │
  ├─ File > Exit ────▶ OnCloseClicked() ──▶ ウィンドウ終了
  │                        │
  └─ ウィンドウ状態 ──▶ ViewModel ──────────▶ UI状態更新
       変更                 バインディング
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MainWindow.xaml | `samples/ControlCatalog/MainWindow.xaml` | XAML | ウィンドウのUI定義 |
| MainWindow.xaml.cs | `samples/ControlCatalog/MainWindow.xaml.cs` | ソース | コードビハインド・イベントハンドラ |
| MainWindowViewModel.cs | `samples/ControlCatalog/ViewModels/MainWindowViewModel.cs` | ソース | ウィンドウ状態のViewModel |
| MainView.xaml | `samples/ControlCatalog/MainView.xaml` | XAML | メインコンテンツエリアのUI定義 |
| test_icon.ico | `samples/ControlCatalog/Assets/test_icon.ico` | リソース | ウィンドウアイコン |
| github_icon.png | `samples/ControlCatalog/Assets/github_icon.png` | リソース | メニューアイコン |
