# 画面設計書 64-Window Customizations

## 概要

本ドキュメントは、Avalonia UIフレームワークのControlCatalogサンプルアプリケーションにおけるWindow Customizationsデモページの画面設計書です。ウィンドウのカスタマイズオプション（タイトルバー、フレーム設定、リサイズ制御など）を実証するためのデモ画面を定義します。

### 本画面の処理概要

本画面は、Avaloniaウィンドウの各種カスタマイズオプションをインタラクティブに設定・確認できるデモページです。デスクトップ環境とモバイル環境で異なる設定項目が表示され、それぞれのプラットフォームに応じたウィンドウカスタマイズが可能です。

**業務上の目的・背景**：
クロスプラットフォームアプリケーションでは、プラットフォームごとに異なるウィンドウ装飾やシステムバーの制御が必要になることがあります。本デモページは、Avaloniaが提供するウィンドウカスタマイズAPIの使用方法と、その視覚的な効果を開発者に示すことを目的としています。

**画面へのアクセス方法**：
ControlCatalogアプリケーションのメインウィンドウから、HamburgerMenuナビゲーションを使用して「Window Customizations」項目を選択することでアクセスします。

**主要な操作・処理内容**：
1. クライアント領域拡張：タイトルバー領域までクライアント領域を拡張するかどうかの設定
2. タイトルバー表示制御：システムタイトルバーの表示/非表示と高さの設定
3. システムクローム優先：システムのデフォルトウィンドウ装飾を優先するかの設定
4. リサイズ可否：ウィンドウのリサイズを許可するかの設定
5. 最小化/最大化可否：ウィンドウボタンの有効化設定
6. モバイル専用設定：システムバー表示、エッジツーエッジ表示、セーフエリアパディング

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 42 | Window | 主機能 | ウィンドウカスタマイズのデモ、タイトルバー、フレーム設定 |

## 画面種別

デモ / 設定

## URL/ルーティング

ControlCatalogアプリケーション内のHamburgerMenuナビゲーションで「Window Customizations」を選択

## 入出力項目

| 項目名 | 項目種別 | データ型 | 必須 | 説明 |
|--------|----------|----------|------|------|
| ExtendClientAreaEnabled | 入出力 | bool | - | クライアント領域をデコレーションまで拡張 |
| SystemTitleBarEnabled | 入出力 | bool | - | システムタイトルバーの表示 |
| TitleBarHeight | 入出力 | double | - | タイトルバーの高さ（-1〜200） |
| PreferSystemChromeEnabled | 入出力 | bool | - | システムクロームを優先 |
| CanResize | 入出力 | bool | - | リサイズ可否 |
| CanMinimize | 入出力 | bool | - | 最小化可否 |
| CanMaximize | 入出力 | bool | - | 最大化可否 |
| IsSystemBarVisible | 入出力 | bool | - | システムバー表示（モバイル） |
| DisplayEdgeToEdge | 入出力 | bool | - | エッジツーエッジ表示（モバイル） |
| SafeAreaPadding | 出力 | Thickness | - | セーフエリアパディング（モバイル） |

## 表示項目

| 項目名 | 表示形式 | データソース | 説明 |
|--------|----------|--------------|------|
| Desktop propertiesヘッダー | TextBlock | 静的 | デスクトップ設定セクションのヘッダー |
| Extend Client Area CheckBox | CheckBox | ExtendClientAreaEnabled | クライアント領域拡張設定 |
| Title Bar CheckBox | CheckBox | SystemTitleBarEnabled | タイトルバー表示設定 |
| Title Bar Height Slider | Slider | TitleBarHeight | タイトルバー高さ設定（-1〜200） |
| Prefer System Chrome CheckBox | CheckBox | PreferSystemChromeEnabled | システムクローム優先設定 |
| Can Resize CheckBox | CheckBox | CanResize | リサイズ可否設定 |
| Can Minimize CheckBox | CheckBox | CanMinimize | 最小化可否設定 |
| Can Maximize CheckBox | CheckBox | CanMaximize | 最大化可否設定 |
| Mobile propertiesヘッダー | TextBlock | 静的 | モバイル設定セクションのヘッダー |
| Is System Bar Visible CheckBox | CheckBox | IsSystemBarVisible | システムバー表示設定（モバイル） |
| Display Edge To Edge CheckBox | CheckBox | DisplayEdgeToEdge | エッジツーエッジ設定（モバイル） |
| Safe Area Padding TextBlock | TextBlock | SafeAreaPadding | セーフエリアパディング表示 |

## イベント仕様

### 1-Extend Client Area変更

クライアント領域をウィンドウデコレーションまで拡張するかを切り替えます。

- **トリガー**: CheckBoxのIsChecked変更
- **処理内容**: MainWindowViewModelのExtendClientAreaEnabledプロパティを更新
- **副作用**: falseに変更時、SystemTitleBarEnabledがtrueにリセット

### 2-Title Bar変更

システムタイトルバーの表示/非表示を切り替えます。

- **トリガー**: CheckBoxのIsChecked変更
- **処理内容**: SystemTitleBarEnabledプロパティを更新
- **副作用**: falseに変更時、TitleBarHeightが-1にリセット
- **依存関係**: ExtendClientAreaEnabledがtrueの場合のみ有効

### 3-Title Bar Height変更

タイトルバーの高さを調整します。

- **トリガー**: Sliderの値変更
- **処理内容**: TitleBarHeightプロパティを更新
- **範囲**: -1（デフォルト）〜200
- **依存関係**: SystemTitleBarEnabledがtrueの場合のみ有効

### 4-Prefer System Chrome変更

システムのデフォルトウィンドウ装飾を優先するかを切り替えます。

- **トリガー**: CheckBoxのIsChecked変更
- **処理内容**: PreferSystemChromeEnabledプロパティを更新、ChromeHintsを再計算
- **依存関係**: ExtendClientAreaEnabledがtrueの場合のみ有効

### 5-Can Resize/Minimize/Maximize変更

ウィンドウのリサイズ・最小化・最大化ボタンの有効/無効を切り替えます。

- **トリガー**: 各CheckBoxのIsChecked変更
- **処理内容**: 対応するプロパティを更新
- **依存関係**: CanMaximizeはCanResizeがtrueの場合のみ有効

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

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

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

該当なし

## メッセージ仕様

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

## 例外処理

| 例外ケース | 対応処理 |
|-----------|---------|
| スライダー値が範囲外 | Minimum/Maximumで制約（-1〜200） |
| プラットフォーム非対応機能 | OnFormFactorで表示/非表示を制御 |

## 備考

- Desktop propertiesセクションはデスクトップ環境でのみ有効（OnFormFactor false, Desktop=true）
- Mobile propertiesセクションはモバイル環境でのみ有効（OnFormFactor false, Mobile=true）
- ChromeHintsプロパティはSystemTitleBarEnabledとPreferSystemChromeEnabledの組み合わせで決定
- ExtendClientAreaChromeHintsフラグの組み合わせで様々なウィンドウスタイルを実現

---

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

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

### 推奨読解順序

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

ViewModelのプロパティ構造とプロパティ間の依存関係を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | MainWindowViewModel.cs | `samples/ControlCatalog/ViewModels/MainWindowViewModel.cs` | ウィンドウ関連プロパティ（14-27行目）の定義 |
| 1-2 | MainWindowViewModel.cs | `samples/ControlCatalog/ViewModels/MainWindowViewModel.cs` | ChromeHints計算ロジック（54-70行目） |

**読解のコツ**: PropertyChangedイベントハンドラ内でChromeHintsが再計算されるパターンに注目してください。SystemTitleBarEnabledとPreferSystemChromeEnabledの変更がChromeHintsに反映される連動動作を理解することが重要です。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | WindowCustomizationsPage.xaml | `samples/ControlCatalog/Pages/WindowCustomizationsPage.xaml` | OnFormFactorによるプラットフォーム分岐（15, 54行目） |
| 2-2 | WindowCustomizationsPage.xaml | `samples/ControlCatalog/Pages/WindowCustomizationsPage.xaml` | 各CheckBoxのバインディングとIsEnabled条件 |

**主要処理フロー**:
1. **12-52行目**: Desktop properties セクション
2. **21-22行目**: ExtendClientAreaEnabledにバインド
3. **24-36行目**: Title Bar設定（DockPanel内にCheckBoxとSlider）
4. **54-59行目**: Mobile properties セクション

#### Step 3: プロパティ連動を理解する

ViewModelのプロパティsetterでの副作用を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | MainWindowViewModel.cs | `samples/ControlCatalog/ViewModels/MainWindowViewModel.cs` | ExtendClientAreaEnabled setter（85-95行目） |
| 3-2 | MainWindowViewModel.cs | `samples/ControlCatalog/ViewModels/MainWindowViewModel.cs` | SystemTitleBarEnabled setter（97-107行目） |

**主要処理フロー**:
- **90-93行目**: ExtendClientAreaEnabled=falseでSystemTitleBarEnabled=trueにリセット
- **102-105行目**: SystemTitleBarEnabled=falseでTitleBarHeight=-1にリセット
- **54-70行目**: ChromeHints計算でフラグを組み合わせ

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

```
WindowCustomizationsPage (UserControl)
    │
    └─ MainWindowViewModel (DataContext)
           │
           ├─ ExtendClientAreaEnabled
           │      └─ setter: if false → SystemTitleBarEnabled = true
           │
           ├─ SystemTitleBarEnabled
           │      ├─ setter: if false → TitleBarHeight = -1
           │      └─ PropertyChanged → ChromeHints再計算
           │
           ├─ PreferSystemChromeEnabled
           │      └─ PropertyChanged → ChromeHints再計算
           │
           ├─ ChromeHints (計算プロパティ)
           │      └─ SystemTitleBarEnabled | PreferSystemChromeEnabled
           │
           ├─ CanResize
           │      └─ CanMaximize.IsEnabled連動
           │
           └─ モバイル専用プロパティ
                  ├─ IsSystemBarVisible
                  ├─ DisplayEdgeToEdge
                  └─ SafeAreaPadding
```

### データフロー図

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

ExtendClientAreaEnabled ──────▶ MainWindowViewModel ──────────────▶ ウィンドウ設定
     │                                │
     └─ false ─────────────────▶ SystemTitleBarEnabled = true
                                      │
SystemTitleBarEnabled ────────────────┤
     │                                │
     └─ false ─────────────────▶ TitleBarHeight = -1
                                      │
PreferSystemChromeEnabled ────────────┤
                                      ▼
                               ChromeHints計算
                                      │
                                      ├─ NoChrome
                                      ├─ OSXThickTitleBar
                                      ├─ SystemChrome (if SystemTitleBarEnabled)
                                      └─ PreferSystemChrome (if PreferSystemChromeEnabled)
                                      │
                                      ▼
                               Window.ExtendClientAreaChromeHints
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| WindowCustomizationsPage.xaml | `samples/ControlCatalog/Pages/WindowCustomizationsPage.xaml` | XAML | UI定義、バインディング |
| WindowCustomizationsPage.xaml.cs | `samples/ControlCatalog/Pages/WindowCustomizationsPage.xaml.cs` | ソース | コードビハインド（最小限） |
| MainWindowViewModel.cs | `samples/ControlCatalog/ViewModels/MainWindowViewModel.cs` | ソース | ViewModel、ウィンドウプロパティ管理 |
| MainWindow.xaml | `samples/ControlCatalog/MainWindow.xaml` | XAML | メインウィンドウ、ViewModelバインディング |
