# 画面設計書 36-Label

## 概要

本ドキュメントは、ControlCatalogサンプルアプリケーションのLabelページに関する画面設計書です。Labelコントロールの使用方法とフォーム入力パターンをデモンストレーションするページです。

### 本画面の処理概要

Labelページは、AvaloniaフレームワークにおけるLabelコントロールとフォーム入力の基本パターンを確認するためのデモ画面です。Labelとターゲット要素の関連付け、アクセスキー（Alt+キー）によるフォーカス移動、フォームのバインディングとコマンドを学習・検証できます。

**業務上の目的・背景**：フォーム入力は多くのアプリケーションで必要とされる基本機能です。Labelコントロールは、入力フィールドに対するラベル付けとアクセシビリティ向上のために使用されます。アクセスキー（アンダースコア付きの文字）により、キーボード操作でのフォーム入力を効率化できます。本画面は開発者がLabelとフォーム入力の基本パターンを理解するために提供されています。

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

**主要な操作・処理内容**：
1. FirstNameフィールドへの入力（Alt+Fでフォーカス移動）
2. LastNameフィールドへの入力（Alt+Lでフォーカス移動）
3. BannedチェックボックスのON/OFF（Alt+Bでフォーカス移動）
4. Cancelボタン：フォームをデフォルト値にリセット
5. Saveボタン：フォームデータの保存（デモでは処理なし）

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 8 | TextBlock | 主機能 | Labelコントロールのデモ。ラベルとターゲット要素の関連付け |

## 画面種別

デモ/サンプル画面（フォーム入力パターン）

## URL/ルーティング

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

## 入出力項目

| 項目名 | 入力/出力 | 型 | 説明 | バインディング |
|--------|----------|------|------|--------------|
| First name | 入力 | string | 名前入力 | Person.FirstName |
| Last name | 入力 | string | 苗字入力 | Person.LastName |
| Banned | 入力 | bool | 禁止フラグ | Person.IsBanned |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| _First name | Label | 名前入力フィールドのラベル（Alt+F） |
| firstNameEdit | TextBox | 名前入力フィールド |
| _Last name | Label | 苗字入力フィールドのラベル（Alt+L） |
| lastNameEdit | TextBox | 苗字入力フィールド |
| _Banned | Label | 禁止フラグのラベル（Alt+B） |
| bannedCheck | CheckBox | 禁止フラグのチェックボックス |
| GridSplitter | GridSplitter | ラベル列とフィールド列のサイズ調整 |
| Cancel | Button | キャンセルボタン（IsCancel=True） |
| Save | Button | 保存ボタン（IsDefault=True） |

## イベント仕様

### 1-Label Target

LabelのTargetプロパティにより、ラベルクリックまたはアクセスキー（Alt+アンダースコア付き文字）で対象コントロールにフォーカスが移動します。

### 2-Cancelボタン

IsCancel="True"が設定されており、Escapeキーまたはボタンクリックで_labelsPage.DoCancelコマンドが実行され、PersonモデルがデフォルトのJohn Doe、IsBanned=Trueにリセットされます。

### 3-Saveボタン

IsDefault="True"が設定されており、Enterキーまたはボタンクリックで_labelsPage.DoSaveコマンドが実行されます（現在は空の実装）。

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

本画面はデモ画面のため、データベース操作は行いません。Personモデルはメモリ上でのみ管理されます。

## メッセージ仕様

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

## 例外処理

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

## 備考

- Labelの_First nameの「_」はアクセスキーを示し、Alt+Fでフォーカス移動
- IsDefault=Trueのボタンは強調表示スタイルが適用される（HighlightBrush）
- GridSplitterでラベル列とフィールド列のサイズを動的に調整可能
- Personモデルは名前、苗字、禁止フラグを持つシンプルなデータクラス

---

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

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

### 推奨読解順序

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

Personモデルがフォームのデータ構造を定義しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Person.cs | `samples/ControlCatalog/Models/Person.cs` | FirstName、LastName、IsBannedプロパティを理解 |

**読解のコツ**: Personクラスはシンプルなデータモデルです。プロパティ変更通知の有無を確認してください。

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

XAMLでLabelとフォーム入力のパターンを定義しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | LabelsPage.axaml | `samples/ControlCatalog/Pages/LabelsPage.axaml` | Label Target、スタイル設定、バインディングを理解 |

**主要処理フロー**:
- **行10-26**: Label、TextBox、CheckBox、Buttonのスタイル定義
- **行30-31**: Label Target="firstNameEdit"とTextBox Name="firstNameEdit"の関連付け
- **行39-40**: CancelボタンとSaveボタンのコマンドバインディング

#### Step 3: コードビハインドを理解する

フォーム初期化とコマンド処理を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | LabelsPage.axaml.cs | `samples/ControlCatalog/Pages/LabelsPage.axaml.cs` | CreateDefaultPerson、DoSave、DoCancelを理解 |

**主要処理フロー**:
1. **行12-13**: コンストラクタでCreateDefaultPerson呼び出し
2. **行16-23**: CreateDefaultPersonでPersonオブジェクトを生成しDataContextに設定
3. **行25-28**: DoSaveメソッド（現在は空の実装）
4. **行29-32**: DoCancelメソッドでCreateDefaultPersonを呼び出しリセット

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

```
LabelsPage (UserControl)
    |
    +-- LabelsPage.axaml.cs (Code-behind)
    |       |
    |       +-- CreateDefaultPerson()
    |       |       +-- new Person { FirstName="John", LastName="Doe", IsBanned=true }
    |       |       +-- DataContext = _person
    |       |
    |       +-- DoSave() [空の実装]
    |       |
    |       +-- DoCancel()
    |               +-- CreateDefaultPerson() [リセット処理]
    |
    +-- Person (Model)
    |       +-- FirstName
    |       +-- LastName
    |       +-- IsBanned
    |
    +-- LabelsPage.axaml (UI定義)
            +-- Grid (2列レイアウト)
                    +-- Label (Target="firstNameEdit") -> TextBox (firstNameEdit)
                    +-- Label (Target="lastNameEdit") -> TextBox (lastNameEdit)
                    +-- Label (Target="bannedCheck") -> CheckBox (bannedCheck)
                    +-- GridSplitter
                    +-- Button (Cancel) -> DoCancel
                    +-- Button (Save) -> DoSave
```

### データフロー図

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

TextBox入力 ───────────> TwoWay Binding ───────────────> Person.FirstName/LastName
                              |
                              v
                        DataContext.Property更新

CheckBox変更 ──────────> TwoWay Binding ───────────────> Person.IsBanned
                              |
                              v
                        DataContext.Property更新

Cancelボタン ──────────> DoCancel() ────────────────────> 新規Personオブジェクト
                              |                          DataContextに設定
                              v
                        CreateDefaultPerson()
                              |
                              v
                        John Doe, IsBanned=true

Alt+F/L/B キー ────────> Label.Target ─────────────────> フォーカス移動
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| LabelsPage.axaml | `samples/ControlCatalog/Pages/LabelsPage.axaml` | XAML | UI定義、スタイル設定 |
| LabelsPage.axaml.cs | `samples/ControlCatalog/Pages/LabelsPage.axaml.cs` | ソース | コードビハインド、コマンド処理 |
| Person.cs | `samples/ControlCatalog/Models/Person.cs` | ソース | データモデル |
