# 画面設計書 7-AdornerLayer

## 概要

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

### 本画面の処理概要

このAdornerLayerページは、Avalonia UIのAdornerLayer機能をデモンストレーションするページです。ボタンに装飾（Adorner）を追加し、回転しても装飾がビジュアルツリー上で正しく追従することを示しています。

**業務上の目的・背景**：本画面は、Avalonia UIフレームワークのAdornerLayer機能の実装方法を示すデモです。AdornerLayerは、コントロールの上にオーバーレイ要素を描画するための仕組みで、フォーカスインジケータ、ドラッグ＆ドロップフィードバック、バリデーションエラー表示などに使用されます。開発者がカスタム装飾を実装する際の参考となります。

**画面へのアクセス方法**：MainViewのHamburgerMenuから「AdornerLayer」タブを選択してアクセスします。MainView.xamlの28-30行目で定義されています。

**主要な操作・処理内容**：
1. Rotationスライダーでボタンを回転（0〜360度）
2. Add Adornerボタンで装飾を追加
3. Remove Adornerボタンで装飾を削除
4. 装飾付きボタンを右クリックしてコンテキストメニューを表示

**画面遷移**：
- 遷移元：MainView（HamburgerMenu）
- 遷移先：なし（コンテンツページ）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 4 | Visual | 主機能 | AdornerLayerのデモ。ビジュアルツリー上の装飾レイヤー |

## 画面種別

デモページ / サンプル

## URL/ルーティング

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

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 説明 | バインディング |
|--------|----------|----------|------|---------------|
| Rotation | 入力 | double | ボタンの回転角度（0〜360） | #rotation.Value |

## 表示項目

| 項目名 | 表示位置 | データ型 | 説明 |
|--------|----------|----------|------|
| Rotationスライダー | 上部 | Slider | 最大360度 |
| Add Adornerボタン | 上部 | Button | 装飾追加 |
| Remove Adornerボタン | 上部 | Button | 装飾削除 |
| AdornerButton | 中央 | Button | 装飾付きボタン（200x42） |
| Adorner | オーバーレイ | Border/Canvas | 赤半透明背景+シアン線 |
| アクセントカラーボーダー | 十字配置 | Border | システムアクセントカラー |

## イベント仕様

### 1-AddAdorner_OnClick

**トリガー**: Add Adornerボタンクリック

**処理内容**:
1. 保存された_adornerをAdornerButtonに設定
2. AdornerLayer.SetAdorner(AdornerButton, _adorner)を呼び出し

**コード参照**: AdornerLayerPage.xaml.cs 26-31行目

### 2-RemoveAdorner_OnClick

**トリガー**: Remove Adornerボタンクリック

**処理内容**:
1. 現在のAdornerを取得して_adornerに保存
2. AdornerLayer.SetAdorner(AdornerButton, null)を呼び出し装飾を削除

**コード参照**: AdornerLayerPage.xaml.cs 16-24行目

### 3-Rotationスライダー値変更

**トリガー**: Rotationスライダーの値変更

**処理内容**:
1. バインディングによりLayoutTransformControl.LayoutTransformのRotateTransform.Angleが更新
2. ボタンと装飾が回転

**コード参照**: AdornerLayerPage.xaml 37-39行目

### 4-ContextMenu表示

**トリガー**: AdornerButtonを右クリック

**処理内容**:
1. AdornerCanvasをPlacementTargetとしてContextMenuを表示
2. Menu 1、Menu 2の項目を表示

**コード参照**: AdornerLayerPage.xaml 64-69行目

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

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

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

## メッセージ仕様

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

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

## 例外処理

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

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

## 備考

- AdornerLayer.IsClipEnabled="False"でクリッピングを無効化し、装飾がはみ出して表示可能
- Adornerは赤半透明（Opacity="0.3"）背景とシアン線のCanvas
- 線は±10000の長さで無限遠まで延びる視覚効果
- ボタンを囲む4つのシステムアクセントカラーボーダーがレイアウト変換の効果を示す
- IsHitTestVisible="False"で装飾がマウスイベントを通過

---

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

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

### 推奨読解順序

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

この画面は_adornerフィールドで装飾を保持しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | AdornerLayerPage.xaml.cs | `samples/ControlCatalog/Pages/AdornerLayerPage.xaml.cs` | _adornerフィールドの役割 |

**読解のコツ**: AdornerLayer.GetAdorner/SetAdornerの使い方を理解することが重要です。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | AdornerLayerPage.xaml | `samples/ControlCatalog/Pages/AdornerLayerPage.xaml` | DockPanel構造とAdornerLayer.Adorner添付プロパティ |
| 2-2 | AdornerLayerPage.xaml.cs | `samples/ControlCatalog/Pages/AdornerLayerPage.xaml.cs` | Add/Removeのイベントハンドラ |

**主要処理フロー**:
1. **11-14行目（XAML）**: Rotationスライダーの定義
2. **16-25行目（XAML）**: Add/Removeボタンの定義
3. **27-34行目（XAML）**: アクセントカラーボーダーの十字配置
4. **36-73行目（XAML）**: LayoutTransformControlとAdornerButton
5. **46-63行目（XAML）**: AdornerLayer.Adorner添付プロパティでAdorner定義

#### Step 3: AdornerLayerの仕組みを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | AdornerLayerPage.xaml | `samples/ControlCatalog/Pages/AdornerLayerPage.xaml` | AdornerLayer.IsClipEnabled、IsHitTestVisible等 |

**主要処理フロー**:
- **46行目**: AdornerLayer.Adorner添付プロパティ
- **47行目**: IsClipEnabled="False"でクリッピング無効
- **48行目**: IsHitTestVisible="False"でヒットテスト無効
- **57-60行目**: 十字線（Line要素）の定義

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

```
AdornerLayerPage（UserControl）
    │
    ├─ DockPanel
    │      │
    │      ├─ Grid[Rotationスライダー]
    │      │      └─ Slider[rotation] Max=360
    │      │             └─ Binding → RotateTransform.Angle
    │      │
    │      ├─ StackPanel[ボタン群]
    │      │      ├─ Button[AddAdorner]
    │      │      │      └─ AddAdorner_OnClick
    │      │      │             └─ AdornerLayer.SetAdorner(button, _adorner)
    │      │      │
    │      │      └─ Button[RemoveAdorner]
    │      │             └─ RemoveAdorner_OnClick
    │      │                    └─ AdornerLayer.SetAdorner(button, null)
    │      │
    │      └─ Grid[3x3]
    │             ├─ Border × 4（アクセントカラー）
    │             │
    │             └─ LayoutTransformControl
    │                    └─ RotateTransform
    │                           └─ Button[AdornerButton]
    │                                  ├─ AdornerLayer.Adorner
    │                                  │      └─ Border[赤半透明]
    │                                  │             └─ Canvas[シアン線]
    │                                  │
    │                                  └─ ContextMenu
    │                                         ├─ MenuItem[Menu 1]
    │                                         └─ MenuItem[Menu 2]
```

### データフロー図

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

ユーザー操作 ───────▶ AdornerLayerPage ─────▶ 装飾表示
  │                        │
  ├─ Rotationスライダー ─▶ RotateTransform ───▶ ボタン+装飾回転
  │                        │
  ├─ Add Adornerボタン ──▶ SetAdorner ────────▶ 装飾追加
  │                        │
  ├─ Remove Adornerボタン ▶ SetAdorner(null) ─▶ 装飾削除
  │                        │
  └─ 右クリック ─────────▶ ContextMenu ──────▶ メニュー表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| AdornerLayerPage.xaml | `samples/ControlCatalog/Pages/AdornerLayerPage.xaml` | XAML | AdornerLayerデモのUI定義 |
| AdornerLayerPage.xaml.cs | `samples/ControlCatalog/Pages/AdornerLayerPage.xaml.cs` | ソース | Add/RemoveAdornerイベントハンドラ |
