# 画面設計書 6-Acrylic

## 概要

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

### 本画面の処理概要

このAcrylicページは、Avalonia UIのアクリル効果（ExperimentalAcrylicBorder）をデモンストレーションするページです。様々な色のアクリルマテリアルを表示し、TintOpacityとMaterialOpacityをスライダーで調整することで、半透明のぼかし効果を体験できます。

**業務上の目的・背景**：本画面は、Avalonia UIフレームワークのアクリル効果機能の実装方法を示すデモです。Windows 10/11やmacOSで見られるような半透明のぼかし効果（アクリル/ガラス効果）を実現できます。モダンなUIデザインやフローティングパネル、ツールチップなどの背景に使用することで、高品質な視覚効果を提供できます。

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

**主要な操作・処理内容**：
1. TintOpacityスライダーでアクリルの色の濃さを調整（0〜1）
2. MaterialOpacityスライダーでマテリアル全体の透明度を調整（0〜1）
3. 9種類の異なる色（赤、緑、黒、青、黄、白、グレー等）のアクリル効果を確認
4. 大きなアクリルボーダーで広い領域での効果を確認

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 73 | Brush | 主機能 | アクリル効果のデモ。ExperimentalAcrylicBorderの使用 |

## 画面種別

デモページ / サンプル

## URL/ルーティング

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

## 入出力項目

| 項目名 | 入力/出力 | データ型 | 説明 | バインディング |
|--------|----------|----------|------|---------------|
| TintOpacity | 入力 | double | アクリルの色の濃さ（0〜1） | #TintOpacitySlider.Value |
| MaterialOpacity | 入力 | double | マテリアル全体の透明度（0〜1） | #MaterialOpacitySlider.Value |

## 表示項目

| 項目名 | 表示位置 | データ型 | 説明 |
|--------|----------|----------|------|
| TintOpacitySlider | 上部 | Slider | 0〜1の範囲、初期値0.9 |
| MaterialOpacitySlider | 上部 | Slider | 0〜1の範囲、初期値0.8 |
| UniformGrid | 中央 | UniformGrid | 3x3の9色アクリルボーダー |
| 大型AcrylicBorder | 下部 | ExperimentalAcrylicBorder | 赤色、幅全体、高さ160 |

## イベント仕様

### 1-TintOpacitySlider値変更

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

**処理内容**:
1. バインディングにより全アクリルマテリアルのTintOpacityが更新
2. 色の濃さがリアルタイムに変化

**コード参照**: AcrylicPage.xaml 38-44行目（スライダー定義）、74行目等（バインディング）

### 2-MaterialOpacitySlider値変更

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

**処理内容**:
1. バインディングにより全アクリルマテリアルのMaterialOpacityが更新
2. 全体の透明度がリアルタイムに変化

**コード参照**: AcrylicPage.xaml 48-54行目（スライダー定義）、72行目等（バインディング）

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

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

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

## メッセージ仕様

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

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

## 例外処理

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

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

## 備考

- ExperimentalAcrylicBorderは実験的機能のため、将来変更される可能性あり
- BackgroundSource="Digger"は背後のコンテンツを参照してぼかし効果を適用
- CornerRadius="5"で角丸効果が適用
- 9色のカラーバリエーション：赤(#FF0000)、緑(#00FF00)、黒(#000000)、青(#0000FF)、黄(#FFFF00)、白(White)、濃灰(#3c3c3c)
- スタイルセレクターでTextBlockとSliderの共通スタイルを定義

---

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

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

### 推奨読解順序

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

この画面は特別なデータ構造を使用していません。XAMLバインディングで完結しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | AcrylicPage.xaml | `samples/ControlCatalog/Pages/AcrylicPage.xaml` | ExperimentalAcrylicMaterialのプロパティを確認 |

**読解のコツ**: ExperimentalAcrylicMaterialのTintColor、TintOpacity、MaterialOpacityの関係を理解することが重要です。

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

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

**主要処理フロー**:
1. **9-25行目**: UserControlスタイルの定義（ExperimentalAcrylicBorder、TextBlock、Slider）
2. **28-56行目**: コントロール用アクリルボーダーとスライダー
3. **58-151行目**: UniformGridに9つのアクリルボーダーを配置
4. **154-162行目**: 大型アクリルボーダー

#### Step 3: アクリル効果のパラメータを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | AcrylicPage.xaml | `samples/ControlCatalog/Pages/AcrylicPage.xaml` | ExperimentalAcrylicMaterialの各プロパティ |

**主要処理フロー**:
- **BackgroundSource="Digger"**: 背後のコンテンツを参照
- **TintColor**: アクリルの色
- **TintOpacity**: 色の濃さ（0=透明、1=不透明）
- **MaterialOpacity**: マテリアル全体の透明度

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

```
AcrylicPage（UserControl）
    │
    ├─ StackPanel（Spacing="20"）
    │      │
    │      ├─ ExperimentalAcrylicBorder[コントロール用]
    │      │      └─ Grid
    │      │             ├─ TextBlock[TintOpacity]
    │      │             ├─ Slider[TintOpacitySlider] Value=0.9
    │      │             ├─ TextBlock[値表示]
    │      │             ├─ TextBlock[MaterialOpacity]
    │      │             ├─ Slider[MaterialOpacitySlider] Value=0.8
    │      │             └─ TextBlock[値表示]
    │      │
    │      ├─ UniformGrid[BordersGrid] Columns=3
    │      │      ├─ AcrylicBorder[#FF0000]（赤）
    │      │      ├─ AcrylicBorder[#00FF00]（緑）
    │      │      ├─ AcrylicBorder[#000000]（黒）
    │      │      ├─ AcrylicBorder[#0000FF]（青）
    │      │      ├─ AcrylicBorder[#FFFF00]（黄）
    │      │      ├─ AcrylicBorder[#000000]（黒）
    │      │      ├─ AcrylicBorder[White]（白）
    │      │      ├─ AcrylicBorder[#3c3c3c]（濃灰）
    │      │      └─ AcrylicBorder[White]（白）
    │      │
    │      └─ ExperimentalAcrylicBorder[大型]
    │             └─ TintColor="Red" Height=160
    │
    └─ AcrylicPage.xaml.cs
           └─ InitializeComponent()のみ
```

### データフロー図

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

スライダー操作 ─────▶ AcrylicPage ────────▶ アクリル表示
  │                        │
  ├─ TintOpacity ────▶ バインディング ───▶ 色の濃さ変化
  │                        │
  └─ MaterialOpacity ─▶ バインディング ───▶ 透明度変化
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| AcrylicPage.xaml | `samples/ControlCatalog/Pages/AcrylicPage.xaml` | XAML | アクリル効果デモのUI定義 |
| AcrylicPage.xaml.cs | `samples/ControlCatalog/Pages/AcrylicPage.xaml.cs` | ソース | コードビハインド（最小限） |
