# 画面設計書 19-ComboBox

## 概要

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

### 本画面の処理概要

ComboBoxページはAvaloniaフレームワークのComboBoxコントロールの機能をデモンストレーションするための画面である。ドロップダウンリストによる選択、カスタムテンプレート、編集可能なComboBox、テキスト検索、WrapSelectionなど、ComboBoxの多様な機能を確認できる。

**業務上の目的・背景**：選択入力が必要なフォーム、設定画面、フィルター機能など、ドロップダウンリストを使用するアプリケーションを開発する開発者に対して、ComboBoxコントロールの各種オプションとカスタマイズ方法を示す。特に編集可能なComboBoxやカスタムテンプレートは高度なUI実装に必要な機能である。

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

**主要な操作・処理内容**：
1. インライン項目によるComboBoxの選択操作
2. ItemsSourceバインディングによるComboBoxの選択操作
3. カスタムコントロールを含むComboBox項目の選択
4. フォントファミリー選択ComboBoxの動作確認
5. 編集可能（IsEditable=True）なComboBoxでのテキスト入力
6. WrapSelectionの有効/無効切り替え
7. SelectionBoxItemTemplateによる選択表示のカスタマイズ

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 10 | ComboBox | 主機能 | ComboBoxコントロールのデモ。ドロップダウン選択 |

## 画面種別

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

## URL/ルーティング

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

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| WrapSelection | 入力 | bool | - | 選択のラップアラウンド有効化 |
| TextValue | 入出力 | string | - | 編集可能ComboBoxのテキスト値 |
| SelectedItem | 出力 | IdAndName | - | 選択されたアイテム |
| Values | 入力 | ObservableCollection<IdAndName> | - | ComboBoxの選択肢リスト |

## 表示項目

| 要素 | コントロール | 説明 |
|------|--------------|------|
| WrapSelection | CheckBox | WrapSelectionの有効/無効切り替え |
| インライン項目 | ComboBox | PlaceholderText="Pick an Item"、4項目 |
| Null対応 | ComboBox | null値を含むItemsSource、カスタムItemTemplate |
| コントロール項目 | ComboBox | Rectangle、Ellipse、TextBoxを項目として含む |
| フォント選択 | ComboBox (fontComboBox) | システムフォント一覧、フォント名をそのフォントで表示 |
| バリデーションエラー | ComboBox | DataValidationErrors.Error設定済み |
| スケール | ComboBox | RenderTransformで1.5倍にスケール |
| DisplayMemberBinding | ComboBox | Nameプロパティを表示、SearchTextでテキスト検索 |
| カスタムテンプレート | ComboBox | ItemTemplateとSelectionBoxItemTemplateが異なる |
| 標準テンプレート | ComboBox | ItemTemplateのみ（Name + Id表示） |
| 編集可能 | ComboBox | IsEditable=True、テキスト入力可能 |

## イベント仕様

### 1-初期化処理（コンストラクタ）

ページのコンストラクタで、フォントComboBoxの初期化とViewModelの設定を行う。

**処理フロー**:
1. InitializeComponent()でXAML要素を初期化
2. FontManager.Current.SystemFontsをfontComboBoxのItemsSourceに設定
3. ComboBoxPageViewModelをDataContextに設定

**関連コード** (ComboBoxPage.xaml.cs:9-14):
```csharp
public ComboBoxPage()
{
    InitializeComponent();
    fontComboBox.ItemsSource = FontManager.Current.SystemFonts;
    fontComboBox.SelectedIndex = 0;
    DataContext = new ComboBoxPageViewModel();
}
```

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

WrapSelectionチェックボックスの状態変更により、ViewModelのWrapSelectionプロパティが更新される。

**処理フロー**:
1. ユーザーがWrapSelectionチェックボックスをクリック
2. バインディングによりComboBoxPageViewModel.WrapSelectionが更新
3. 各ComboBoxのWrapSelectionプロパティが更新

### 3-編集可能ComboBox テキスト入力

IsEditable=TrueのComboBoxでテキストを入力すると、TextValueプロパティが更新される。

**処理フロー**:
1. ユーザーがテキストを入力
2. Text="{Binding TextValue}"によりViewModelのTextValueが更新
3. 画面下部のTextBlockに入力値が表示

### 4-編集可能ComboBox 選択

IsEditable=TrueのComboBoxで項目を選択すると、SelectedItemプロパティが更新される。

**処理フロー**:
1. ユーザーが項目を選択
2. SelectedItem="{Binding SelectedItem}"によりViewModelのSelectedItemが更新
3. 画面下部のTextBlockに選択項目のNameが表示

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

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

## メッセージ仕様

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

## 例外処理

- DataValidationErrors.Errorが設定されたComboBoxでは、Exceptionオブジェクトが設定されてバリデーションエラー表示をデモ

## 備考

- ViewModelはComboBoxPageViewModel
- IdAndNameクラスはId、Name、SearchTextプロパティを持つ
- フォントComboBoxのItemTemplateではFontFamilyバインディングでフォント名をそのフォントで表示
- SelectionBoxItemTemplateを使用すると選択時の表示をカスタマイズ可能（赤文字で表示）
- TextSearch.TextBindingでテキスト検索のキーを指定可能

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ComboBoxPageViewModel.cs | `samples/ControlCatalog/ViewModels/ComboBoxPageViewModel.cs` | ViewModelの構造とプロパティ |

**読解のコツ**:
- WrapSelection: bool - 選択のラップアラウンド
- TextValue: string - 編集可能ComboBoxのテキスト
- SelectedItem: IdAndName? - 選択されたアイテム
- Values: ObservableCollection<IdAndName> - 選択肢リスト

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-2 | ComboBoxPageViewModel.cs | `samples/ControlCatalog/ViewModels/ComboBoxPageViewModel.cs` | IdAndNameクラスの構造 |

**IdAndNameクラス**:
- Id: string? - ID値
- Name: string? - 表示名
- SearchText: string? - テキスト検索用キー

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ComboBoxPage.xaml.cs | `samples/ControlCatalog/Pages/ComboBoxPage.xaml.cs` | コンストラクタでの初期化 |

**主要処理フロー**:
1. **行11**: InitializeComponent()
2. **行12**: fontComboBox.ItemsSource = FontManager.Current.SystemFonts
3. **行13**: fontComboBox.SelectedIndex = 0
4. **行14**: DataContext = new ComboBoxPageViewModel()

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ComboBoxPage.xaml | `samples/ControlCatalog/Pages/ComboBoxPage.xaml` | 各ComboBoxの設定 |

**主要処理フロー**:
- **行9-10**: 説明テキスト
- **行16**: WrapSelectionチェックボックス
- **行17-26**: WrapPanel.Stylesで共通スタイル定義（Width=250, Margin=10）
- **行28-33**: インライン項目ComboBox
- **行35-51**: null対応ComboBox（カスタムItemTemplate）
- **行53-69**: コントロール項目ComboBox
- **行71-80**: フォント選択ComboBox
- **行82-90**: バリデーションエラーComboBox
- **行92-100**: スケールComboBox
- **行102-106**: DisplayMemberBinding使用ComboBox
- **行108-125**: SelectionBoxItemTemplate使用ComboBox
- **行127-136**: 標準ItemTemplate ComboBox
- **行138-148**: 編集可能ComboBox

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

```
ComboBoxPage
    │
    ├─ コンストラクタ
    │      ├─ InitializeComponent()
    │      ├─ fontComboBox.ItemsSource = SystemFonts
    │      └─ DataContext = ComboBoxPageViewModel
    │
    └─ DataBindings
           ├─ WrapSelection ⟷ CheckBox.IsChecked
           ├─ TextValue ⟷ ComboBox.Text（編集可能）
           ├─ SelectedItem ⟷ ComboBox.SelectedItem
           └─ Values → ComboBox.ItemsSource
```

### データフロー図

```
[ViewModel]                    [View]                          [出力]

WrapSelection ⟷ CheckBox.IsChecked ───▶ ComboBox.WrapSelection
                                              │
Values ───────────────────────────────▶ ComboBox.ItemsSource
                                              │
                                              ▼
                                        ComboBox表示
                                              │
                                              ▼
SelectedItem ◀──────────────────────── ComboBox.SelectedItem
TextValue ◀─────────────────────────── ComboBox.Text（編集可能）
                                              │
                                              ▼
                                        TextBlock表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ComboBoxPage.xaml | `samples/ControlCatalog/Pages/ComboBoxPage.xaml` | XAML | 画面レイアウト・ComboBox定義 |
| ComboBoxPage.xaml.cs | `samples/ControlCatalog/Pages/ComboBoxPage.xaml.cs` | ソース | コードビハインド・初期化処理 |
| ComboBoxPageViewModel.cs | `samples/ControlCatalog/ViewModels/ComboBoxPageViewModel.cs` | ソース | ViewModel・データバインディング用 |
| MainView.xaml | `samples/ControlCatalog/MainView.xaml` | XAML | ナビゲーション元のメインビュー |
