# 画面設計書 82-Brushes

## 概要

本ドキュメントは、RenderDemoアプリケーションにおけるBrushes（ブラシ）デモページの画面設計について記載します。

### 本画面の処理概要

このページは、Avaloniaフレームワークの各種ブラシ（塗りつぶしスタイル）とその変換機能のデモンストレーションを行う画面です。LinearGradientBrush（線形グラデーション）、RadialGradientBrush（放射状グラデーション）、VisualBrush（ビジュアルブラシ）の3種類のブラシに対して、TransformGroupによる変換（スケール、スキュー、回転、移動）を適用した効果を視覚的に示します。

**業務上の目的・背景**：
開発者がAvaloniaのブラシシステムと変換機能を理解し、リッチなビジュアル表現を実装する際の参考とすることを目的としています。グラデーションブラシとその変換は、モダンなUI/UXデザインにおいて頻繁に使用される技術であり、ボタンのホバー効果、背景デザイン、データビジュアライゼーションなどの実装に必要な基礎技術です。

**画面へのアクセス方法**：
RenderDemoアプリケーションを起動後、メインウィンドウ左側のHamburgerMenuから「Brushes」を選択することでアクセスできます。

**主要な操作・処理内容**：
1. 3つの矩形領域にそれぞれ異なるブラシを適用して表示
2. 最初の矩形：LinearGradientBrushにScaleTransform（0.5倍）とTranslateTransformを適用
3. 2番目の矩形：RadialGradientBrushにSkewTransform（45度）とTranslateTransformを適用
4. 3番目の矩形：VisualBrush（4色タイルパターン）にScaleTransform（2倍）とSkewTransform（45度）を適用
5. 各矩形の下にテキストで変換内容の説明を表示

**画面遷移**：
- 遷移元：RenderDemo MainWindow（HamburgerMenuナビゲーション）
- 遷移先：なし（他のデモページへはHamburgerMenu経由で遷移）

**権限による表示制御**：
特に権限による表示制御はありません。デモ用途のため全ての機能が常に利用可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 73 | Brush | 主機能 | LinearGradientBrush、RadialGradientBrush、VisualBrushの適用 |
| 79 | GradientBrush | 補助機能 | グラデーションストップの設定、変換の適用 |
| 76 | Transform | 補助機能 | TransformGroup、ScaleTransform、SkewTransform、TranslateTransformの適用 |

## 画面種別

デモ / 表示専用

## URL/ルーティング

HamburgerMenuナビゲーション: "Brushes"タブ

## 入出力項目

本画面は表示専用のため、ユーザー入力項目はありません。

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|-----|------|
| ブラシデモ領域 | 出力 | Canvas | 480x360ピクセルの描画領域 |

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 矩形1（LinearGradient） | Rectangle | 440x50px、LinearGradientBrush（Blue→Green→Lime）にscale(0.5)適用 |
| 説明テキスト1 | TextBlock | "scale(0.5) on gradient" |
| 矩形2（RadialGradient） | Rectangle | 440x50px、RadialGradientBrush（Black→Orange）にskewX(45)適用 |
| 説明テキスト2 | TextBlock | "skewX(45) on gradient" |
| 矩形3（VisualBrush） | Rectangle | 440x50px、4色タイルパターンにscale(2)とskewX(45)適用 |
| 説明テキスト3 | TextBlock | "scale(2), skewX(45) on pattern" |

## イベント仕様

本画面はXAML定義のみで動的なイベント処理はありません。コードビハインドはInitializeComponentのみです。

### 1-InitializeComponent

ページ初期化時に発生するイベントです。

- **トリガー**：ページのコンストラクタ呼び出し時
- **処理内容**：
  1. AvaloniaXamlLoaderを使用してXAMLリソースを読み込み
  2. UIコントロールツリーを構築

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

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

## メッセージ仕様

本画面はメッセージを表示しません。

## 例外処理

本画面は静的なXAML定義のため、特別な例外処理はありません。

## 備考

- ブラシの変換はTransformGroupを使用して複数の変換を組み合わせています
- VisualBrushはTileModeをTileに設定してタイル繰り返しパターンを実現
- グラデーションのStartPoint/EndPointは相対座標とピクセル座標の両方をサポート
- 背景色は白（White）に設定されています

---

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

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

### 推奨読解順序

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

本画面はXAML定義のみでデータ構造への依存はありません。ブラシとTransformの階層構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | BrushesPage.axaml | `samples/RenderDemo/Pages/BrushesPage.axaml` | 行7でCanvasの基本構造を確認 |

**読解のコツ**: XAMLでは入れ子構造で変換を定義します。TransformGroupの中にScaleTransform、SkewTransform等が含まれます。

#### Step 2: LinearGradientBrushの変換を理解する

最初の矩形に適用されているLinearGradientBrushとその変換を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | BrushesPage.axaml | `samples/RenderDemo/Pages/BrushesPage.axaml` | 行8-26でLinearGradientBrushの定義と変換を確認 |

**主要処理フロー**:
- **行10**: StartPoint="0,0" EndPoint="410,0"で水平方向のグラデーション
- **行12-17**: TransformGroupでScaleTransform(0.5)とTranslateTransform(5,15)を適用
- **行19-23**: GradientStops（Blue→Green→Lime）を定義

#### Step 3: RadialGradientBrushの変換を理解する

2番目の矩形に適用されているRadialGradientBrushとスキュー変換を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | BrushesPage.axaml | `samples/RenderDemo/Pages/BrushesPage.axaml` | 行28-45でRadialGradientBrushの定義と変換を確認 |

**主要処理フロー**:
- **行30**: Center="0.0,0.0" RadiusX="13%" RadiusY="13%"で放射状グラデーション
- **行34**: SkewTransform AngleX="45"で45度の歪み変換
- **行36**: TranslateTransform X="240" Y="45"で位置調整

#### Step 4: VisualBrushとタイルパターンを理解する

3番目の矩形に適用されているVisualBrushとタイリングを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | BrushesPage.axaml | `samples/RenderDemo/Pages/BrushesPage.axaml` | 行47-68でVisualBrushの定義を確認 |

**主要処理フロー**:
- **行49**: TileMode="Tile"でタイル繰り返し
- **行52**: ScaleTransform ScaleX="2" ScaleY="2"で2倍拡大
- **行53**: SkewTransform AngleX="45"で45度の歪み
- **行59-64**: 4つのRectangle（Maroon、Green、Blue、Yellow）でタイルパターンを構成

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

```
BrushesPage (UserControl)
    │
    ├─ Canvas (480x360, Background=White)
    │      │
    │      ├─ Rectangle (LinearGradientBrush)
    │      │      └─ LinearGradientBrush
    │      │             ├─ TransformGroup
    │      │             │      ├─ ScaleTransform (0.5)
    │      │             │      └─ TranslateTransform (5, 15)
    │      │             └─ GradientStops (Blue→Green→Lime)
    │      │
    │      ├─ TextBlock ("scale(0.5) on gradient")
    │      │
    │      ├─ Rectangle (RadialGradientBrush)
    │      │      └─ RadialGradientBrush
    │      │             ├─ TransformGroup
    │      │             │      ├─ SkewTransform (45°)
    │      │             │      └─ TranslateTransform (240, 45)
    │      │             └─ GradientStops (Black→Orange)
    │      │
    │      ├─ TextBlock ("skewX(45) on gradient")
    │      │
    │      ├─ Rectangle (VisualBrush)
    │      │      └─ VisualBrush (TileMode=Tile)
    │      │             ├─ TransformGroup
    │      │             │      ├─ ScaleTransform (2x)
    │      │             │      └─ SkewTransform (45°)
    │      │             └─ Visual (Canvas with 4 Rectangles)
    │      │
    │      └─ TextBlock ("scale(2), skewX(45) on pattern")
    │
    └─ BrushesPage.axaml.cs
           └─ InitializeComponent()
```

### データフロー図

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

XAML定義        ─▶ AvaloniaXamlLoader     ─▶ UIコントロールツリー
                        │
                        ▼
                   ブラシ生成
                        │
                        ├─▶ LinearGradientBrush ─▶ 矩形1描画
                        ├─▶ RadialGradientBrush ─▶ 矩形2描画
                        └─▶ VisualBrush         ─▶ 矩形3描画
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| BrushesPage.axaml | `samples/RenderDemo/Pages/BrushesPage.axaml` | テンプレート | ブラシデモのUIレイアウト定義 |
| BrushesPage.axaml.cs | `samples/RenderDemo/Pages/BrushesPage.axaml.cs` | ソース | コードビハインド（InitializeComponentのみ） |
| MainWindow.xaml | `samples/RenderDemo/MainWindow.xaml` | テンプレート | HamburgerMenuナビゲーションを提供 |
