# 画面設計書 65-HeaderedContentControl

## 概要

本ドキュメントは、Avalonia UIフレームワークのControlCatalogサンプルアプリケーションにおけるHeaderedContentControlデモページの画面設計書です。ヘッダー付きコンテンツコントロールの各種バリエーションを実証するためのデモ画面を定義します。

### 本画面の処理概要

本画面は、HeaderedContentControlおよびその派生コントロール（GroupBox）を使用して、ヘッダーとコンテンツを組み合わせた表示パターンをデモンストレーションするページです。テキストヘッダー、画像ヘッダー、非テキストヘッダーなど、様々なヘッダー形式を視覚的に確認できます。

**業務上の目的・背景**：
HeaderedContentControlは、セクションやグループを視覚的に区切る際に広く使用されるUIパターンです。フォームのセクション分け、設定パネルのグループ化、カード型UIなど、様々な場面で活用されます。本デモページは、HeaderedContentControlの基本的な使用方法と、ヘッダー・コンテンツの柔軟なカスタマイズ方法を開発者に示すことを目的としています。

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

**主要な操作・処理内容**：
1. テキストヘッダーの表示：シンプルなテキスト文字列をヘッダーとして表示
2. GroupBoxスタイルの表示：HeaderedContentControlをGroupBoxとしてスタイリング
3. 画像コンテンツの表示：ヘッダーの下に画像を配置
4. 非テキストヘッダーの表示：画像をヘッダーとして使用

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 5 | Control | 主機能 | HeaderedContentControlのデモ、ヘッダー付きコンテンツ表示 |

## 画面種別

デモ / 表示

## URL/ルーティング

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

## 入出力項目

本画面に入出力項目はありません。すべて静的な表示のみです。

## 表示項目

| 項目名 | 表示形式 | データソース | 説明 |
|--------|----------|--------------|------|
| テキストヘッダーの例 | HeaderedContentControl | 静的 | "This is the text header!" ヘッダー + TextBlockコンテンツ |
| GroupBoxの例 | GroupBox | 静的 | "This is a GroupBox" ヘッダー + 説明テキスト |
| 画像コンテンツの例 | HeaderedContentControl | 静的 | "This is the image header!" ヘッダー + 画像コンテンツ |
| 非テキストヘッダーの例 | HeaderedContentControl | 静的 | 画像ヘッダー + TextBlockコンテンツ |

## イベント仕様

本画面にはインタラクティブなイベントはありません。すべて静的な表示のみです。

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

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

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

該当なし

## メッセージ仕様

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

## 例外処理

| 例外ケース | 対応処理 |
|-----------|---------|
| 画像読み込み失敗 | Avaloniaのデフォルトエラーハンドリング |

## 備考

- WrapPanelのItemWidth=400で各コントロールの幅を統一
- HeaderedContentControlはBorderBrush、BorderThickness、CornerRadiusでカスタマイズ可能
- GroupBoxはHeaderedContentControlの再スタイリングされた派生コントロール
- 画像はAssets/delicate-arch-896885_640.jpgを使用

---

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

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

### 推奨読解順序

#### Step 1: UI構造を理解する

XAMLファイルで各HeaderedContentControlのバリエーションを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | HeaderedContentPage.axaml | `samples/ControlCatalog/Pages/HeaderedContentPage.axaml` | WrapPanelによる配置と4つのバリエーション |

**読解のコツ**: 4つのHeaderedContentControl/GroupBoxがWrapPanel内に配置されています。各コントロールのHeader属性とContentの設定方法の違いに注目してください。

#### Step 2: 各パターンの詳細を理解する

4つの表示パターンの違いを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | HeaderedContentPage.axaml | `samples/ControlCatalog/Pages/HeaderedContentPage.axaml` | パターン1: テキストヘッダー（8-15行目） |
| 2-2 | HeaderedContentPage.axaml | `samples/ControlCatalog/Pages/HeaderedContentPage.axaml` | パターン2: GroupBox（16-18行目） |
| 2-3 | HeaderedContentPage.axaml | `samples/ControlCatalog/Pages/HeaderedContentPage.axaml` | パターン3: 画像コンテンツ（19-21行目） |
| 2-4 | HeaderedContentPage.axaml | `samples/ControlCatalog/Pages/HeaderedContentPage.axaml` | パターン4: 画像ヘッダー（22-27行目） |

**主要処理フロー**:
1. **8-15行目**: Header属性にテキスト、FontSize/FontWeight/BorderBrush等でスタイリング
2. **16-18行目**: GroupBoxは独自のデフォルトスタイルを持つHeaderedContentControl
3. **19-21行目**: Header属性にテキスト、Imageをコンテンツとして配置
4. **22-27行目**: HeaderedContentControl.Header要素構文でImageをヘッダーに設定

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

```
HeaderedContentPage (UserControl)
    │
    └─ WrapPanel (ItemWidth="400")
           │
           ├─ HeaderedContentControl (テキストヘッダー)
           │      ├─ Header: "This is the text header!"
           │      ├─ FontSize: 16
           │      ├─ FontWeight: Bold
           │      ├─ BorderBrush: Gray
           │      ├─ BorderThickness: 3
           │      ├─ CornerRadius: 3
           │      └─ Content: TextBlock "Some content"
           │
           ├─ GroupBox
           │      ├─ Header: "This is a GroupBox"
           │      └─ Content: TextBlock (説明文)
           │
           ├─ HeaderedContentControl (画像コンテンツ)
           │      ├─ Header: "This is the image header!"
           │      └─ Content: Image (delicate-arch)
           │
           └─ HeaderedContentControl (画像ヘッダー)
                  ├─ Header: Image (delicate-arch)
                  └─ Content: TextBlock (説明文)
```

### データフロー図

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

なし（静的表示）   ──────▶ HeaderedContentControl ──────▶ ヘッダー + コンテンツ表示
                                │
                                ├─ Header属性 ──────────▶ ヘッダー領域描画
                                │
                                └─ Content ─────────────▶ コンテンツ領域描画

Assets/delicate-arch*.jpg ─▶ Image.Source ─────────────▶ 画像描画
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| HeaderedContentPage.axaml | `samples/ControlCatalog/Pages/HeaderedContentPage.axaml` | XAML | UI定義、4つのバリエーション |
| HeaderedContentPage.axaml.cs | `samples/ControlCatalog/Pages/HeaderedContentPage.axaml.cs` | ソース | コードビハインド（最小限） |
| delicate-arch-896885_640.jpg | `samples/ControlCatalog/Assets/delicate-arch-896885_640.jpg` | 画像 | デモ用画像アセット |
| HeaderedContentControl.cs | `src/Avalonia.Controls/HeaderedContentControl.cs` | ソース | HeaderedContentControl基底クラス |
| GroupBox.cs | `src/Avalonia.Controls/GroupBox.cs` | ソース | GroupBox実装 |
