# 画面設計書 106-RadioButton

## 概要

本ドキュメントは、IntegrationTestAppにおけるRadioButtonコントロールのテストページ（RadioButtonPage）の画面設計書です。

### 本画面の処理概要

本画面は、Avaloniaフレームワークのラジオボタンコントロール機能を統合テストするためのテストページです。基本的なラジオボタンの動作と、3状態（ThreeState）モードのラジオボタンをテストできます。

**業務上の目的・背景**：本画面は、Avaloniaフレームワークの品質保証のために存在します。RadioButtonコントロールは、排他的な選択肢を提供するUIコンポーネントとして広く使用されています。特に、3状態モード（True/False/null）のサポートは、「未選択」状態を明示的に表現する必要があるシナリオで重要です。これらの機能が正しく動作することを検証し、フレームワーク全体の信頼性を向上させます。

**画面へのアクセス方法**：IntegrationTestAppのメインウィンドウから、ListBoxナビゲーションで「RadioButton」項目を選択することでアクセスします。

**主要な操作・処理内容**：
1. BasicRadioButtonをクリックして選択状態を切り替え
2. ThreeStatesRadioButton1またはThreeStatesRadioButton2をクリックしてグループ内で排他的に選択
3. 3状態ラジオボタンでは、True→null→False→Trueの状態サイクルを確認

**画面遷移**：
- 遷移元：IntegrationTestApp MainWindow（ListBoxナビゲーション）
- 遷移先：なし（テストページ単体）

**権限による表示制御**：本画面は統合テスト用のため、権限による表示制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 13 | RadioButton | 主機能 | RadioButtonのテスト。排他的選択と3状態サポート |

## 画面種別

テスト画面

## URL/ルーティング

IntegrationTestApp内のUserControlとして読み込まれるため、URLルーティングはありません。
クラス名: `IntegrationTestApp.Pages.RadioButtonPage`

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| 選択状態 | 入力/出力 | bool? | - | ラジオボタンの選択状態（True/False/null） |

## 表示項目

| 項目名 | コントロール名 | 種別 | 説明 |
|--------|--------------|------|------|
| Basic RadioButton | BasicRadioButton | RadioButton | 基本的なラジオボタン（Content: "Sample RadioButton"） |
| Three States Option 1 | ThreeStatesRadioButton1 | RadioButton | 3状態ラジオボタン（初期状態: IsChecked=True） |
| Three States Option 2 | ThreeStatesRadioButton2 | RadioButton | 3状態ラジオボタン（初期状態: IsChecked=False） |

## イベント仕様

本画面のラジオボタンには明示的なClickイベントハンドラが設定されていません。UIオートメーションテストでの動作確認を目的としています。

### 1-RadioButton選択変更

ラジオボタンがクリックされた際のデフォルト動作。

**処理フロー**:
1. 同一グループ内の他のラジオボタンの選択を解除
2. クリックされたラジオボタンのIsCheckedをtrueに設定
3. 3状態モードの場合、true→null→false→trueの順で状態が変化

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

本画面はUIテスト用であり、データベースとの連携はありません。

## メッセージ仕様

本画面では明示的なメッセージ表示はありません。

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| 特記事項なし | 本画面では例外的な状況は発生しない設計 |

## 備考

- BasicRadioButtonは単独のラジオボタンで、グループ化されていません
- ThreeStatesRadioButton1とThreeStatesRadioButton2は同一のStackPanel内にあり、暗黙的にグループ化されています
- IsThreeState="True"が設定されたラジオボタンは、null状態（不確定状態）をサポートします
- ThreeStatesRadioButton1は初期状態でIsChecked="True"、ThreeStatesRadioButton2はIsChecked="False"に設定されています

---

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

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

### 推奨読解順序

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

RadioButtonコントロールの基本構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | RadioButton.cs | `src/Avalonia.Controls/RadioButton.cs` | RadioButtonコントロールの実装 |
| 1-2 | ToggleButton.cs | `src/Avalonia.Controls/Primitives/ToggleButton.cs` | RadioButtonの基底クラス |

**読解のコツ**: RadioButtonはToggleButtonを継承しています。IsThreeStateプロパティは基底クラスで定義されており、true/false/nullの3状態をサポートします。

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

処理の起点となるXAMLファイルとコードビハインドを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | RadioButtonPage.axaml | `samples/IntegrationTestApp/Pages/RadioButtonPage.axaml` | 画面レイアウトとラジオボタン定義 |
| 2-2 | RadioButtonPage.axaml.cs | `samples/IntegrationTestApp/Pages/RadioButtonPage.axaml.cs` | コードビハインド（初期化のみ） |

**主要処理フロー**:
1. **行7**: 外側のStackPanel（Orientation="Vertical"）
2. **行8**: BasicRadioButtonを配置
3. **行9-12**: 内側のStackPanelで3状態ラジオボタンをグループ化
4. **行10**: ThreeStatesRadioButton1（IsChecked=True, IsThreeState=True）
5. **行11**: ThreeStatesRadioButton2（IsChecked=False, IsThreeState=True）

#### Step 3: グループ化の仕組みを理解する

ラジオボタンのグループ化動作を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | RadioButton.cs | `src/Avalonia.Controls/RadioButton.cs` | グループ化ロジックの実装 |

**主要処理フロー**:
- 同一の論理親を持つRadioButtonは自動的にグループ化される
- GroupNameプロパティで明示的にグループを指定することも可能
- グループ内で1つのRadioButtonがチェックされると、他は自動的にアンチェックされる

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

```
RadioButtonPage (UserControl)
    │
    └─ StackPanel (Orientation="Vertical")
           │
           ├─ BasicRadioButton (単独)
           │      └─ クリック時: IsChecked = !IsChecked
           │
           └─ StackPanel (グループ化コンテナ)
                  │
                  ├─ ThreeStatesRadioButton1 (IsThreeState=True)
                  │      └─ クリック時: True → null → False → True
                  │
                  └─ ThreeStatesRadioButton2 (IsThreeState=True)
                         └─ クリック時: False → null → True → False

グループ動作:
  ThreeStatesRadioButton1 選択時 → ThreeStatesRadioButton2 自動アンチェック
  ThreeStatesRadioButton2 選択時 → ThreeStatesRadioButton1 自動アンチェック
```

### データフロー図

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

RadioButton Click ───▶ ToggleButton.OnClick() ───▶ IsChecked状態変更
                              │
                              ▼
                       グループ内排他処理
                              │
                              ▼
                       他のRadioButton.IsChecked = false

3状態モード:
True ───▶ null ───▶ False ───▶ True (サイクル)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| RadioButtonPage.axaml | `samples/IntegrationTestApp/Pages/RadioButtonPage.axaml` | ソース | 画面レイアウト定義（XAML） |
| RadioButtonPage.axaml.cs | `samples/IntegrationTestApp/Pages/RadioButtonPage.axaml.cs` | ソース | コードビハインド（初期化のみ） |
| MainWindow.axaml | `samples/IntegrationTestApp/MainWindow.axaml` | ソース | 親ウィンドウ（ナビゲーション） |
| RadioButton.cs | `src/Avalonia.Controls/RadioButton.cs` | ソース | RadioButtonコントロールの実装 |
| ToggleButton.cs | `src/Avalonia.Controls/Primitives/ToggleButton.cs` | ソース | RadioButtonの基底クラス |
