# 画面設計書 10-BitmapCache

## 概要

本ドキュメントは、ControlCatalogアプリケーションのBitmapCacheページ（BitmapCachePage）の画面設計を定義します。

### 本画面の処理概要

このBitmapCacheページは、Avalonia UIのBitmapCacheモード（CacheMode）をデモンストレーションするページです。レンダリングをビットマップにキャッシュし、スケーリングやサブピクセルオフセット時のパフォーマンスと品質のトレードオフを示しています。

**業務上の目的・背景**：本画面は、Avalonia UIフレームワークのBitmapCache機能の実装方法を示すデモです。BitmapCacheは、コントロールの描画結果をビットマップにキャッシュし、再描画コストを削減するための機能です。特に複雑なUIや頻繁にスケーリングされるコンテンツのパフォーマンス最適化に有効です。RenderAtScale、ClearType、SnapsToDevicePixelsなどのオプションで品質とパフォーマンスを調整できます。

**画面へのアクセス方法**：MainViewのHamburgerMenuから「BitmapCache」タブを選択してアクセスします。MainView.xamlの37-39行目で定義されています。

**主要な操作・処理内容**：
1. Render at scaleスライダーでキャッシュ解像度を調整（0.1〜4倍）
2. Scaleスライダーで表示スケールを調整（0.1〜4倍）
3. Enable clear typeチェックボックスでClearTypeレンダリングを切り替え
4. Snap to device pixelsチェックボックスでピクセル境界へのスナップを切り替え
5. Subpixel offset Xスライダーでサブピクセルオフセットを調整（0〜1）

**画面遷移**：
- 遷移元：MainView（HamburgerMenu）
- 遷移先：なし（コンテンツページ）

**権限による表示制御**：本アプリケーションはデモ用のため、特別な権限制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 85 | Renderer | 主機能 | BitmapCacheのデモ。ビットマップキャッシュによるレンダリング最適化 |

## 画面種別

デモページ / サンプル

## URL/ルーティング

デスクトップアプリケーションのため、URLルーティングは該当なし。HamburgerMenuのTabItemとしてアクセス。

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 説明 | バインディング |
|--------|----------|----------|------|---------------|
| RenderAtScale | 入力 | double | キャッシュ解像度（0.1〜4） | BitmapCache.RenderAtScale |
| Scale | 入力 | double | 表示スケール（0.1〜4） | ScaleTransform.ScaleX/ScaleY |
| EnableClearType | 入力 | bool | ClearTypeレンダリング | BitmapCache.EnableClearType |
| SnapsToDevicePixels | 入力 | bool | デバイスピクセルへのスナップ | BitmapCache.SnapsToDevicePixels |
| SubpixelOffsetX | 入力 | double | サブピクセルオフセット（0〜1） | TranslateTransform.X |

## 表示項目

| 項目名 | 表示位置 | データ型 | 説明 |
|--------|----------|----------|------|
| 設定パネル | 右側 | StackPanel | スライダーとチェックボックス |
| キャッシュデモ | 中央 | Border | Beige背景、スケール変換適用 |
| コンテンツ | 内部 | StackPanel | Slider、TextBlock（Lorem ipsum） |

## イベント仕様

本画面にはコードビハインドのイベントハンドラが実装されていません。すべての操作はXAMLバインディングで処理されます。

### 1-RenderAtScaleスライダー

**トリガー**: スライダー値変更

**処理内容**:
1. StaticResourceのBitmapCacheのRenderAtScaleプロパティが更新
2. キャッシュの解像度が変更され、再レンダリング

**コード参照**: BitmapCachePage.axaml 15行目

### 2-Scaleスライダー

**トリガー**: スライダー値変更

**処理内容**:
1. StaticResourceのScaleTransformのScaleXプロパティが更新
2. ScaleYはScaleXにOneWayでバインドされているため同期
3. コンテンツがスケーリング

**コード参照**: BitmapCachePage.axaml 17行目、10行目

### 3-EnableClearTypeチェックボックス

**トリガー**: チェック状態変更

**処理内容**:
1. BitmapCacheのEnableClearTypeプロパティが更新
2. テキストのClearTypeレンダリングが有効/無効に

**コード参照**: BitmapCachePage.axaml 18行目

### 4-SnapsToDevicePixelsチェックボックス

**トリガー**: チェック状態変更

**処理内容**:
1. BitmapCacheのSnapsToDevicePixelsプロパティが更新
2. ピクセル境界へのスナップが有効/無効に

**コード参照**: BitmapCachePage.axaml 20行目

### 5-SubpixelOffsetXスライダー

**トリガー**: スライダー値変更

**処理内容**:
1. StaticResourceのTranslateTransformのXプロパティが更新
2. コンテンツがサブピクセル単位で水平移動

**コード参照**: BitmapCachePage.axaml 22行目、11行目

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

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

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

## メッセージ仕様

| メッセージID | 種別 | 内容 | 表示条件 |
|-------------|------|------|----------|
| N/A | - | - | - |

本画面では特別なメッセージ表示は行われません。

## 例外処理

| 例外種別 | 発生条件 | 対処 |
|----------|----------|------|
| - | - | - |

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

## 備考

- BitmapCache、ScaleTransform、TranslateTransformはStaticResourceとして定義
- RenderAtScaleはキャッシュの解像度を決定（高いほど高品質だがメモリ使用量増加）
- EnableClearTypeはテキストの品質に影響
- SnapsToDevicePixelsはピクセルアライメントに影響
- サブピクセルオフセットはアンチエイリアシングの効果を確認するために使用
- Lorem ipsumテキストはTextWrapping="Wrap"で折り返し表示

---

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

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

### 推奨読解順序

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

この画面は3つのStaticResourceを使用しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | BitmapCachePage.axaml | `samples/ControlCatalog/Pages/BitmapCachePage.axaml` | リソース定義（Cache、Transform、SubPixelTransform） |

**読解のコツ**: StaticResourceとして定義されたオブジェクトは、複数のコントロールから参照され、バインディングで更新されます。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | BitmapCachePage.axaml | `samples/ControlCatalog/Pages/BitmapCachePage.axaml` | DockPanel構造とバインディング |
| 2-2 | BitmapCachePage.axaml.cs | `samples/ControlCatalog/Pages/BitmapCachePage.axaml.cs` | コードビハインド（最小限） |

**主要処理フロー**:
1. **8-12行目**: リソース定義（BitmapCache、ScaleTransform、TranslateTransform）
2. **13-23行目**: 設定パネル（スライダー、チェックボックス）
3. **24-44行目**: デモコンテンツ（変換とキャッシュ適用）

#### Step 3: BitmapCacheの効果を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | BitmapCachePage.axaml | `samples/ControlCatalog/Pages/BitmapCachePage.axaml` | CacheMode適用と変換の関係 |

**主要処理フロー**:
- **9行目**: BitmapCache定義
- **28-29行目**: Border.CacheMode="{StaticResource Cache}"
- **26-27行目**: RenderTransform適用
- **24行目**: TranslateTransform適用（サブピクセル）

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

```
BitmapCachePage（UserControl）
    │
    ├─ DockPanel.Resources
    │      ├─ BitmapCache[Cache]
    │      │      ├─ RenderAtScale（スライダーでバインド）
    │      │      ├─ EnableClearType（チェックボックスでバインド）
    │      │      └─ SnapsToDevicePixels（チェックボックスでバインド）
    │      │
    │      ├─ ScaleTransform[Transform]
    │      │      ├─ ScaleX（スライダーでバインド）
    │      │      └─ ScaleY = ScaleX（OneWay）
    │      │
    │      └─ TranslateTransform[SubPixelTransform]
    │             └─ X（スライダーでバインド）
    │
    ├─ StackPanel[設定] DockPanel.Dock=Right
    │      ├─ TextBlock[Render at scale]
    │      ├─ Slider → Cache.RenderAtScale
    │      ├─ TextBlock[Scale]
    │      ├─ Slider → Transform.ScaleX
    │      ├─ CheckBox → Cache.EnableClearType
    │      ├─ CheckBox → Cache.SnapsToDevicePixels
    │      ├─ TextBlock[Subpixel offset X]
    │      └─ Slider → SubPixelTransform.X
    │
    └─ Decorator[RenderTransform=SubPixelTransform]
           └─ Border[Beige背景, RenderTransform=Transform]
                  └─ Border[Margin, CacheMode=Cache]
                         └─ Border[白背景, 黒境界線]
                                └─ StackPanel
                                       ├─ Slider
                                       └─ TextBlock[Lorem ipsum]
```

### データフロー図

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

スライダー/チェックボックス ▶ BitmapCachePage ───▶ レンダリング
  │                            │
  ├─ RenderAtScale ──────▶ Cache.RenderAtScale ─▶ キャッシュ解像度
  │                            │
  ├─ Scale ────────────▶ Transform.ScaleX/Y ──▶ コンテンツスケール
  │                            │
  ├─ EnableClearType ──▶ Cache.EnableClearType ▶ テキスト品質
  │                            │
  ├─ SnapsToDevicePixels ▶ Cache.SnapsTo... ──▶ ピクセル境界
  │                            │
  └─ SubpixelOffsetX ──▶ SubPixelTransform.X ─▶ サブピクセル移動
```

### 関連ファイル一覧

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