# 画面設計書 61-TreeView

## 概要

本ドキュメントは、Avalonia UIフレームワークのControlCatalogサンプルアプリケーションにおけるTreeViewデモページの画面設計書です。TreeViewコントロールの階層データ表示機能を実証するためのデモ画面を定義します。

### 本画面の処理概要

本画面は、TreeViewコントロールを使用して階層構造を持つデータを視覚的に表示・操作するデモページです。ユーザーは階層的なノードの展開・折りたたみ、アイテムの選択モード変更、動的なノードの追加・削除といった操作を体験できます。

**業務上の目的・背景**：
TreeViewコントロールは、ファイルシステム、組織構造、カテゴリ階層など、親子関係を持つデータを表示する際に広く使用される基本的なUIコンポーネントです。本デモページは、Avalonia UIにおけるTreeViewの実装方法、データバインディング、選択モードの設定方法を開発者に示すことを目的としています。

**画面へのアクセス方法**：
ControlCatalogアプリケーションのメインウィンドウから、HamburgerMenuナビゲーションを使用して「TreeView」項目を選択することでアクセスします。

**主要な操作・処理内容**：
1. 階層データの表示：親ノードと子ノードの階層関係を視覚的に表現
2. ノードの展開・折りたたみ：ユーザーがノードをクリックして子要素の表示/非表示を切り替え
3. アイテムの追加：「Add」ボタンで選択中のノードに新しい子ノードを追加
4. アイテムの削除：「Remove」ボタンで選択中のノードを削除
5. ランダム選択：「Select Random」ボタンでランダムなノードを自動選択
6. 選択モードの変更：ComboBoxから選択モード（Single/Multiple/Toggle/AlwaysSelected）を切り替え

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

**権限による表示制御**：
なし（デモアプリケーションのため権限管理は実装されていません）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 11 | TreeView | 主機能 | 階層データ表示、ノード展開・折りたたみ |

## 画面種別

デモ / 一覧

## URL/ルーティング

ControlCatalogアプリケーション内のHamburgerMenuナビゲーションで「TreeView」を選択

## 入出力項目

| 項目名 | 項目種別 | データ型 | 必須 | 説明 |
|--------|----------|----------|------|------|
| SelectionMode | 入力 | SelectionMode | - | 選択モードの設定（Single/Multiple/Toggle/AlwaysSelected） |
| Items | 出力 | ObservableCollection<Node> | - | 表示する階層データ |
| SelectedItems | 入出力 | ObservableCollection<Node> | - | 現在選択されているノード群 |

## 表示項目

| 項目名 | 表示形式 | データソース | 説明 |
|--------|----------|--------------|------|
| 説明テキスト | TextBlock | 静的テキスト | "Displays a hierachical tree of data." |
| TreeView | TreeView | Items | 階層データを表示するツリービュー |
| Addボタン | Button | - | 新しいノードを追加 |
| Removeボタン | Button | - | 選択ノードを削除 |
| Select Randomボタン | Button | - | ランダムなノードを選択 |
| 選択モードComboBox | ComboBox | 静的リスト | Single/Multiple/Toggle/AlwaysSelected |

## イベント仕様

### 1-Addボタン押下

選択されているノードの子として新しいノードを追加します。選択されているノードがない場合はルートノードに追加します。

- **トリガー**: Addボタンのクリック
- **処理内容**: AddItemCommandの実行
- **データ更新**: 選択ノードのChildrenコレクションに新しいNodeを追加

### 2-Removeボタン押下

選択されているノードを階層構造から削除します。

- **トリガー**: Removeボタンのクリック
- **処理内容**: RemoveItemCommandの実行
- **データ更新**: 該当ノードを親のChildrenコレクションから削除

### 3-Select Randomボタン押下

ランダムな深さのランダムなノードを自動選択します。

- **トリガー**: Select Randomボタンのクリック
- **処理内容**: SelectRandomItemCommandの実行
- **データ更新**: SelectedItemsをクリアし、ランダムに選択したノードを追加

### 4-選択モード変更

TreeViewの選択動作モードを変更します。

- **トリガー**: ComboBoxの選択変更
- **処理内容**: SelectionModeプロパティの更新
- **データ更新**: SelectedItemsをクリアし、新しいSelectionModeを適用

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

本画面はデータベースを使用しません。すべてのデータはインメモリで管理されます。

### 操作別データベース影響一覧

該当なし

## メッセージ仕様

本画面にはメッセージ表示機能はありません。

## 例外処理

| 例外ケース | 対応処理 |
|-----------|---------|
| ノード削除時に選択ノードがない | 何も削除されない（エラーなし） |
| 空の階層でランダム選択 | インデックスエラーの可能性あり（現状は10個の初期ノードが存在） |

## 備考

- 初期状態では10個のルートノードが存在し、各ノードは遅延読み込みで10個の子ノードを生成します
- ノードヘッダーは「Item」から始まり、深さに応じて「Item 0 1 2」のように番号が付加されます
- TreeDataTemplateを使用して階層構造をテンプレート化しています

---

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

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

### 推奨読解順序

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

まず、TreeViewで表示される階層データの構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | TreeViewPageViewModel.cs | `samples/ControlCatalog/ViewModels/TreeViewPageViewModel.cs` | Nodeクラスの構造（91-120行目）、親子関係の管理方法 |

**読解のコツ**: Nodeクラスはネストクラスとして定義されており、Children プロパティは遅延初期化（Lazy Initialization）パターンで実装されています。`_children ??= CreateChildren()` の部分に注目してください。

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

XAMLファイルがユーザーインターフェースのエントリーポイントとなります。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | TreeViewPage.xaml | `samples/ControlCatalog/Pages/TreeViewPage.xaml` | TreeViewの定義とデータバインディング |
| 2-2 | TreeViewPage.xaml.cs | `samples/ControlCatalog/Pages/TreeViewPage.xaml.cs` | DataContext設定、ViewModelとの接続 |

**主要処理フロー**:
1. **11行目（.cs）**: DataContextにTreeViewPageViewModelをセット
2. **14行目（.xaml）**: TreeViewのItemsSourceにViewModelのItemsをバインド
3. **16-18行目（.xaml）**: TreeDataTemplateで子ノードの再帰的表示を定義

#### Step 3: ビジネスロジックを理解する

ViewModelのコマンド実装を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | TreeViewPageViewModel.cs | `samples/ControlCatalog/ViewModels/TreeViewPageViewModel.cs` | コマンドの定義（21-23行目）と実装（42-89行目） |

**主要処理フロー**:
- **42-46行目**: AddItem - 選択ノードまたはルートへの子ノード追加
- **48-73行目**: RemoveItem - 再帰的なノード削除処理
- **75-89行目**: SelectRandomItem - ランダム深さでのノード選択

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

```
TreeViewPage (UserControl)
    │
    ├─ TreeViewPage.xaml.cs
    │      └─ コンストラクタ: DataContext = new TreeViewPageViewModel()
    │
    └─ TreeViewPageViewModel
           ├─ Items (ObservableCollection<Node>)
           │      └─ Node.Children (遅延読み込み)
           │
           ├─ AddItemCommand
           │      └─ AddItem()
           │             └─ Node.AddItem()
           │
           ├─ RemoveItemCommand
           │      └─ RemoveItem()
           │             └─ RecursiveRemove() [ローカル関数]
           │
           └─ SelectRandomItemCommand
                  └─ SelectRandomItem()
```

### データフロー図

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

ユーザー操作
  │
  ├─ ノード展開 ───────▶ TreeView.ItemsSource更新 ───▶ 子ノード表示
  │
  ├─ Addボタン ─────────▶ AddItemCommand ─────────────▶ Childrenに追加
  │                              │
  │                              └─▶ ObservableCollectionが通知
  │
  ├─ Removeボタン ──────▶ RemoveItemCommand ──────────▶ Childrenから削除
  │
  ├─ Select Random ─────▶ SelectRandomItemCommand ───▶ SelectedItems更新
  │
  └─ ComboBox変更 ──────▶ SelectionModeプロパティ ───▶ TreeView動作変更
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| TreeViewPage.xaml | `samples/ControlCatalog/Pages/TreeViewPage.xaml` | XAML | UI定義、TreeView配置 |
| TreeViewPage.xaml.cs | `samples/ControlCatalog/Pages/TreeViewPage.xaml.cs` | ソース | コードビハインド、初期化処理 |
| TreeViewPageViewModel.cs | `samples/ControlCatalog/ViewModels/TreeViewPageViewModel.cs` | ソース | ViewModel、データとコマンド管理 |
| ViewModelBase.cs | `samples/ControlCatalog/ViewModels/ViewModelBase.cs` | ソース | MVVMベースクラス |
| MiniMvvm | `samples/MiniMvvm/` | ライブラリ | 軽量MVVMフレームワーク |
