# 画面設計書 35-Image

## 概要

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

### 本画面の処理概要

Imageページは、Avaloniaフレームワークにおける画像表示機能を確認するためのデモ画面です。ビットマップ画像の表示、画像のクロップ（切り抜き）、ベクター描画（DrawingImage）の3種類の画像表示方法と、各種Stretchモードを学習・検証できます。

**業務上の目的・背景**：アプリケーションにおける画像の表示は、ユーザーインターフェースの重要な要素です。写真、アイコン、イラスト、グラフなど、様々な種類の画像を適切に表示する必要があります。本画面は開発者がAvaloniaのImage関連機能（Stretch、CroppedBitmap、DrawingImage）を理解し、適切に実装する方法を学ぶために提供されています。

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

**主要な操作・処理内容**：
1. Bitmapセクション：Stretchモード（None/Fill/Uniform/UniformToFill）の切り替え
2. Cropセクション：画像のクロップ位置（None/Center/TopLeft/TopRight/BottomLeft/BottomRight）の切り替え
3. Drawingセクション：ベクター描画のStretchモード切り替え

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 80 | Image | 主機能 | Imageコントロールのデモ。ビットマップ画像の表示 |

## 画面種別

デモ/サンプル画面

## URL/ルーティング

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

## 入出力項目

| 項目名 | 入力/出力 | 型 | 説明 |
|--------|----------|------|------|
| bitmapStretch | 入力 | int（ComboBoxインデックス） | Bitmap画像のStretchモード選択 |
| bitmapCrop | 入力 | int（ComboBoxインデックス） | クロップ位置の選択 |
| drawingStretch | 入力 | int（ComboBoxインデックス） | Drawing画像のStretchモード選択 |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| ヘッダーテキスト | TextBlock | "Displays an image" |
| Bitmap | TextBlock | ビットマップセクションのタイトル |
| bitmapStretch | ComboBox | Stretchモード選択（None/Fill/Uniform/UniformToFill） |
| bitmapImage | Image | ビットマップ画像表示 |
| Crop | TextBlock | クロップセクションのタイトル |
| bitmapCrop | ComboBox | クロップ位置選択 |
| croppedImage | Image | クロップされた画像表示 |
| Drawing | TextBlock | 描画セクションのタイトル |
| drawingStretch | ComboBox | Stretchモード選択 |
| drawingImage | Image | ベクター描画表示 |

## イベント仕様

### 1-BitmapStretchChanged

bitmapStretch ComboBoxの選択が変更されると、BitmapStretchChangedメソッドが呼び出され、bitmapImageのStretchプロパティが更新されます。

### 2-BitmapCropChanged

bitmapCrop ComboBoxの選択が変更されると、BitmapCropChangedメソッドが呼び出され、croppedImageのSourceであるCroppedBitmapのSourceRectプロパティが更新されます。

### 3-DrawingStretchChanged

drawingStretch ComboBoxの選択が変更されると、DrawingStretchChangedメソッドが呼び出され、drawingImageのStretchプロパティが更新されます。

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- Stretchモード:
  - None: 画像をそのままのサイズで表示
  - Fill: コンテナに合わせて引き伸ばし（アスペクト比を無視）
  - Uniform: アスペクト比を維持しつつコンテナに収まるように表示
  - UniformToFill: アスペクト比を維持しつつコンテナを埋めるように表示
- CroppedBitmap: 画像の一部を切り抜いて表示するためのソース
- DrawingImage: ベクター描画（Geometry、Brush等）を画像として表示
- 使用画像: delicate-arch-896885_640.jpg（640x426ピクセル）

---

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

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

### 推奨読解順序

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

XAMLで画像表示の各種パターンを定義しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ImagePage.xaml | `samples/ControlCatalog/Pages/ImagePage.xaml` | Image、CroppedBitmap、DrawingImageの使用方法を理解 |

**読解のコツ**: 3つのDockPanelがそれぞれBitmap、Crop、Drawingセクションを構成しています。ComboBoxのSelectionChangedイベントでコードビハインドのメソッドが呼び出されています。

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

選択変更時のイベントハンドラとクロップ位置の計算ロジックを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ImagePage.xaml.cs | `samples/ControlCatalog/Pages/ImagePage.xaml.cs` | Stretch設定、CroppedBitmapのSourceRect計算を理解 |

**主要処理フロー**:
1. **行15-22**: BitmapStretchChanged - Stretchプロパティの設定
2. **行24-31**: DrawingStretchChanged - Stretchプロパティの設定
3. **行33-44**: BitmapCropChanged - CroppedBitmapのSourceRect更新
4. **行46-60**: GetCropRect - クロップ位置に基づくPixelRectの計算

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

```
ImagePage (UserControl)
    |
    +-- ImagePage.xaml.cs (Code-behind)
    |       |
    |       +-- InitializeComponent()
    |       |
    |       +-- BitmapStretchChanged(sender, e)
    |       |       +-- bitmapImage.Stretch = (Stretch)index
    |       |
    |       +-- DrawingStretchChanged(sender, e)
    |       |       +-- drawingImage.Stretch = (Stretch)index
    |       |
    |       +-- BitmapCropChanged(sender, e)
    |               +-- GetCropRect(index)
    |                       +-- PixelRect計算（Center/TopLeft/TopRight/BottomLeft/BottomRight）
    |
    +-- ImagePage.xaml (UI定義)
            +-- Grid (3列レイアウト)
                    +-- DockPanel (Bitmap)
                    |       +-- ComboBox bitmapStretch
                    |       +-- Image bitmapImage
                    |
                    +-- DockPanel (Crop)
                    |       +-- ComboBox bitmapCrop
                    |       +-- Image croppedImage
                    |               +-- CroppedBitmap (SourceRect="0 0 320 240")
                    |
                    +-- DockPanel (Drawing)
                            +-- ComboBox drawingStretch
                            +-- Image drawingImage
                                    +-- DrawingImage
                                            +-- GeometryDrawing (赤いハート形)
```

### データフロー図

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

ComboBox選択変更 ─────> BitmapStretchChanged() ─────> bitmapImage.Stretch
(None/Fill/Uniform/                                        |
 UniformToFill)                                            v
                                                    画像のStretch表示

ComboBox選択変更 ─────> BitmapCropChanged() ─────────> CroppedBitmap.SourceRect
(None/Center/etc.)            |                            |
                              v                            v
                        GetCropRect()                  画像のクロップ表示
                              |
                              v
                        PixelRect計算
                        (640x426画像から
                         320x240を切り出し)

ComboBox選択変更 ─────> DrawingStretchChanged() ────> drawingImage.Stretch
                                                           |
                                                           v
                                                    ベクター描画のStretch表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ImagePage.xaml | `samples/ControlCatalog/Pages/ImagePage.xaml` | XAML | UI定義、Image設定 |
| ImagePage.xaml.cs | `samples/ControlCatalog/Pages/ImagePage.xaml.cs` | ソース | コードビハインド、イベントハンドラ |
| delicate-arch-896885_640.jpg | `samples/ControlCatalog/Assets/delicate-arch-896885_640.jpg` | 画像 | 表示対象のビットマップ画像 |
