# 画面設計書 62-Viewbox

## 概要

本ドキュメントは、Avalonia UIフレームワークのControlCatalogサンプルアプリケーションにおけるViewboxデモページの画面設計書です。Viewboxコントロールのコンテンツスケーリング機能を実証するためのデモ画面を定義します。

### 本画面の処理概要

本画面は、Viewboxコントロールを使用して子要素のスケーリング動作をデモンストレーションするページです。ユーザーはスライダーとコンボボックスを操作して、コンテナサイズとスケーリング動作を動的に変更し、Viewboxの挙動を視覚的に確認できます。

**業務上の目的・背景**：
Viewboxコントロールは、子要素を親コンテナに合わせて自動的にスケーリングするために使用されます。レスポンシブデザインやアイコン表示、グラフィック要素の柔軟なサイズ調整に不可欠なコンポーネントです。本デモページは、Stretch（伸縮方法）とStretchDirection（伸縮方向）の各オプションがどのように動作するかを開発者に示すことを目的としています。

**画面へのアクセス方法**：
ControlCatalogアプリケーションのメインウィンドウから、HamburgerMenuナビゲーションを使用して「Viewbox」項目を選択することでアクセスします。

**主要な操作・処理内容**：
1. 幅の調整：Widthスライダーでコンテナの幅を10〜200の範囲で変更
2. 高さの調整：Heightスライダーでコンテナの高さを10〜200の範囲で変更
3. Stretchモードの変更：Uniform/UniformToFill/Fill/Noneから選択
4. StretchDirectionの変更：Both/DownOnly/UpOnlyから選択
5. 視覚的確認：Ellipse（楕円）がViewbox内でどのようにスケーリングされるか観察

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

**権限による表示制御**：
なし（デモアプリケーションのため権限管理は実装されていません）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 39 | Viewbox | 主機能 | コンテンツのスケーリング表示 |

## 画面種別

デモ / 設定

## URL/ルーティング

ControlCatalogアプリケーション内のHamburgerMenuナビゲーションで「Viewbox」を選択

## 入出力項目

| 項目名 | 項目種別 | データ型 | 必須 | 説明 |
|--------|----------|----------|------|------|
| Width | 入力 | double | - | コンテナの幅（10〜200） |
| Height | 入力 | double | - | コンテナの高さ（10〜200） |
| Stretch | 入力 | Stretch | - | スケーリングモード |
| StretchDirection | 入力 | StretchDirection | - | スケーリング方向制限 |

## 表示項目

| 項目名 | 表示形式 | データソース | 説明 |
|--------|----------|--------------|------|
| 説明テキスト | TextBlock | 静的テキスト | "A control used to scale single child." |
| 外枠Border | Border | 静的 | 200x200のオレンジ色ボーダー（参照枠） |
| コンテナBorder | Border | Slider値 | 可変サイズの青色ボーダー |
| Viewbox | Viewbox | - | スケーリングコンテナ |
| Ellipse | Ellipse | 静的 | 50x50の青い楕円（スケーリング対象） |
| Widthラベル | TextBlock | 静的 | "Width" |
| Widthスライダー | Slider | WidthSlider | 幅調整用（10〜200、初期値100） |
| Heightラベル | TextBlock | 静的 | "Height" |
| Heightスライダー | Slider | HeightSlider | 高さ調整用（10〜200、初期値100） |
| Stretchラベル | TextBlock | 静的 | "Stretch" |
| StretchComboBox | ComboBox | Stretch列挙値 | Stretch選択 |
| StretchDirectionラベル | TextBlock | 静的 | "Stretch Direction" |
| StretchDirectionComboBox | ComboBox | StretchDirection列挙値 | StretchDirection選択 |

## イベント仕様

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

コンテナの幅を変更し、Viewboxのスケーリング動作を更新します。

- **トリガー**: Widthスライダーの値変更
- **処理内容**: 内側Borderの幅を更新
- **データ更新**: Binding経由で即座に反映

### 2-Heightスライダー変更

コンテナの高さを変更し、Viewboxのスケーリング動作を更新します。

- **トリガー**: Heightスライダーの値変更
- **処理内容**: 内側Borderの高さを更新
- **データ更新**: Binding経由で即座に反映

### 3-Stretch変更

Viewboxのスケーリングモードを変更します。

- **トリガー**: StretchSelector ComboBoxの選択変更
- **処理内容**: ViewboxのStretchプロパティを更新
- **選択肢**:
  - Uniform: アスペクト比を維持してコンテナに収まるようにスケール
  - UniformToFill: アスペクト比を維持してコンテナを埋めるようにスケール
  - Fill: アスペクト比を無視してコンテナを完全に埋める
  - None: スケーリングなし

### 4-StretchDirection変更

スケーリングの方向制限を変更します。

- **トリガー**: StretchDirectionSelector ComboBoxの選択変更
- **処理内容**: ViewboxのStretchDirectionプロパティを更新
- **選択肢**:
  - Both: 拡大・縮小両方可能
  - DownOnly: 縮小のみ可能
  - UpOnly: 拡大のみ可能

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

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

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

該当なし

## メッセージ仕様

本画面にはメッセージ表示機能はありません。

## 例外処理

| 例外ケース | 対応処理 |
|-----------|---------|
| スライダー値が範囲外 | Minimum/Maximumで制約（10〜200） |
| ComboBox選択なし | FallbackValueでデフォルト値を使用 |

## 備考

- 外枠の200x200ボーダー（オレンジ）は参照サイズを示すガイドです
- 内側の青いボーダーがViewboxの実際のコンテナサイズを示します
- Ellipseのネイティブサイズは50x50ですが、Viewboxの設定によってスケーリングされます
- TickFrequency=25でスライダーに目盛りが表示されます

---

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

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

### 推奨読解順序

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

本画面はViewModelを使用せず、XAML内のバインディングのみでデータフローを実現しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ViewboxPage.xaml | `samples/ControlCatalog/Pages/ViewboxPage.xaml` | x:Name属性による要素参照とBindingの使用方法 |

**読解のコツ**: `{Binding #WidthSlider.Value}` のような要素名参照バインディング（Element Name Binding）を理解することが重要です。Avaloniaでは `#` を使って名前付き要素を参照します。

#### Step 2: レイアウト構造を理解する

コントロールの階層構造と配置を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ViewboxPage.xaml | `samples/ControlCatalog/Pages/ViewboxPage.xaml` | Grid RowDefinitions, ColumnDefinitionsによるレイアウト |

**主要処理フロー**:
1. **6行目**: Grid RowDefinitions="Auto,*,*" で3行レイアウト
2. **11行目**: Grid ColumnDefinitions="*,Auto" で2列レイアウト
3. **13-21行目**: Borderの入れ子構造とViewbox配置
4. **23-48行目**: コントロールパネル（スライダー、ComboBox）

#### Step 3: Viewboxのスケーリング動作を理解する

Viewboxの各プロパティがどのようにスケーリングに影響するかを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ViewboxPage.xaml | `samples/ControlCatalog/Pages/ViewboxPage.xaml` | Stretch/StretchDirectionプロパティ（16-17行目） |

**主要処理フロー**:
- **16行目**: StretchプロパティがComboBox選択にバインド
- **17行目**: StretchDirectionプロパティがComboBox選択にバインド
- **18行目**: Ellipse(50x50)がViewboxの子として配置

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

```
ViewboxPage (UserControl)
    │
    └─ Grid (メインレイアウト)
           │
           ├─ Row 0: TextBlock (説明)
           │
           ├─ Row 1: Grid (デモエリア)
           │      │
           │      ├─ Column 0: Border (外枠 200x200)
           │      │      └─ Border (可変サイズ)
           │      │             └─ Viewbox
           │      │                    └─ Ellipse (50x50)
           │      │
           │      └─ Column 1: StackPanel (コントロール)
           │             ├─ Width Slider ──▶ Border.Width
           │             ├─ Height Slider ──▶ Border.Height
           │             ├─ Stretch ComboBox ──▶ Viewbox.Stretch
           │             └─ StretchDirection ComboBox ──▶ Viewbox.StretchDirection
           │
           └─ Row 2: (空き)
```

### データフロー図

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

WidthSlider.Value ─────▶ {Binding #WidthSlider.Value} ─▶ Border.Width
                                                              │
HeightSlider.Value ────▶ {Binding #HeightSlider.Value} ▶ Border.Height
                                                              │
                                                              ▼
StretchSelector ───────▶ {Binding #StretchSelector...} ▶ Viewbox.Stretch
                                                              │
                                                              ▼
StretchDirection ──────▶ {Binding #StretchDirection...} ▶ Viewbox.StretchDirection
Selector                                                      │
                                                              ▼
                                                         Ellipse表示
                                                         (スケーリング結果)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ViewboxPage.xaml | `samples/ControlCatalog/Pages/ViewboxPage.xaml` | XAML | UI定義、Viewboxデモ |
| ViewboxPage.xaml.cs | `samples/ControlCatalog/Pages/ViewboxPage.xaml.cs` | ソース | コードビハインド（最小限） |
| Viewbox.cs | `src/Avalonia.Controls/Viewbox.cs` | ソース | Viewboxコントロール実装 |
