# 画面設計書 2-メインビュー

## 概要

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

### 本画面の処理概要

このメインビューは、MainWindow内に配置されるUserControlで、HamburgerMenuコントロールを使用して各種コントロールのデモページへのナビゲーションを提供します。サイドバーにはデコレーション設定、テーマ選択、透過レベルなどの設定UIも含まれています。

**業務上の目的・背景**：本画面は、Avalonia UIフレームワークの60種類以上のコントロールデモページへのナビゲーションハブとして機能します。開発者がサイドメニューから目的のコントロールを選択し、動作を確認できる構造になっています。また、アプリケーション全体のテーマやウィンドウ装飾を切り替える設定UIも提供し、Avaloniaのカスタマイズ機能を体験できます。

**画面へのアクセス方法**：MainWindow起動時に自動的に配置・表示されます。MainWindow.xamlの62行目でMainViewが配置されています。

**主要な操作・処理内容**：
1. HamburgerMenuのサイドバーから各デモページを選択して表示
2. Decorationsコンボボックスでウィンドウ装飾（None/BorderOnly/Full）を変更
3. ThemeVariantコンボボックスでテーマ（Default/Light/Dark）を切り替え
4. Themesコンボボックスでカタログテーマ（Fluent/Simple）を変更
5. TransparencyLevelコンボボックスで透過レベルを設定
6. FlowDirectionコンボボックスで文字方向（LeftToRight/RightToLeft）を変更
7. WindowStateコンボボックスでウィンドウ状態を変更

**画面遷移**：
- 遷移元：MainWindow
- 遷移先：CompositionPage、AcceleratorPage、AcrylicPage、AdornerLayerPage等、60種類以上のデモページ

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 16 | TabControl | 主機能 | HamburgerMenuによるナビゲーション管理。各デモページへのタブ切り替え |
| 65 | ThemeVariant | 補助機能 | ライト・ダークテーマの切り替え設定UI |
| 10 | ComboBox | 補助機能 | デコレーション設定、テーマ選択、透過レベル選択のドロップダウン |

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 説明 | バインディング |
|--------|----------|----------|------|---------------|
| Decorations | 入力 | SystemDecorations | ウィンドウ装飾設定（None/BorderOnly/Full） | SelectionChanged |
| ThemeVariant | 入力 | ThemeVariant | テーマバリアント（Default/Light/Dark） | SelectionChanged |
| CatalogTheme | 入力 | CatalogTheme | カタログテーマ（Fluent/Simple） | SelectionChanged |
| TransparencyLevel | 入力 | WindowTransparencyLevel | 透過レベル | SelectionChanged |
| FlowDirection | 入力 | FlowDirection | 文字方向（LeftToRight/RightToLeft） | SelectionChanged |
| WindowState | 入出力 | WindowState | ウィンドウ状態 | MainWindowViewModel.WindowState |
| WindowStates | 入力 | WindowState[] | 選択可能なウィンドウ状態一覧 | MainWindowViewModel.WindowStates |

## 表示項目

| 項目名 | 表示位置 | データ型 | 説明 |
|--------|----------|----------|------|
| HamburgerMenu | メインエリア | HamburgerMenu | サイドバーナビゲーション |
| TabItem（複数） | サイドバー | TabItem | 各デモページへのナビゲーション項目 |
| 設定Flyout | サイドバー | Flyout | デコレーション・テーマ等の設定UI |

## イベント仕様

### 1-Themes_SelectionChanged

**トリガー**: カタログテーマComboBoxの選択変更

**処理内容**:
1. 選択されたCatalogThemeを取得
2. App.SetCatalogThemes(theme)を呼び出してテーマを適用

**コード参照**: MainView.xaml.cs 22-28行目

### 2-ThemeVariants_SelectionChanged

**トリガー**: テーマバリアントComboBoxの選択変更

**処理内容**:
1. 選択されたThemeVariantを取得
2. Application.Current.RequestedThemeVariantを更新

**コード参照**: MainView.xaml.cs 30-36行目

### 3-FlowDirection_SelectionChanged

**トリガー**: フロー方向ComboBoxの選択変更

**処理内容**:
1. 選択されたFlowDirectionを取得
2. TopLevel.FlowDirectionを更新

**コード参照**: MainView.xaml.cs 38-44行目

### 4-Decorations_SelectionChanged

**トリガー**: デコレーションComboBoxの選択変更

**処理内容**:
1. 選択されたSystemDecorationsを取得
2. Window.SystemDecorationsを更新

**コード参照**: MainView.xaml.cs 46-52行目

### 5-TransparencyLevels_SelectionChanged

**トリガー**: 透過レベルComboBoxの選択変更

**処理内容**:
1. 以前の透過設定を解除
2. TopLevel.TransparencyLevelHintを更新
3. 透過が有効な場合、背景を透過ブラシに設定

**コード参照**: MainView.xaml.cs 54-73行目

### 6-OnAttachedToVisualTree

**トリガー**: ビジュアルツリーへのアタッチ時

**処理内容**:
1. ウィンドウのSystemDecorationsをDecorationsコンボボックスに反映
2. InsetsManager設定（SafeAreaPadding、DisplayEdgeToEdge、IsSystemBarVisible）
3. ViewModelプロパティ変更イベントハンドラの設定

**コード参照**: MainView.xaml.cs 77-114行目

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

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

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

## メッセージ仕様

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

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

## 例外処理

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

本画面では特別な例外処理は実装されていません。nullチェックで安全に処理されています。

## 備考

- HamburgerMenuはControlSamplesネームスペースのカスタムコントロール
- 60種類以上のデモページがTabItemとして登録
- テーマ切り替え時はアプリケーション全体に即座に反映
- 透過レベル変更時は背景ブラシが自動調整される
- SafeAreaPaddingはモバイル/タブレット向けのセーフエリア対応

---

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

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

### 推奨読解順序

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

まず、MainViewが依存するViewModelとモデルクラスを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | MainWindowViewModel.cs | `samples/ControlCatalog/ViewModels/MainWindowViewModel.cs` | WindowState、WindowStates等のプロパティ確認 |
| 1-2 | CatalogTheme.cs | `samples/ControlCatalog/Models/CatalogTheme.cs` | Fluent/Simpleテーマの列挙型（存在する場合） |

**読解のコツ**: MainViewはx:DataType="viewModels:MainWindowViewModel"でViewModelを指定しています。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | MainView.xaml | `samples/ControlCatalog/MainView.xaml` | HamburgerMenuの構造とTabItem定義 |
| 2-2 | MainView.xaml.cs | `samples/ControlCatalog/MainView.xaml.cs` | イベントハンドラとビジュアルツリーアタッチ処理 |

**主要処理フロー**:
1. **18-268行目（XAML）**: HamburgerMenuとTabItem（60種類以上）の定義
2. **212-267行目（XAML）**: 設定Flyoutの定義（ComboBox群）
3. **22-28行目（C#）**: テーマ変更処理
4. **54-73行目（C#）**: 透過レベル変更処理

#### Step 3: ナビゲーション構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | HamburgerMenu.cs | `samples/ControlSamples/HamburgerMenu.cs` | カスタムHamburgerMenuコントロールの実装 |

**主要処理フロー**:
- TabItemのHeader属性でサイドバーに表示される名前が決まる
- TabItemの子要素として各デモページが配置される

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

```
MainWindow
    │
    └─ MainView（UserControl）
           │
           ├─ HamburgerMenu
           │      │
           │      ├─ TabItem[Composition] → CompositionPage
           │      ├─ TabItem[Accelerator] → AcceleratorPage
           │      ├─ TabItem[Acrylic] → AcrylicPage
           │      ├─ ... (60+ pages)
           │      │
           │      └─ FlyoutBase.AttachedFlyout
           │             ├─ Decorations ComboBox
           │             │      └─ Decorations_SelectionChanged
           │             ├─ ThemeVariant ComboBox
           │             │      └─ ThemeVariants_SelectionChanged
           │             ├─ CatalogTheme ComboBox
           │             │      └─ Themes_SelectionChanged
           │             ├─ TransparencyLevel ComboBox
           │             │      └─ TransparencyLevels_SelectionChanged
           │             ├─ FlowDirection ComboBox
           │             │      └─ FlowDirection_SelectionChanged
           │             └─ WindowState ComboBox
           │                    └─ ViewModel Binding
           │
           └─ OnAttachedToVisualTree
                  └─ InsetsManager設定
```

### データフロー図

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

ユーザー操作 ───────▶ MainView ─────────────▶ 画面表示
  │                        │
  ├─ TabItem選択 ────▶ HamburgerMenu ──────▶ デモページ表示
  │                        │
  ├─ Decorations ────▶ Window.SystemDecorations ▶ ウィンドウ装飾
  │                        │
  ├─ ThemeVariant ───▶ App.RequestedThemeVariant ▶ テーマ適用
  │                        │
  ├─ CatalogTheme ───▶ App.SetCatalogThemes ──▶ カタログテーマ
  │                        │
  └─ TransparencyLevel ▶ TopLevel.TransparencyLevelHint ▶ 透過
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MainView.xaml | `samples/ControlCatalog/MainView.xaml` | XAML | メインビューのUI定義 |
| MainView.xaml.cs | `samples/ControlCatalog/MainView.xaml.cs` | ソース | コードビハインド |
| MainWindowViewModel.cs | `samples/ControlCatalog/ViewModels/MainWindowViewModel.cs` | ソース | ViewModel |
| HamburgerMenu.cs | `samples/ControlSamples/HamburgerMenu.cs` | ソース | カスタムナビゲーションコントロール |
| CompositionPage.axaml | `samples/ControlCatalog/Pages/CompositionPage.axaml` | XAML | デモページ例 |
| App.axaml | `samples/ControlCatalog/App.axaml` | XAML | アプリケーション定義 |
| App.axaml.cs | `samples/ControlCatalog/App.axaml.cs` | ソース | SetCatalogThemes等 |
