# 画面設計書 3-装飾付きウィンドウ

## 概要

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

### 本画面の処理概要

この装飾付きウィンドウは、SystemDecorations=Noneを設定し、カスタムウィンドウ装飾を実装するデモンストレーションウィンドウです。タイトルバー、最小化・最大化・閉じるボタン、およびリサイズ用のボーダーをすべてカスタム実装しています。

**業務上の目的・背景**：本画面は、Avalonia UIフレームワークでシステムのウィンドウ装飾を無効にし、完全にカスタマイズされたウィンドウを作成する方法を示すデモです。開発者がブランド独自のウィンドウデザインやカスタムタイトルバーを実装する際の参考となります。ゲームやメディアプレーヤーなど、独自のウィンドウ外観が必要なアプリケーション開発に役立ちます。

**画面へのアクセス方法**：MainWindowまたは特定のナビゲーションからDecoratedWindowを表示するコードを呼び出すことでアクセスします。

**主要な操作・処理内容**：
1. カスタムタイトルバーをドラッグしてウィンドウを移動
2. 最小化ボタン（_）クリックでウィンドウを最小化
3. 最大化ボタン（[ ]）クリックでウィンドウを最大化/通常状態に切り替え
4. 閉じるボタン（X）クリックでウィンドウを閉じる
5. ウィンドウの四辺・四隅をドラッグしてリサイズ
6. ComboBoxでSystemDecorations（None/BorderOnly/Full）を変更
7. CheckBoxでCanResizeを切り替え

**画面遷移**：
- 遷移元：MainWindow（Windowカスタマイズデモから）
- 遷移先：なし（単独ウィンドウ）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 42 | Window | 主機能 | カスタムウィンドウ装飾デモ。SystemDecorations=Noneでの表示 |

## 画面種別

モーダル / デモウィンドウ

## URL/ルーティング

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

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 説明 | バインディング |
|--------|----------|----------|------|---------------|
| SystemDecorations | 入出力 | SystemDecorations | ウィンドウ装飾タイプ | Window.SystemDecorations (ElementBinding) |
| CanResize | 入出力 | bool | リサイズ可能かどうか | Window.CanResize (ElementBinding) |

## 表示項目

| 項目名 | 表示位置 | データ型 | 説明 |
|--------|----------|----------|------|
| Title | カスタムタイトルバー | TextBlock | "Title" |
| MinimizeButton | タイトルバー右 | Button | "_" |
| MaximizeButton | タイトルバー右 | Button | "[ ]" |
| CloseButton | タイトルバー右 | Button | "X" |
| コンテンツエリア | メイン | StackPanel | Hello world、設定コントロール |
| リサイズボーダー | 四辺・四隅 | Border | 色付きリサイズハンドル |

## イベント仕様

### 1-TitleBar_PointerPressed

**トリガー**: タイトルバーへのポインタープレス

**処理内容**:
1. BeginMoveDrag(e)を呼び出しウィンドウのドラッグ移動を開始

**コード参照**: DecoratedWindow.xaml.cs 11-14行目

### 2-MinimizeButton_Click

**トリガー**: 最小化ボタンクリック

**処理内容**:
1. WindowState = WindowState.Minimizedに設定

**コード参照**: DecoratedWindow.xaml.cs 23-24行目

### 3-MaximizeButton_Click

**トリガー**: 最大化ボタンクリック

**処理内容**:
1. 現在のWindowStateがMaximizedならNormalに、そうでなければMaximizedに設定

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

### 4-CloseButton_Click

**トリガー**: 閉じるボタンクリック

**処理内容**:
1. Close()を呼び出しウィンドウを閉じる

**コード参照**: DecoratedWindow.xaml.cs 29-32行目

### 5-SetupSide（各ボーダーのリサイズ）

**トリガー**: 各ボーダー（Left/Right/Top/Bottom/TopLeft/TopRight/BottomLeft/BottomRight）へのポインタープレス

**処理内容**:
1. 指定されたカーソルタイプを設定
2. WindowStateがNormalの場合、BeginResizeDrag(edge, e)を呼び出しリサイズ開始

**コード参照**: DecoratedWindow.xaml.cs 35-43行目

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

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

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

## メッセージ仕様

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

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

## 例外処理

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

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

## 備考

- SystemDecorations=Noneにより、OSのウィンドウ装飾が完全に無効化
- タイトルバーは水色（LightBlue）の背景色
- リサイズ用のコーナーボーダーは赤色、辺ボーダーは青色で視覚的に区別
- NativeMenuが定義されているが、SystemDecorations=Noneでは表示されない
- ウィンドウ全体は3x3のグリッドレイアウトで構成

---

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

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

### 推奨読解順序

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

この画面は特別なViewModelを使用せず、直接ウィンドウプロパティにバインドしています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | DecoratedWindow.xaml | `samples/ControlCatalog/DecoratedWindow.xaml` | ElementNameバインディングの使用方法確認 |

**読解のコツ**: `{Binding ElementName=Window, Path=SystemDecorations}`の形式で、XAML内のWindow要素に直接バインドしています。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | DecoratedWindow.xaml | `samples/ControlCatalog/DecoratedWindow.xaml` | グリッドレイアウトとカスタム装飾の構造 |
| 2-2 | DecoratedWindow.xaml.cs | `samples/ControlCatalog/DecoratedWindow.xaml.cs` | ドラッグ・リサイズ処理の実装 |

**主要処理フロー**:
1. **5行目（XAML）**: SystemDecorations="None"でOS装飾を無効化
2. **27行目（XAML）**: 3x3グリッドでリサイズボーダーを配置
3. **29-41行目（XAML）**: カスタムタイトルバーとボタンの定義
4. **11-14行目（C#）**: タイトルバードラッグ処理
5. **15-22行目（C#）**: 各辺・隅のリサイズハンドル設定
6. **35-43行目（C#）**: SetupSide汎用リサイズ設定メソッド

#### Step 3: リサイズ処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | DecoratedWindow.xaml.cs | `samples/ControlCatalog/DecoratedWindow.xaml.cs` | SetupSideメソッドのWindowEdge列挙 |

**主要処理フロー**:
- **West/East/North/South**: 四辺のリサイズ
- **NorthWest/NorthEast/SouthWest/SouthEast**: 四隅のリサイズ
- **StandardCursorType**: カーソル形状の設定

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

```
DecoratedWindow（コンストラクタ）
    │
    ├─ InitializeComponent()
    │
    ├─ TitleBar.PointerPressed
    │      └─ BeginMoveDrag(e)
    │
    ├─ SetupSide() × 8（各ボーダー）
    │      ├─ Cursor設定
    │      └─ PointerPressed
    │             └─ BeginResizeDrag(edge, e)
    │
    ├─ MinimizeButton.Click
    │      └─ WindowState = Minimized
    │
    ├─ MaximizeButton.Click
    │      └─ WindowState = Maximized/Normal切替
    │
    └─ CloseButton.Click
           └─ Close()
```

### データフロー図

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

ユーザー操作 ───────▶ DecoratedWindow ────────▶ 画面表示
  │                        │
  ├─ タイトルバードラッグ ─▶ BeginMoveDrag ────▶ ウィンドウ移動
  │                        │
  ├─ ボーダードラッグ ────▶ BeginResizeDrag ──▶ ウィンドウリサイズ
  │                        │
  ├─ _ボタン ─────────▶ WindowState=Minimized ▶ 最小化
  │                        │
  ├─ [ ]ボタン ───────▶ WindowState切替 ────▶ 最大化/通常
  │                        │
  ├─ Xボタン ─────────▶ Close() ───────────▶ ウィンドウ終了
  │                        │
  └─ ComboBox/CheckBox ──▶ プロパティ変更 ───▶ UI更新
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| DecoratedWindow.xaml | `samples/ControlCatalog/DecoratedWindow.xaml` | XAML | カスタム装飾ウィンドウのUI定義 |
| DecoratedWindow.xaml.cs | `samples/ControlCatalog/DecoratedWindow.xaml.cs` | ソース | ドラッグ・リサイズ・ボタンイベント処理 |
