# 画面設計書 16-CheckBox

## 概要

本ドキュメントは、ControlCatalogアプリケーションにおけるCheckBoxページ（CheckBoxコントロールのデモページ）の画面設計を記述したものである。

### 本画面の処理概要

CheckBoxページはAvaloniaフレームワークのCheckBoxコントロールの機能をデモンストレーションするための画面である。2状態（チェック/未チェック）および3状態（チェック/未チェック/不確定）のチェックボックスの動作を確認できる。

**業務上の目的・背景**：フォーム入力、設定画面、複数選択UIなど、オン/オフの選択が必要なアプリケーションを開発する開発者に対して、CheckBoxコントロールの基本的な使用方法と3状態チェックボックスの実装方法を示す。特に3状態チェックボックスは、部分選択や親子関係を持つ選択UIで重要な機能である。

**画面へのアクセス方法**：MainWindow起動後、左側のHamburgerMenuから「CheckBox」を選択してアクセスする。

**主要な操作・処理内容**：
1. 2状態CheckBoxのチェック/未チェック操作
2. 3状態CheckBox（IsThreeState=True）のチェック/未チェック/不確定の循環操作
3. 無効状態（IsEnabled=False）のCheckBox表示確認

**画面遷移**：MainViewのHamburgerMenuから遷移してくる。本画面から他画面への直接遷移はない。

**権限による表示制御**：本画面はデモ用途であり、権限による表示制御は実装されていない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 12 | CheckBox | 主機能 | CheckBoxコントロールのデモ。3状態サポート |

## 画面種別

デモ・サンプル画面（CheckBoxコントロールの機能展示）

## URL/ルーティング

ControlCatalogアプリケーション内のHamburgerMenuによるナビゲーション。URIベースのルーティングは使用していない。

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| IsChecked | 入出力 | bool? | - | チェック状態（true/false/null） |

## 表示項目

| グループ | コントロール | IsChecked | IsThreeState | IsEnabled | 説明 |
|----------|--------------|-----------|--------------|-----------|------|
| 2状態 | CheckBox | false | false | true | 未チェック状態 |
| 2状態 | CheckBox | true | false | true | チェック状態 |
| 2状態 | CheckBox | null | false | true | 不確定状態（2状態でも設定可能） |
| 2状態 | CheckBox | true | false | false | 無効状態 |
| 3状態 | CheckBox | false | true | true | 3状態：未チェック |
| 3状態 | CheckBox | true | true | true | 3状態：チェック |
| 3状態 | CheckBox | null | true | true | 3状態：不確定 |
| 3状態 | CheckBox | null | true | false | 3状態：無効 |

## イベント仕様

### 1-CheckBox クリック（2状態）

IsThreeState=FalseのCheckBoxをクリックすると、チェック/未チェックの2状態で切り替わる。

**処理フロー**:
1. ユーザーがCheckBoxをクリック
2. IsCheckedプロパティがトグルされる（true→false、false→true）
3. チェックマークの表示が更新される

### 2-CheckBox クリック（3状態）

IsThreeState=TrueのCheckBoxをクリックすると、チェック→不確定→未チェックの3状態で循環する。

**処理フロー**:
1. ユーザーがCheckBoxをクリック
2. IsCheckedプロパティが循環する
   - false → true
   - true → null（不確定）
   - null → false
3. チェックマーク/不確定マーク/空白の表示が更新される

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

本画面はUIデモ用途であり、データベース操作は行わない。

## メッセージ仕様

本画面では特定のメッセージ表示は実装されていない。

## 例外処理

- IsEnabled=FalseのCheckBoxはクリック操作を受け付けない

## 備考

- CheckBoxのContentにはテキスト（アンダースコアでアクセスキー指定可能、例：`_Unchecked`でAlt+Uでフォーカス）を指定
- IsChecked="{x:Null}"で不確定状態（Indeterminate）を設定可能
- 2状態モードでもIsCheckedにnullを設定すると不確定状態の外観になるが、クリックでnullには循環しない

---

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

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

### 推奨読解順序

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

本画面ではデータモデルは使用していない。CheckBoxの状態はコントロール自体が保持する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | CheckBoxPage.xaml | `samples/ControlCatalog/Pages/CheckBoxPage.xaml` | CheckBoxの各種プロパティ設定 |

**読解のコツ**: IsCheckedプロパティの値（true/false/null）とIsThreeStateプロパティの組み合わせに注目する。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CheckBoxPage.xaml.cs | `samples/ControlCatalog/Pages/CheckBoxPage.xaml.cs` | コードビハインド（InitializeComponent()のみ） |

**主要処理フロー**:
1. **行8-9**: コンストラクタでInitializeComponent()を呼び出すのみ
2. すべての動作はXAMLとAvaloniaフレームワークで処理される

#### Step 3: XAML構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | CheckBoxPage.xaml | `samples/ControlCatalog/Pages/CheckBoxPage.xaml` | レイアウトとCheckBox配置 |

**主要処理フロー**:
- **行4-5**: 説明テキスト表示
- **行7-10**: StackPanelによる水平レイアウト（Spacing=16）
- **行11-17**: 左側グループ（2状態CheckBox 4種類）
- **行18-25**: 右側グループ（3状態CheckBox 4種類）

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

```
CheckBoxPage
    │
    └─ InitializeComponent()
           └─ XAML解析・コントロール初期化
                  │
                  └─ CheckBox x 8
                         │
                         └─ 各CheckBoxの状態管理はAvaloniaフレームワークが処理
```

### データフロー図

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

CheckBox.Click ───▶ IsChecked トグル ───▶ VisualState更新
                          │
                          ├─ IsThreeState=false: true⇔false
                          │
                          └─ IsThreeState=true: false→true→null→false（循環）
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CheckBoxPage.xaml | `samples/ControlCatalog/Pages/CheckBoxPage.xaml` | XAML | 画面レイアウト・CheckBox定義 |
| CheckBoxPage.xaml.cs | `samples/ControlCatalog/Pages/CheckBoxPage.xaml.cs` | ソース | コードビハインド（初期化のみ） |
| MainView.xaml | `samples/ControlCatalog/MainView.xaml` | XAML | ナビゲーション元のメインビュー |
