# 画面設計書 67-メインウィンドウ（RenderDemo）

## 概要

本ドキュメントは、Avalonia UIフレームワークのRenderDemoサンプルアプリケーションにおけるメインウィンドウの画面設計書です。レンダリング機能のデモを行うためのナビゲーション構造とデバッグオプションを提供するメインウィンドウを定義します。

### 本画面の処理概要

本画面は、RenderDemoアプリケーションのメインウィンドウとして、HamburgerMenuナビゲーションによる各種レンダリングデモページへのアクセスと、レンダリングデバッグ機能の制御を提供します。アニメーション、トランジション、描画、テキストレンダリングなど、Avaloniaのグラフィック機能を包括的にデモンストレーションするためのエントリーポイントです。

**業務上の目的・背景**：
レンダリングエンジンの機能検証や、グラフィックパフォーマンスのデバッグは、クロスプラットフォームUIフレームワークの開発において重要な作業です。本アプリケーションは、Avaloniaのレンダリング機能の動作確認とパフォーマンス分析を行うためのテストベッドとして機能します。

**画面へのアクセス方法**：
RenderDemoアプリケーションを起動すると直接表示されます。

**主要な操作・処理内容**：
1. ナビゲーション：HamburgerMenuから16種類のデモページを選択
2. Dirty Rects表示：レンダリングの更新領域をデバッグ表示
3. FPS表示：フレームレートのリアルタイム表示
4. レイアウト時間グラフ：レイアウト処理時間のグラフ表示
5. レンダー時間グラフ：レンダリング処理時間のグラフ表示
6. ウィンドウリサイズテスト：自動リサイズアニメーション

**画面遷移**：
- 遷移元：アプリケーション起動
- 遷移先：各デモページ（Animations、Transitions、CustomAnimator等、計16ページ）

**権限による表示制御**：
なし（デモアプリケーションのため権限管理は実装されていません）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 42 | Window | 主機能 | レンダリングデモのメインウィンドウ表示 |
| 16 | TabControl | 補助機能 | HamburgerMenuによるナビゲーション管理 |

## 画面種別

ナビゲーション / コンテナ

## URL/ルーティング

RenderDemoアプリケーションのエントリーポイント

## 入出力項目

| 項目名 | 項目種別 | データ型 | 必須 | 説明 |
|--------|----------|----------|------|------|
| Width | 入出力 | double | - | ウィンドウ幅（初期値800） |
| Height | 入出力 | double | - | ウィンドウ高さ（初期値600） |
| DrawDirtyRects | 入出力 | bool | - | Dirty Rects表示フラグ |
| DrawFps | 入出力 | bool | - | FPS表示フラグ（初期値true） |
| DrawLayoutTimeGraph | 入出力 | bool | - | レイアウト時間グラフ表示フラグ |
| DrawRenderTimeGraph | 入出力 | bool | - | レンダー時間グラフ表示フラグ |

## 表示項目

| 項目名 | 表示形式 | データソース | 説明 |
|--------|----------|--------------|------|
| HamburgerMenu | HamburgerMenu | - | ナビゲーションメニュー |
| Renderingメニュー | MenuFlyout | - | レンダリングデバッグオプション |
| Draw Dirty Rects項目 | MenuItem | DrawDirtyRects | 更新領域表示トグル |
| Draw FPS項目 | MenuItem | DrawFps | FPS表示トグル |
| Draw layout time graph項目 | MenuItem | DrawLayoutTimeGraph | レイアウト時間グラフトグル |
| Draw render time graph項目 | MenuItem | DrawRenderTimeGraph | レンダー時間グラフトグル |
| Testsメニュー | MenuFlyout | - | テスト機能メニュー |
| Resize window項目 | MenuItem | ResizeWindow | ウィンドウリサイズテスト |
| 各デモページタブ | TabItem | - | 16種類のデモページへのナビゲーション |

## イベント仕様

### 1-Draw Dirty Rectsトグル

レンダリング更新領域の可視化を切り替えます。

- **トリガー**: MenuItem選択
- **処理内容**: ToggleDrawDirtyRectsコマンド実行
- **データ更新**: DrawDirtyRectsプロパティを反転
- **効果**: RendererDiagnostics.DebugOverlaysにDirtyRectsフラグを設定/解除

### 2-Draw FPSトグル

フレームレート表示を切り替えます。

- **トリガー**: MenuItem選択
- **処理内容**: ToggleDrawFpsコマンド実行
- **データ更新**: DrawFpsプロパティを反転
- **効果**: RendererDiagnostics.DebugOverlaysにFpsフラグを設定/解除

### 3-Draw layout time graphトグル

レイアウト処理時間のグラフ表示を切り替えます。

- **トリガー**: MenuItem選択
- **処理内容**: ToggleDrawLayoutTimeGraphコマンド実行
- **データ更新**: DrawLayoutTimeGraphプロパティを反転
- **効果**: RendererDiagnostics.DebugOverlaysにLayoutTimeGraphフラグを設定/解除

### 4-Draw render time graphトグル

レンダリング処理時間のグラフ表示を切り替えます。

- **トリガー**: MenuItem選択
- **処理内容**: ToggleDrawRenderTimeGraphコマンド実行
- **データ更新**: DrawRenderTimeGraphプロパティを反転
- **効果**: RendererDiagnostics.DebugOverlaysにRenderTimeGraphフラグを設定/解除

### 5-Resize windowテスト

ウィンドウサイズを自動的に拡大・縮小するテストを実行します。

- **トリガー**: MenuItem選択
- **処理内容**: ResizeWindowコマンド実行
- **アニメーション**:
  - 30回ループで幅+10、高さ+5を10msごとに実行
  - 10ms待機
  - 30回ループで幅-10、高さ-5を10msごとに実行

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

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

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

該当なし

## メッセージ仕様

本画面にはメッセージ表示機能はありません。

## 例外処理

| 例外ケース | 対応処理 |
|-----------|---------|
| 特になし | - |

## 備考

- HamburgerMenuはExpandedModeThresholdWidth=760でコンパクトモードに切り替わります
- デフォルトでFPS表示（DrawFps=true）が有効です
- RendererDiagnosticsはウィンドウのデバッグオーバーレイを制御します
- 各デモページはTabItemとして定義され、HamburgerMenu内で管理されます

---

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

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

### 推奨読解順序

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

ViewModelのプロパティ構造とコマンド定義を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | MainWindowViewModel.cs | `samples/RenderDemo/ViewModels/MainWindowViewModel.cs` | デバッグフラグプロパティ（8-11行目）、Width/Height（12-13行目） |
| 1-2 | MainWindowViewModel.cs | `samples/RenderDemo/ViewModels/MainWindowViewModel.cs` | コマンド定義（15-21行目） |

**読解のコツ**: DrawDirtyRects、DrawFps、DrawLayoutTimeGraph、DrawRenderTimeGraphの4つのboolプロパティがレンダリングデバッグを制御します。各ToggleXxxコマンドは対応するプロパティを反転させます。

#### Step 2: UI構造を理解する

XAMLファイルでUIレイアウトとバインディングを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | HamburgerMenuとMenuFlyout構造（11-48行目） |
| 2-2 | MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | TabItem一覧（49-96行目） |

**主要処理フロー**:
1. **11行目**: HamburgerMenu（ExpandedModeThresholdWidth=760）
2. **12-48行目**: FlyoutBase.AttachedFlyout内のMenuFlyout
3. **14-43行目**: Renderingメニュー（4つのデバッグオプション）
4. **44-46行目**: Testsメニュー（Resize window）
5. **49-96行目**: 16個のTabItem（各デモページ）

#### Step 3: デバッグオーバーレイ連動を理解する

コードビハインドでのRendererDiagnostics設定を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | MainWindow.xaml.cs | `samples/RenderDemo/MainWindow.xaml.cs` | BindOverlayヘルパーメソッド（19-26行目） |
| 3-2 | MainWindow.xaml.cs | `samples/RenderDemo/MainWindow.xaml.cs` | 4つのオーバーレイバインディング（28-31行目） |

**主要処理フロー**:
- **19-26行目**: WhenAnyValueでプロパティ変更を監視し、DebugOverlaysを更新
- **28行目**: DrawDirtyRects → RendererDebugOverlays.DirtyRects
- **29行目**: DrawFps → RendererDebugOverlays.Fps
- **30行目**: DrawLayoutTimeGraph → RendererDebugOverlays.LayoutTimeGraph
- **31行目**: DrawRenderTimeGraph → RendererDebugOverlays.RenderTimeGraph

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

```
MainWindow (Window)
    │
    ├─ MainWindow.xaml.cs
    │      ├─ コンストラクタ
    │      │      ├─ new MainWindowViewModel()
    │      │      │
    │      │      └─ BindOverlay() x 4
    │      │             └─ WhenAnyValue().Subscribe()
    │      │                    └─ RendererDiagnostics.DebugOverlays設定
    │      │
    │      └─ DataContext = vm
    │
    └─ MainWindowViewModel
           │
           ├─ DrawDirtyRects / DrawFps / DrawLayoutTimeGraph / DrawRenderTimeGraph
           │      └─ プロパティ変更 → RendererDiagnostics更新
           │
           ├─ ToggleDrawDirtyRects / ToggleDrawFps / etc.
           │      └─ プロパティ反転
           │
           ├─ Width / Height
           │      └─ ウィンドウサイズバインディング
           │
           └─ ResizeWindow
                  └─ ResizeWindowAsync()
                         ├─ 30回ループ: Width += 10, Height += 5
                         └─ 30回ループ: Width -= 10, Height -= 5
```

### データフロー図

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

MenuItem.Command ─────────────▶ ToggleDrawXxx() ─────────────────▶ DrawXxx反転
                                      │
                                      ▼
DrawXxx変更 ──────────────────▶ WhenAnyValue().Subscribe() ──────▶ DebugOverlays設定
                                      │
                                      ▼
RendererDiagnostics ◀────────── DebugOverlays |= / &= ──────────▶ オーバーレイ表示

ResizeWindow ─────────────────▶ ResizeWindowAsync() ─────────────▶ Width/Height変更
                                      │                                  │
                                      └─ 30回 x 2ループ ─────────────────┘
                                                                         │
                                                                         ▼
                                                                  ウィンドウリサイズ
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | XAML | UI定義、HamburgerMenu、MenuFlyout |
| MainWindow.xaml.cs | `samples/RenderDemo/MainWindow.xaml.cs` | ソース | コードビハインド、DebugOverlays設定 |
| MainWindowViewModel.cs | `samples/RenderDemo/ViewModels/MainWindowViewModel.cs` | ソース | ViewModel、デバッグフラグ、リサイズコマンド |
| HamburgerMenu.cs | `samples/ControlSamples/HamburgerMenu.cs` | ソース | HamburgerMenuコントロール |
| AnimationsPage.xaml | `samples/RenderDemo/Pages/AnimationsPage.xaml` | XAML | アニメーションデモページ |
| TransitionsPage.xaml | `samples/RenderDemo/Pages/TransitionsPage.xaml` | XAML | トランジションデモページ |
