# 画面設計書 31-Expander

## 概要

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

### 本画面の処理概要

Expanderコントロールは、ユーザーがコンテンツの表示・非表示を切り替えることができる折りたたみ可能なコンテナです。この画面では、Expanderコントロールの様々な展開方向、状態制御、カスタマイズオプションを学習・検証できます。

**業務上の目的・背景**：デスクトップアプリケーションやモバイルアプリケーションにおいて、画面スペースを効率的に活用するためにコンテンツの折りたたみ機能は不可欠です。Expanderコントロールは、詳細情報の表示/非表示、設定パネルの展開/収縮、FAQセクションなど多様な場面で使用されます。本画面は開発者がExpanderの動作を確認し、適切な実装方法を学ぶために提供されています。

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

**主要な操作・処理内容**：
1. 各方向（Up/Down/Left/Right）へのExpander展開・収縮の確認
2. ヘッダー内にコントロール（Button）を配置したExpanderの動作確認
3. 無効化されたExpanderの表示確認
4. Roundedチェックボックスによる角丸設定の切り替え
5. 展開・収縮をキャンセルする機能の確認

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 22 | Expander | 主機能 | Expanderコントロールのデモ。折りたたみ可能なコンテンツの表示 |

## 画面種別

デモ/サンプル画面

## URL/ルーティング

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

## 入出力項目

| 項目名 | 入力/出力 | 型 | 説明 |
|--------|----------|------|------|
| Rounded | 入力 | bool | Expanderの角丸設定（CheckBox） |
| CornerRadius | 出力 | CornerRadius | 角丸の半径値（25または未設定） |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| ヘッダーテキスト | TextBlock | "Expands to show nested content" |
| Expand Up | Expander | 上方向に展開するExpander |
| Expand Down | Expander | 下方向に展開するExpander |
| Expand Left | Expander | 左方向に展開するExpander |
| Expand Right | Expander | 右方向に展開するExpander |
| Control in Header | Expander | ヘッダーにButtonを持つExpander |
| Disabled | Expander | 無効化されたExpander |
| Rounded | CheckBox | 角丸設定のチェックボックス |
| Collapsing Disabled | Expander | 収縮がキャンセルされるExpander |
| Expanding Disabled | Expander | 展開がキャンセルされるExpander |

## イベント仕様

### 1-Expanderの展開/収縮

各Expanderのヘッダーをクリックすると、IsExpandedプロパティが切り替わり、コンテンツが表示/非表示になります。ExpandDirectionプロパティにより、展開方向が決定されます。

### 2-Roundedチェックボックス変更

CheckBoxのIsCheckedが変更されると、ViewModelのRoundedプロパティが更新され、それに連動してCornerRadiusプロパティが変更されます。Roundedがtrueの場合はCornerRadius(25)、falseの場合は未設定値となります。

### 3-Collapsing/Expandingイベントキャンセル

CollapsingDisabledExpanderのCollapsingイベントおよびExpandingDisabledExpanderのExpandingイベントにハンドラが登録されており、e.Cancel = trueを設定することで展開/収縮がキャンセルされます。

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- ExpandDirectionには Up, Down, Left, Right の4つの方向があります
- ExpanderのHeaderプロパティには任意のコントロールを配置可能です
- CollapsingおよびExpandingイベントを使用することで、展開/収縮をプログラム的に制御できます
- CornerRadiusプロパティにより、Expanderの角丸を制御できます

---

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

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

### 推奨読解順序

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

まず、ViewModelのデータ構造を理解することが重要です。ExpanderPageViewModelは角丸設定に関するプロパティを管理します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ExpanderPageViewModel.cs | `samples/ControlCatalog/ViewModels/ExpanderPageViewModel.cs` | CornerRadiusとRoundedプロパティの関係性を理解する |

**読解のコツ**: MiniMvvmフレームワークのViewModelBaseを継承しており、RaiseAndSetIfChangedでプロパティ変更通知を実装しています。AvaloniaProperty.UnsetValueはプロパティが未設定状態であることを示します。

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

XAMLファイルがUIの定義を行い、コードビハインドで初期化とイベントハンドラを設定します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ExpanderPage.xaml.cs | `samples/ControlCatalog/Pages/ExpanderPage.xaml.cs` | コンストラクタでViewModelの設定とイベントハンドラの登録を確認 |

**主要処理フロー**:
1. **行9**: InitializeComponent()でXAMLの読み込み
2. **行10**: DataContextにExpanderPageViewModelを設定
3. **行12-13**: CollapsingイベントとExpandingイベントにキャンセル処理を登録

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

XAMLファイルでExpanderコントロールの各種設定を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ExpanderPage.xaml | `samples/ControlCatalog/Pages/ExpanderPage.xaml` | 各Expanderのプロパティ設定とバインディングを確認 |

**主要処理フロー**:
- **行13-18**: ExpandDirection="Up"のExpander定義
- **行19-24**: ExpandDirection="Down"のExpander定義
- **行37-45**: ヘッダーにButtonを配置したExpander
- **行54**: RoundedプロパティへのバインディングされたCheckBox
- **行55-63**: Collapsingがキャンセルされるようにx:Nameが設定されたExpander

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

```
ExpanderPage (UserControl)
    |
    +-- ExpanderPage.xaml.cs (Code-behind)
    |       |
    |       +-- InitializeComponent()
    |       +-- DataContext = new ExpanderPageViewModel()
    |       +-- CollapsingDisabledExpander.Collapsing += handler
    |       +-- ExpandingDisabledExpander.Expanding += handler
    |
    +-- ExpanderPageViewModel (ViewModel)
            |
            +-- Rounded (bool) <-- CheckBox.IsChecked
            +-- CornerRadius (object) --> Expander.CornerRadius
```

### データフロー図

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

CheckBox.IsChecked ───> ViewModel.Rounded ───> ViewModel.CornerRadius
                              |                         |
                              v                         v
                        Rounded=true?              Expander.CornerRadius
                              |                    (25 or UnsetValue)
                        CornerRadius(25)
                              or
                        UnsetValue

Expander.Header Click ───> IsExpanded Toggle ───> Content Visibility
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ExpanderPage.xaml | `samples/ControlCatalog/Pages/ExpanderPage.xaml` | XAML | UI定義 |
| ExpanderPage.xaml.cs | `samples/ControlCatalog/Pages/ExpanderPage.xaml.cs` | ソース | コードビハインド、イベント処理 |
| ExpanderPageViewModel.cs | `samples/ControlCatalog/ViewModels/ExpanderPageViewModel.cs` | ソース | ViewModel、状態管理 |
| ViewModelBase.cs | `samples/MiniMvvm/ViewModelBase.cs` | ソース | MVVMベースクラス |
