# 画面設計書 52-SplitView

## 概要

本ドキュメントは、AvaloniaフレームワークのControlCatalogサンプルアプリケーションにおけるSplitViewデモページの画面設計書です。SplitViewコントロールの各種表示モードと設定オプションを視覚的にデモンストレーションします。

### 本画面の処理概要

本画面は、Avaloniaフレームワークが提供するSplitViewコントロールの機能を実演するデモページです。SplitViewは、コンテンツ領域とペイン（サイドパネル）を持つ分割表示コントロールで、ナビゲーションメニューやマスター詳細レイアウトなどの実装に使用されます。

**業務上の目的・背景**：SplitViewコントロールは、モバイルおよびデスクトップアプリケーションで広く使用されるナビゲーションパターンを実装するための重要なコンポーネントです。ハンバーガーメニュー、サイドバーナビゲーション、プロパティパネルなど、多様なUI設計に対応できます。本デモページは、開発者がSplitViewの表示モード（Inline、CompactInline、Overlay、CompactOverlay）やペイン配置（Left、Right、Top、Bottom）の違いを理解し、適切に実装するための参考資料として機能します。

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

**主要な操作・処理内容**：
1. IsPaneOpenトグルボタンでペインの開閉を制御
2. UseLightDismissOverlayModeトグルボタンでオーバーレイ時のライトディスミス動作を有効化
3. Placementコンボボックスでペインの配置位置（Left/Right/Top/Bottom）を変更
4. DisplayModeコンボボックスで表示モード（Inline/CompactInline/Overlay/CompactOverlay）を切り替え
5. PaneBackgroundコンボボックスでペインの背景色を変更
6. OpenPaneLengthスライダーでペイン展開時の幅を調整（128〜500）
7. CompactPaneLengthスライダーでコンパクト時のペイン幅を調整（24〜128）

**画面遷移**：HamburgerMenuから他のデモページへ遷移可能。本ページからの特別な遷移先はありません。

**権限による表示制御**：本デモページでは権限による表示制御は実装されていません。すべての機能がすべてのユーザーに公開されます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 21 | ScrollViewer | 主機能 | SplitViewコントロールのデモ。分割表示パネル |

## 画面種別

デモ / 機能確認

## URL/ルーティング

ControlCatalogアプリケーション内のHamburgerMenuナビゲーションによるページ遷移（直接URLなし）

## 入出力項目

| 項目名 | 項目種別 | 入力/出力 | データ型 | 説明 |
|--------|----------|-----------|----------|------|
| IsPaneOpen | プロパティ | 入出力 | bool | ペインの開閉状態 |
| UseLightDismissOverlayMode | プロパティ | 入出力 | bool | ライトディスミスモードの有効化 |
| Placement | ViewModel | 入出力 | int | ペイン配置位置（0:Left, 1:Right, 2:Top, 3:Bottom） |
| DisplayMode | ViewModel | 入出力 | int | 表示モード（0:Inline, 1:CompactInline, 2:Overlay, 3:CompactOverlay） |
| PaneBackground | 選択 | 入力 | SolidColorBrush | ペインの背景色 |
| OpenPaneLength | プロパティ | 入出力 | double | ペイン展開時の幅（デフォルト256） |
| CompactPaneLength | プロパティ | 入出力 | double | コンパクト時のペイン幅（デフォルト48） |

## 表示項目

| 表示項目 | 説明 |
|----------|------|
| SplitView本体 | メインのデモ対象コントロール |
| ペインコンテンツ | "PANE CONTENT"ヘッダー、ComboBox、ListBoxItem（Peopleアイコン付き） |
| メインコンテンツ | "SplitViewContent"テキストが各コーナーに配置 |
| IsPaneOpenボタン | ペイン開閉トグル |
| UseLightDismissOverlayModeボタン | ライトディスミスモードトグル |
| Placementコンボボックス | Left/Right/Top/Bottom選択 |
| DisplayModeコンボボックス | Inline/CompactInline/Overlay/CompactOverlay選択 |
| PaneBackgroundコンボボックス | 背景色選択（CatalogChromeMediumColor/Red/Blue/Green） |
| OpenPaneLengthスライダー | 展開時ペイン幅（128〜500） |
| CompactPaneLengthスライダー | コンパクト時ペイン幅（24〜128） |

## イベント仕様

### 1-IsPaneOpenトグル

IsPaneOpenプロパティへの双方向バインディングにより、トグルボタンの状態変更がSplitViewのペイン開閉に反映されます。

### 2-DisplayMode変更

ViewModelのDisplayModeプロパティが変更されると、CurrentDisplayMode算出プロパティを通じてSplitViewのDisplayModeが更新されます。

### 3-Placement変更

ViewModelのPlacementプロパティが変更されると、PanePlacement算出プロパティを通じてSplitViewのPanePlacementが更新されます。

### 4-OpenPaneLength/CompactPaneLength変更

スライダーの値変更が直接SplitViewの対応するプロパティにバインドされ、リアルタイムでペインサイズが変更されます。

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

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

本画面はUIデモのため、データベース操作は発生しません。

## メッセージ仕様

本画面にはメッセージ表示機能は実装されていません。

## 例外処理

本画面はデモ用途のため、特別な例外処理は実装されていません。ViewModelでDisplayModeの範囲外の値が設定された場合は、デフォルトでCompactOverlayにフォールバックします。

## 備考

- SplitViewはUWP/WinUIのSplitViewコントロールと互換性のあるAPIを提供しています
- CompactOverlayモードでは、ペインが閉じていてもコンパクトな幅で表示され、アイコンのみのナビゲーションが可能です
- LightDismissモードを有効にすると、オーバーレイ表示時にペイン外をクリックすることでペインを閉じることができます

---

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

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

### 推奨読解順序

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

SplitViewPageはMVVMパターンを採用しており、ViewModelでペイン配置と表示モードを管理しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | SplitViewPageViewModel.cs | `samples/ControlCatalog/ViewModels/SplitViewPageViewModel.cs` | Placement、DisplayMode、PanePlacement、CurrentDisplayModeプロパティの定義と変換ロジックを理解 |

**読解のコツ**: ViewModelBase（MiniMvvm）を継承しており、RaiseAndSetIfChangedでプロパティ変更通知を実装しています。int型からEnum型への変換ロジックに注目してください。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | SplitViewPage.xaml | `samples/ControlCatalog/Pages/SplitViewPage.xaml` | SplitViewの各プロパティへのバインディングと設定UIの配置を確認 |
| 2-2 | SplitViewPage.xaml.cs | `samples/ControlCatalog/Pages/SplitViewPage.xaml.cs` | DataContextへのViewModel設定を確認 |

**主要処理フロー**:
1. **行10-11**: コードビハインドでSplitViewPageViewModelをDataContextに設定
2. **行15-17**: IsPaneOpenトグルボタン - SplitViewのIsPaneOpenプロパティへの双方向バインディング
3. **行23-28**: Placement ComboBox - ViewModelのPlacementプロパティへのバインディング
4. **行32-37**: DisplayMode ComboBox - ViewModelのDisplayModeプロパティへのバインディング
5. **行60-66**: SplitView本体 - PanePlacement、DisplayMode、OpenPaneLength、CompactPaneLengthのバインディング
6. **行67-96**: SplitView.Pane - ペインコンテンツの定義

#### Step 3: ViewModelのロジックを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | SplitViewPageViewModel.cs | `samples/ControlCatalog/ViewModels/SplitViewPageViewModel.cs` | int→Enum変換ロジック |

**主要処理フロー**:
- **行9**: _displayModeの初期値は3（CompactOverlay）
- **行10**: _placementの初期値は0（Left）
- **行32-40**: PanePlacement算出プロパティ - switch式でint→SplitViewPanePlacementに変換
- **行42-52**: CurrentDisplayMode算出プロパティ - Enum.IsDefinedで範囲チェック後に変換

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

```
MainView (HamburgerMenu)
    │
    └─ SplitViewPage (UserControl)
           │
           ├─ SplitViewPageViewModel
           │      ├─ Placement (int) ──▶ PanePlacement (Enum)
           │      └─ DisplayMode (int) ──▶ CurrentDisplayMode (Enum)
           │
           └─ SplitView
                  ├─ Pane (ペインコンテンツ)
                  │      ├─ TextBlock "PANE CONTENT"
                  │      ├─ ComboBox
                  │      └─ ListBoxItem (People)
                  │
                  └─ Content (メインコンテンツ)
                         └─ Grid (5つのTextBlock)
```

### データフロー図

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

Placementコンボ選択 ───▶ ViewModel.Placement ───▶ PanePlacement ───▶ SplitView.PanePlacement
                                │
                                └──▶ RaisePropertyChanged

DisplayModeコンボ選択 ───▶ ViewModel.DisplayMode ───▶ CurrentDisplayMode ───▶ SplitView.DisplayMode
                                │
                                └──▶ Enum.IsDefined チェック

OpenPaneLengthスライダー ───▶ ElementName=OpenPaneLengthSlider ───▶ SplitView.OpenPaneLength
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| SplitViewPage.xaml | `samples/ControlCatalog/Pages/SplitViewPage.xaml` | ソース | ページのXAML定義 |
| SplitViewPage.xaml.cs | `samples/ControlCatalog/Pages/SplitViewPage.xaml.cs` | ソース | コードビハインド |
| SplitViewPageViewModel.cs | `samples/ControlCatalog/ViewModels/SplitViewPageViewModel.cs` | ソース | ViewModel |
| SplitView.cs | `src/Avalonia.Controls/SplitView/SplitView.cs` | フレームワーク | SplitViewコントロール本体 |
| SplitViewDisplayMode.cs | `src/Avalonia.Controls/SplitView/SplitViewDisplayMode.cs` | フレームワーク | 表示モード列挙型 |
| SplitViewPanePlacement.cs | `src/Avalonia.Controls/SplitView/SplitViewPanePlacement.cs` | フレームワーク | ペイン配置列挙型 |
| ViewModelBase.cs | `samples/MiniMvvm/ViewModelBase.cs` | ライブラリ | MVVM基底クラス |
