# 画面設計書 37-LayoutTransformControl

## 概要

本ドキュメントは、ControlCatalogサンプルアプリケーションのLayoutTransformControlページに関する画面設計書です。LayoutTransformControlの使用方法をデモンストレーションするページです。

### 本画面の処理概要

LayoutTransformControlページは、Avaloniaフレームワークにおけるレイアウト時の変換（Transform）機能を確認するためのデモ画面です。LayoutTransformControlは、子要素に変換を適用しながらも、レイアウト計算に変換結果を反映させる特殊なコントロールです。

**業務上の目的・背景**：WPFのLayoutTransformと同様の機能をAvaloniaで実現するために、LayoutTransformControlが提供されています。通常のRenderTransformはレンダリング時にのみ適用され、レイアウト計算には影響しませんが、LayoutTransformControlを使用することで、変換後のサイズを考慮したレイアウトが可能になります。これは、回転したテキストやボタンを含む複雑なレイアウトを構築する際に重要です。

**画面へのアクセス方法**：ControlCatalogアプリケーションのMainViewから、HamburgerMenuナビゲーションを使用して「LayoutTransformControl」を選択することでアクセスできます。

**主要な操作・処理内容**：
1. Rotationスライダーで回転角度（0-360度）を調整
2. LayoutTransformControlによりボタンが回転し、周囲のBorderが変換後のサイズに合わせて配置される動作を確認

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

**権限による表示制御**：特になし。すべてのユーザーが全機能を利用可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 76 | Transform | 主機能 | LayoutTransformControlのデモ。レイアウト時の変換適用 |

## 画面種別

デモ/サンプル画面

## URL/ルーティング

HamburgerMenuナビゲーション経由でアクセス（Avalonia UIフレームワークのページベースナビゲーション）

## 入出力項目

| 項目名 | 入力/出力 | 型 | 説明 |
|--------|----------|------|------|
| rotation | 入力 | double | 回転角度（0-360） |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| Rotation | TextBlock | ラベル |
| rotation | Slider | 回転角度スライダー（0-360） |
| 上下左右のBorder | Border | SystemAccentColorで着色された枠 |
| layoutTransform | LayoutTransformControl | 変換対象のコントロール |
| Layout Transform | Button | 回転するボタン |

## イベント仕様

### 1-スライダー値変更

Sliderの値が変更されると、LayoutTransformControlのLayoutTransform内のRotateTransform.Angleプロパティがバインディングにより更新され、内部のボタンが回転します。

### 2-レイアウト再計算

回転角度が変更されると、LayoutTransformControlは変換後のサイズを計算し、Gridセルのサイズが自動的に調整されます。これにより、周囲の4つのBorderが回転したボタンに合わせて配置されます。

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

本画面はデモ画面のため、データベース操作は行いません。

## メッセージ仕様

本画面には固有のメッセージ表示はありません。

## 例外処理

本画面はデモ画面のため、特別な例外処理は実装されていません。

## 備考

- LayoutTransformControlとRenderTransformの違い：
  - RenderTransform: レンダリング時にのみ適用、レイアウト計算には影響しない
  - LayoutTransform: レイアウト計算に変換結果が反映される
- 周囲の4つのBorderはSystemAccentColorで着色されており、LayoutTransformControlのサイズ変化に応じて位置が変わることを視覚的に確認できる
- Grid.Column="1" Grid.Row="0", Grid.Column="0" Grid.Row="1", Grid.Column="2" Grid.Row="1", Grid.Column="1" Grid.Row="2"に配置されたBorderが十字形を形成

---

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

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

### 推奨読解順序

#### Step 1: UI定義を理解する

LayoutTransformControlPageはViewModelを持たないシンプルな構造で、XAMLでLayoutTransformControlの使用方法を定義しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | LayoutTransformControlPage.xaml | `samples/ControlCatalog/Pages/LayoutTransformControlPage.xaml` | LayoutTransformControl、RotateTransform、バインディングを理解 |

**読解のコツ**: Grid内のLayoutTransformControlと周囲のBorderの配置関係を確認してください。LayoutTransformControl.LayoutTransform内のRotateTransformがSliderの値にバインドされています。

#### Step 2: コードビハインドを理解する

最小限のコードビハインドでXAMLの読み込みのみを行います。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | LayoutTransformControlPage.xaml.cs | `samples/ControlCatalog/Pages/LayoutTransformControlPage.xaml.cs` | InitializeComponent()の呼び出し |

**主要処理フロー**:
1. **行8**: InitializeComponent()でXAMLを読み込み

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

```
LayoutTransformControlPage (UserControl)
    |
    +-- LayoutTransformControlPage.xaml.cs (Code-behind)
    |       |
    |       +-- InitializeComponent()
    |
    +-- LayoutTransformControlPage.xaml (UI定義)
            |
            +-- DockPanel
                    +-- Grid (Rotation Slider)
                    |       +-- TextBlock "Rotation"
                    |       +-- Slider Name="rotation" Maximum="360"
                    |
                    +-- Grid (3x3レイアウト)
                            +-- Border (上, Grid.Column=1, Row=0)
                            +-- Border (左, Grid.Column=0, Row=1)
                            +-- Border (右, Grid.Column=2, Row=1)
                            +-- Border (下, Grid.Column=1, Row=2)
                            |
                            +-- LayoutTransformControl (Grid.Column=1, Row=1)
                                    +-- LayoutTransform
                                    |       +-- RotateTransform Angle="{Binding #rotation.Value}"
                                    |
                                    +-- Button "Layout Transform"
```

### データフロー図

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

Slider値変更 ─────────> RotateTransform.Angle ─────────> ボタン回転
(0-360)                       |
                              v
                        LayoutTransformControl
                        サイズ再計算
                              |
                              v
                        Grid セルサイズ更新 ────────────> Border位置変更
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| LayoutTransformControlPage.xaml | `samples/ControlCatalog/Pages/LayoutTransformControlPage.xaml` | XAML | UI定義 |
| LayoutTransformControlPage.xaml.cs | `samples/ControlCatalog/Pages/LayoutTransformControlPage.xaml.cs` | ソース | コードビハインド（最小限） |
