# 画面設計書 47-RadioButton

## 概要

本ドキュメントは、Avalonia UIフレームワークのControlCatalogサンプルアプリケーションにおける「RadioButton」デモページの画面設計書です。

### 本画面の処理概要

RadioButtonページは、排他的選択コントロールであるRadioButtonの機能と使用方法をデモンストレーションする画面です。グループ内での単一選択、3状態モード、グループ名による明示的なグループ化など、様々な使用パターンを示しています。

**業務上の目的・背景**：設定画面やフォームにおいて、複数の選択肢から1つを選択させる場面は頻繁に発生します。RadioButtonコントロールは、同一グループ内で1つのオプションのみ選択可能な排他的選択UIを提供します。本画面は、基本的な使用方法、無効状態、3状態モード（True/False/Null）、および明示的なグループ名指定による複数グループの共存方法を示しています。

**画面へのアクセス方法**：MainWindowからMainViewのHamburgerMenuを開き、「RadioButton」メニュー項目を選択することでアクセスできます。

**主要な操作・処理内容**：
1. 基本的なRadioButtonの選択操作
2. 無効化されたRadioButtonの表示確認
3. 3状態モード（IsThreeState=True）での操作
4. グループ名（GroupName）による明示的なグループ分け

**画面遷移**：本画面は単独のデモページであり、MainViewのHamburgerMenuから遷移します。他画面への直接遷移機能は持ちません。

**権限による表示制御**：本デモ画面では権限による表示制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 13 | RadioButton | 主機能 | グループ内排他的選択コントロール |

## 画面種別

デモ / 選択コントロール

## URL/ルーティング

ControlCatalog内のHamburgerMenuナビゲーションによるページ切り替え（URL/ルーティング定義なし）

## 入出力項目

本画面のRadioButtonはすべて静的に定義されており、データバインディングによる入出力項目はありません。

| 項目名 | 項目種別 | データ型 | 必須 | 説明 |
|--------|----------|----------|------|------|
| IsChecked | 入出力 | bool? | - | 選択状態（True/False/Null） |

## 表示項目

| 項目名 | 表示位置 | 説明 |
|--------|----------|------|
| 説明テキスト | 上部 | "Allows the selection of a single option of many" |
| 基本グループ | 左列 | Option 1-3 と Disabled（暗黙的グループ） |
| 3状態グループ | 中左列 | IsThreeState=True の Option 1-3 と Disabled |
| Group A/B | 中右列・右列 | GroupNameによる明示的グループ |

## イベント仕様

### 1-IsChecked変更イベント

RadioButtonがクリックされると、IsCheckedプロパティがTrueに変更される。同一グループ内の他のRadioButtonは自動的にIsChecked=Falseに変更される（排他制御）。

### 2-3状態モード選択サイクル

IsThreeState=TrueのRadioButtonでは、クリックにより True → null → False → True のサイクルで状態が変化する。

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

本画面はUIコントロールのデモ画面であり、データベースへのアクセス・更新は行いません。

## メッセージ仕様

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

## 例外処理

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

## 備考

- アンダースコア（_）はアクセスキーのプレフィックス（例: "_Option 1" → Alt+O）
- 同一親コンテナ内のRadioButtonは自動的に同一グループとなる
- GroupNameプロパティで明示的にグループを指定可能（異なるコンテナ間でもグループ化可能）
- IsChecked="{x:Null}"でnull状態（不確定状態）を設定可能
- IsEnabled=Falseで無効化（クリック不可、グレー表示）

---

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

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

### 推奨読解順序

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

RadioButtonの主要プロパティを理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | RadioButtonPage.xaml | `samples/ControlCatalog/Pages/RadioButtonPage.xaml` | 基本グループ（13-17行）でIsChecked、IsEnabled確認 |
| 1-2 | RadioButtonPage.xaml | `samples/ControlCatalog/Pages/RadioButtonPage.xaml` | 3状態グループ（19-24行）でIsThreeState確認 |
| 1-3 | RadioButtonPage.xaml | `samples/ControlCatalog/Pages/RadioButtonPage.xaml` | GroupName指定（26-36行）で明示的グループ確認 |

**読解のコツ**: RadioButtonの暗黙的グループ（同一親コンテナ）と明示的グループ（GroupName）の違いを理解しておくと良い。

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

UserControlの初期化処理を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | RadioButtonPage.xaml.cs | `samples/ControlCatalog/Pages/RadioButtonPage.xaml.cs` | コンストラクタ（7-10行）でInitializeComponent |

**主要処理フロー**:
1. **8行**: InitializeComponentでXAMLをロード
2. 以降はXAML定義による静的コントロール

#### Step 3: レイアウト構造を理解する

StackPanelによる4列レイアウトを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | RadioButtonPage.xaml | `samples/ControlCatalog/Pages/RadioButtonPage.xaml` | 外側StackPanel（7-10行）Horizontal + Spacing |
| 3-2 | RadioButtonPage.xaml | `samples/ControlCatalog/Pages/RadioButtonPage.xaml` | 内側StackPanel（11-17行、18-24行、25-31行、32-37行）各列 |

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

```
RadioButtonPage (UserControl)
    │
    ├─ InitializeComponent()
    │      └─ XAMLパーサー → RadioButtonPage.xaml読み込み
    │
    └─ XAML 静的構造
           │
           ├─ StackPanel (Horizontal)
           │      │
           │      ├─ StackPanel (Vertical) - 基本グループ
           │      │      ├─ RadioButton "Option 1" (IsChecked=True)
           │      │      ├─ RadioButton "Option 2"
           │      │      ├─ RadioButton "Option 3" (IsChecked=Null)
           │      │      └─ RadioButton "Disabled" (IsEnabled=False)
           │      │
           │      ├─ StackPanel (Vertical) - 3状態グループ
           │      │      ├─ RadioButton (IsThreeState=True, IsChecked=True)
           │      │      ├─ RadioButton (IsThreeState=True, IsChecked=False)
           │      │      ├─ RadioButton (IsThreeState=True, IsChecked=Null)
           │      │      └─ RadioButton (IsThreeState=True, Disabled)
           │      │
           │      ├─ StackPanel (Vertical) - Group A/B
           │      │      ├─ RadioButton GroupName="A" (IsChecked=True)
           │      │      ├─ RadioButton GroupName="A" (Disabled)
           │      │      ├─ RadioButton GroupName="B"
           │      │      └─ RadioButton GroupName="B" (IsChecked=Null)
           │      │
           │      └─ StackPanel (Vertical) - Group A/B (続き)
           │             ├─ RadioButton GroupName="A" (IsChecked=True)
           │             ├─ RadioButton GroupName="B"
           │             └─ RadioButton GroupName="B" (IsChecked=Null)
           │
           └─ グループ化ロジック
                  ├─ 暗黙的グループ: 同一StackPanel内で排他
                  └─ 明示的グループ: GroupName="A" または "B"
```

### データフロー図

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

ユーザークリック ────────▶ RadioButton ─────────────▶ IsChecked更新
                          │                              │
                          ├─ 同一グループ検索             │
                          │   ├─ 暗黙的: 親コンテナ       ▼
                          │   └─ 明示的: GroupName    排他制御
                          │                          (他をFalseに)
                          │
                          └─ IsThreeState判定
                                 │
                                 ▼
                          True → null → False → True
                          (3状態サイクル)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| RadioButtonPage.xaml | `samples/ControlCatalog/Pages/RadioButtonPage.xaml` | XAML | 画面レイアウト・RadioButton定義 |
| RadioButtonPage.xaml.cs | `samples/ControlCatalog/Pages/RadioButtonPage.xaml.cs` | ソース | コードビハインド（InitializeComponentのみ） |
