# 画面設計書 49-RelativePanel

## 概要

本ドキュメントは、Avalonia UIフレームワークのControlCatalogサンプルアプリケーションにおける「RelativePanel」デモページの画面設計書です。

### 本画面の処理概要

RelativePanelページは、要素間の相対的な位置関係を指定してレイアウトを構築できるRelativePanelコントロールをデモンストレーションする画面です。パネル端への配置、他要素との相対位置指定、中央揃えなど、様々なレイアウトパターンを示しています。

**業務上の目的・背景**：複雑なUIレイアウトを構築する際、従来のGrid/StackPanelでは表現が難しい要素間の相対位置関係を指定する必要がある場合があります。RelativePanelは、要素Aの右側に要素Bを配置、要素Cの下に要素Dを配置など、要素間の関係性を宣言的に記述できます。レスポンシブデザインやダッシュボード画面など、柔軟なレイアウトが求められる場面で活用できます。

**画面へのアクセス方法**：MainWindowからMainViewのHamburgerMenuを開き、「RelativePanel」メニュー項目を選択することでアクセスできます。

**主要な操作・処理内容**：
1. パネル端への配置（AlignLeftWithPanel、AlignRightWithPanel、AlignTopWithPanel、AlignBottomWithPanel）
2. パネル中央への配置（AlignHorizontalCenterWithPanel、AlignVerticalCenterWithPanel）
3. 他要素との相対配置（Above、Below、LeftOf、RightOf）
4. 他要素との位置揃え（AlignLeftWith、AlignRightWith、AlignTopWith、AlignBottomWith）
5. 他要素との中央揃え（AlignHorizontalCenterWith、AlignVerticalCenterWith）

**画面遷移**：本画面は単独のデモページであり、MainViewのHamburgerMenuから遷移します。他画面への直接遷移機能は持ちません。

**権限による表示制御**：本デモ画面では権限による表示制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 37 | RelativePanel | 主機能 | 要素間の相対位置配置レイアウト |

## 画面種別

デモ / レイアウト

## URL/ルーティング

ControlCatalog内のHamburgerMenuナビゲーションによるページ切り替え（URL/ルーティング定義なし）

## 入出力項目

本画面のすべての要素は静的に定義されており、データバインディングによる入出力項目はありません。

## 表示項目

| 項目名 | 表示位置 | 説明 |
|--------|----------|------|
| Rect1 | 左上（デフォルト） | 赤色ボックス（配置プロパティなし） |
| Rect2 | 上中央 | 青色ボックス（AlignHorizontalCenterWithPanel） |
| Rect3 | 右上 | 緑色ボックス（AlignRightWithPanel） |
| Rect4 | 左下 | 赤色ボックス（AlignBottomWithPanel） |
| Rect5 | 下中央 | 青色ボックス（AlignBottomWithPanel + AlignHorizontalCenterWithPanel） |
| Rect6 | 右下 | 緑色ボックス（AlignBottomWithPanel + AlignRightWithPanel） |
| Rect7 | Rect1の右 | 青色ボックス（RightOf="Rect1"） |
| Rect8 | Rect7の下 | 緑色ボックス（Below="Rect7"） |
| Rect9 | 中央 | 青色ボックス（AlignHorizontalCenterWithPanel + AlignVerticalCenterWithPanel） |
| Rect10 | Rect9の右 | 赤色ボックス（RightOf="Rect9" + AlignVerticalCenterWith="Rect9"） |
| Rect11 | Rect9の下端中央 | 赤色ボックス（AlignBottomWith="Rect9" + AlignHorizontalCenterWith="Rect9"） |
| Rect12 | Rect8の下、Rect7と左揃え | 赤色ボックス（Below="Rect8" + AlignLeftWith="Rect7"） |
| Rect13 | Rect12の下、Rect12と右揃え | 青色ボックス（Below="Rect12" + AlignRightWith="Rect12"） |
| Rect14 | Rect9の上、Rect9と右揃え | 緑色ボックス（Above="Rect9" + AlignRightWith="Rect9"） |
| Rect15 | Rect2の左、Rect9と上揃え | 赤色ボックス（LeftOf="Rect2" + AlignTopWith="Rect9"） |

## イベント仕様

本画面には動的なイベント処理はありません。すべてのレイアウトはXAMLの宣言的な添付プロパティにより静的に定義されています。

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

本画面はUIコントロールのデモ画面であり、データベースへのアクセス・更新は行いません。

## メッセージ仕様

本画面では特定のメッセージ表示は実装されていません。

## 例外処理

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

## 備考

- RelativePanelサイズ: 620x700、Margin=32
- ScrollViewer内に配置（Auto/Autoスクロール）
- 各Rectは50x50のBorderと中央配置のTextBlock
- 赤/青/緑の3色でグループを視覚的に区別
- Rect10のTextBlockは-90度回転して縦書き表示

---

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

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

### 推奨読解順序

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

RelativePanelの添付プロパティを理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | RelativePanelPage.axaml | `samples/ControlCatalog/Pages/RelativePanelPage.axaml` | パネル端配置（10-27行）でAlignXxxWithPanel確認 |
| 1-2 | RelativePanelPage.axaml | `samples/ControlCatalog/Pages/RelativePanelPage.axaml` | 相対配置（28-33行）でRightOf/Below確認 |
| 1-3 | RelativePanelPage.axaml | `samples/ControlCatalog/Pages/RelativePanelPage.axaml` | 位置揃え（37-60行）でAlignXxxWith確認 |

**読解のコツ**: RelativePanelの添付プロパティは大きく「WithPanel」系と「With」系に分類される。前者はパネル端に対する配置、後者は他要素に対する配置。

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

UserControlの初期化処理を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | RelativePanelPage.axaml.cs | `samples/ControlCatalog/Pages/RelativePanelPage.axaml.cs` | コンストラクタ（7-10行）でInitializeComponent |

**主要処理フロー**:
1. **8行**: InitializeComponentでXAMLをロード
2. 以降はXAML添付プロパティによるレイアウト計算

#### Step 3: レイアウトパターンを理解する

主要なレイアウトパターンを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | RelativePanelPage.axaml | `samples/ControlCatalog/Pages/RelativePanelPage.axaml` | 4隅配置パターン（Rect1,3,4,6） |
| 3-2 | RelativePanelPage.axaml | `samples/ControlCatalog/Pages/RelativePanelPage.axaml` | 中央配置パターン（Rect2,5,9） |
| 3-3 | RelativePanelPage.axaml | `samples/ControlCatalog/Pages/RelativePanelPage.axaml` | チェーン配置パターン（Rect7→Rect8→Rect12→Rect13） |

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

```
RelativePanelPage (UserControl)
    │
    ├─ InitializeComponent()
    │      └─ XAMLパーサー → RelativePanelPage.axaml読み込み
    │
    └─ XAML 静的構造
           │
           └─ ScrollViewer
                  │
                  └─ RelativePanel (Width=620, Height=700)
                         │
                         ├─ パネル端配置グループ
                         │      ├─ Rect1 (デフォルト/左上)
                         │      ├─ Rect2 (AlignHorizontalCenterWithPanel)
                         │      ├─ Rect3 (AlignRightWithPanel)
                         │      ├─ Rect4 (AlignBottomWithPanel)
                         │      ├─ Rect5 (AlignBottomWithPanel + AlignHorizontalCenterWithPanel)
                         │      └─ Rect6 (AlignBottomWithPanel + AlignRightWithPanel)
                         │
                         ├─ 相対配置チェーン
                         │      ├─ Rect7 (RightOf="Rect1")
                         │      ├─ Rect8 (Below="Rect7")
                         │      ├─ Rect12 (Below="Rect8" + AlignLeftWith="Rect7")
                         │      └─ Rect13 (Below="Rect12" + AlignRightWith="Rect12")
                         │
                         ├─ 中央配置グループ
                         │      ├─ Rect9 (AlignHorizontal/VerticalCenterWithPanel)
                         │      ├─ Rect10 (RightOf="Rect9" + AlignVerticalCenterWith="Rect9")
                         │      └─ Rect11 (AlignBottomWith="Rect9" + AlignHorizontalCenterWith="Rect9")
                         │
                         └─ 混合配置
                                ├─ Rect14 (Above="Rect9" + AlignRightWith="Rect9")
                                └─ Rect15 (LeftOf="Rect2" + AlignTopWith="Rect9")
```

### データフロー図

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

XAML定義 ────────────────▶ RelativePanel ─────────────▶ レイアウト配置
(添付プロパティ)          │                              │
                          ├─ 依存関係グラフ構築           │
                          │   (Name参照の解決)            ▼
                          │                          各要素の
                          ├─ 制約計算                 位置・サイズ
                          │   ├─ WithPanel系
                          │   └─ With系
                          │
                          └─ Arrange実行
                                 └─ 計算結果に基づく配置

添付プロパティ:
┌─────────────────────────────────────────┐
│ パネル端配置                              │
│  - AlignLeftWithPanel/AlignRightWithPanel │
│  - AlignTopWithPanel/AlignBottomWithPanel │
│  - AlignHorizontal/VerticalCenterWithPanel│
├─────────────────────────────────────────┤
│ 相対配置                                  │
│  - Above/Below/LeftOf/RightOf            │
├─────────────────────────────────────────┤
│ 位置揃え                                  │
│  - AlignLeftWith/AlignRightWith          │
│  - AlignTopWith/AlignBottomWith          │
│  - AlignHorizontal/VerticalCenterWith    │
└─────────────────────────────────────────┘
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| RelativePanelPage.axaml | `samples/ControlCatalog/Pages/RelativePanelPage.axaml` | XAML | 画面レイアウト・RelativePanel添付プロパティ定義 |
| RelativePanelPage.axaml.cs | `samples/ControlCatalog/Pages/RelativePanelPage.axaml.cs` | ソース | コードビハインド（InitializeComponentのみ） |
