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

## 概要

本ドキュメントは、VirtualizationDemoアプリケーションにおけるメインウィンドウの画面設計について記載します。

### 本画面の処理概要

このウィンドウは、Avaloniaフレームワークの仮想化機能をデモンストレーションするアプリケーションのメインウィンドウです。HamburgerMenuコントロールを使用したナビゲーション構造を持ち、3つのデモページ（Playground、Chat、Expanders）へのアクセスを提供します。大量データの効率的な表示に関する仮想化技術の実例を示すことを目的としています。

**業務上の目的・背景**：
開発者がAvaloniaの仮想化機能（VirtualizingStackPanel）を理解し、大量データを扱うアプリケーション（チャットアプリ、長大なリスト、動的コンテンツなど）を効率的に実装する際の参考とすることを目的としています。仮想化は、メモリ使用量の最適化とスムーズなスクロール体験を実現するために不可欠な技術です。

**画面へのアクセス方法**：
VirtualizationDemoアプリケーションを起動すると、このメインウィンドウが直接表示されます。

**主要な操作・処理内容**：
1. HamburgerMenuによる3つのデモページ間のナビゲーション
2. 「Playground」タブ：仮想化ListBoxの各種設定とインタラクション
3. 「Chat」タブ：チャット風UIでの仮想化表示
4. 「Expanders」タブ：Expanderコントロールと仮想化の組み合わせ

**画面遷移**：
- 遷移元：アプリケーション起動
- 遷移先：
  - PlaygroundPageView（「Playground」タブ）
  - ChatPageView（「Chat」タブ）
  - ExpanderPageView（「Expanders」タブ）

**権限による表示制御**：
特に権限による表示制御はありません。デモ用途のため全ての機能が常に利用可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 42 | Window | 主機能 | アプリケーションのメインウィンドウ表示 |
| 16 | TabControl | 補助機能 | HamburgerMenuによるタブベースナビゲーション |

## 画面種別

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

## URL/ルーティング

アプリケーションルート（起動時に表示）

## 入出力項目

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|-----|------|
| タブ選択 | 入力 | TabItem | HamburgerMenuでの選択タブ |

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| HamburgerMenu | HamburgerMenu | サイドバー付きナビゲーションコントロール |
| Playgroundタブ | TabItem | 仮想化プレイグラウンドページへのナビゲーション |
| Chatタブ | TabItem | チャット仮想化デモページへのナビゲーション |
| Expandersタブ | TabItem | Expander仮想化デモページへのナビゲーション |

## イベント仕様

### 1-コンストラクタ

ウィンドウ初期化時に発生するイベントです。

- **トリガー**：アプリケーション起動時
- **処理内容**：
  1. InitializeComponent()でXAMLリソースを読み込み
  2. MainWindowViewModelをDataContextに設定
  3. 各ページのViewModelを初期化

### 2-タブ選択変更

HamburgerMenuのタブが切り替えられた際のイベントです。

- **トリガー**：ユーザーがHamburgerMenuのタブを選択
- **処理内容**：
  1. 選択されたTabItemに対応するPageViewが表示
  2. DataContextを通じて対応するViewModelがバインド

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

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

## メッセージ仕様

本画面はメッセージを表示しません。

## 例外処理

本画面は静的なXAML定義と単純なViewModel初期化のため、特別な例外処理はありません。

## 備考

- HamburgerMenuはControlSamplesネームスペースからインポートされるカスタムコントロール
- 各タブのScrollViewer.VerticalScrollBarVisibility="Disabled"は、子コンテンツが独自のスクロール処理を行うため
- ViewModelはシングルトンパターンで各ページのViewModelを保持

---

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

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

### 推奨読解順序

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

ViewModelの階層構造と各ページViewModelの関係を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | MainWindowViewModel.cs | `samples/VirtualizationDemo/ViewModels/MainWindowViewModel.cs` | 行7-9で各ページViewModelのプロパティを確認 |

**読解のコツ**: MainWindowViewModelは3つの子ViewModelを保持し、各タブのDataContextとして使用されます。

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

コードビハインドでのViewModel設定を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | MainWindow.axaml.cs | `samples/VirtualizationDemo/MainWindow.axaml.cs` | 行10-12でDataContext設定を確認 |

**主要処理フロー**:
- **行8-12**: コンストラクタでInitializeComponentとDataContext設定
- **行11**: `new MainWindowViewModel()`でViewModel生成

#### Step 3: XAMLレイアウトを理解する

HamburgerMenuとタブ構造を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | MainWindow.axaml | `samples/VirtualizationDemo/MainWindow.axaml` | 行9-19でHamburgerMenu構造を確認 |

**主要処理フロー**:
- **行9**: `<controls:HamburgerMenu>`でナビゲーション開始
- **行10-12**: Playgroundタブの定義、DataContext="{Binding Playground}"
- **行13-15**: Chatタブの定義
- **行16-18**: Expandersタブの定義

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

```
VirtualizationDemo.MainWindow (Window)
    │
    ├─ コンストラクタ
    │      ├─ InitializeComponent()
    │      └─ DataContext = new MainWindowViewModel()
    │
    ├─ MainWindowViewModel
    │      ├─ Playground (PlaygroundPageViewModel)
    │      ├─ Chat (ChatPageViewModel)
    │      └─ Expanders (ExpanderPageViewModel)
    │
    └─ HamburgerMenu
           │
           ├─ TabItem[0] "Playground"
           │      └─ PlaygroundPageView
           │             └─ DataContext = {Binding Playground}
           │
           ├─ TabItem[1] "Chat"
           │      └─ ChatPageView
           │             └─ DataContext = {Binding Chat}
           │
           └─ TabItem[2] "Expanders"
                  └─ ExpanderPageView
                         └─ DataContext = {Binding Expanders}
```

### データフロー図

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

アプリ起動      ─▶ MainWindow生成          ─▶ ウィンドウ表示
                        │
                        ▼
                   ViewModel生成
                        │
                        ├─▶ PlaygroundPageViewModel
                        ├─▶ ChatPageViewModel
                        └─▶ ExpanderPageViewModel
                        │
                        ▼
                   DataContext設定         ─▶ タブコンテンツ表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MainWindow.axaml | `samples/VirtualizationDemo/MainWindow.axaml` | テンプレート | メインウィンドウのUIレイアウト定義 |
| MainWindow.axaml.cs | `samples/VirtualizationDemo/MainWindow.axaml.cs` | ソース | コードビハインド、ViewModel設定 |
| MainWindowViewModel.cs | `samples/VirtualizationDemo/ViewModels/MainWindowViewModel.cs` | ソース | 各ページViewModelを保持 |
| PlaygroundPageView.axaml | `samples/VirtualizationDemo/Views/PlaygroundPageView.axaml` | テンプレート | Playgroundタブのコンテンツ |
| ChatPageView.axaml | `samples/VirtualizationDemo/Views/ChatPageView.axaml` | テンプレート | Chatタブのコンテンツ |
| ExpanderPageView.axaml | `samples/VirtualizationDemo/Views/ExpanderPageView.axaml` | テンプレート | Expandersタブのコンテンツ |
