# 画面設計書 108-Slider

## 概要

本ドキュメントは、IntegrationTestAppにおけるスライダーコントロールのテストページ（SliderPage）の画面設計書です。

### 本画面の処理概要

本画面は、Avaloniaフレームワークのスライダーコントロール機能を統合テストするためのテストページです。水平スライダーの値変更とデータバインディングによる値表示をテストできます。

**業務上の目的・背景**：本画面は、Avaloniaフレームワークの品質保証のために存在します。Sliderコントロールは、数値の範囲選択やボリューム調整など、多くのアプリケーションで使用される重要なUIコンポーネントです。スライダーの値変更、データバインディングによるリアルタイム値表示、リセット機能などが正しく動作することを検証します。

**画面へのアクセス方法**：IntegrationTestAppのメインウィンドウから、ListBoxナビゲーションで「Slider」項目を選択することでアクセスします。

**主要な操作・処理内容**：
1. HorizontalSliderをドラッグして値を変更
2. テキストボックスでリアルタイムに値を確認
3. Resetボタンで初期値（50）に戻す

**画面遷移**：
- 遷移元：IntegrationTestApp MainWindow（ListBoxナビゲーション）
- 遷移先：なし（テストページ単体）

**権限による表示制御**：本画面は統合テスト用のため、権限による表示制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 14 | Slider | 主機能 | スライダーのテスト。範囲指定と値変更 |

## 画面種別

テスト画面

## URL/ルーティング

IntegrationTestApp内のUserControlとして読み込まれるため、URLルーティングはありません。
クラス名: `IntegrationTestApp.Pages.SliderPage`

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| スライダー値 | 入力/出力 | double | - | スライダーの現在値（初期値: 50） |

## 表示項目

| 項目名 | コントロール名 | 種別 | 説明 |
|--------|--------------|------|------|
| Horizontal Slider | HorizontalSlider | Slider | 水平スライダー（初期値: 50） |
| Slider Value | HorizontalSliderValue | TextBox | スライダー値の表示（OneWayバインディング） |
| Reset Button | ResetSliders | Button | スライダー値リセットボタン |

## イベント仕様

### 1-ResetSliders_Click

Resetボタンがクリックされた際に発火します。

**処理フロー**:
1. HorizontalSlider.Valueを50に設定
2. バインディングによりHorizontalSliderValueテキストボックスが自動更新

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

本画面はUIテスト用であり、データベースとの連携はありません。

## メッセージ仕様

本画面では明示的なメッセージ表示はありません。スライダー値がテキストボックスに表示されます。

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| 特記事項なし | 本画面では例外的な状況は発生しない設計 |

## 備考

- HorizontalSliderValueのバインディングはOneWay（スライダー→テキストボックス方向のみ）
- StringFormat=\{0:0\}により整数形式で表示
- DockPanelを使用してスライダーとテキストボックスを横並びに配置
- テキストボックスはDockPanel.Dock="Right"で右側に固定

---

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

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

### 推奨読解順序

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

Sliderコントロールの基本構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Slider.cs | `src/Avalonia.Controls/Slider.cs` | Sliderコントロールの実装 |
| 1-2 | RangeBase.cs | `src/Avalonia.Controls/Primitives/RangeBase.cs` | Sliderの基底クラス（Value, Minimum, Maximum） |

**読解のコツ**: SliderはRangeBaseを継承しており、Minimum/Maximum/Valueプロパティで範囲と値を制御します。デフォルトではMinimum=0、Maximum=100です。

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

処理の起点となるXAMLファイルとコードビハインドを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | SliderPage.axaml | `samples/IntegrationTestApp/Pages/SliderPage.axaml` | 画面レイアウトとバインディング |
| 2-2 | SliderPage.axaml.cs | `samples/IntegrationTestApp/Pages/SliderPage.axaml.cs` | イベントハンドラの実装 |

**主要処理フロー**:
1. **行7-14**: DockPanelでレイアウト
2. **行8-12**: 内側のDockPanelでスライダーとテキストボックスを配置
3. **行9-11**: HorizontalSliderValueテキストボックスでバインディング
4. **行13**: HorizontalSliderに初期値50を設定
5. **行15**: ResetSlidersボタンを配置

#### Step 3: バインディングを理解する

データバインディングの仕組みを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | SliderPage.axaml | `samples/IntegrationTestApp/Pages/SliderPage.axaml` | Bindingの設定 |

**主要処理フロー**:
- `Text="{Binding #HorizontalSlider.Value, Mode=OneWay, StringFormat=\{0:0\}}"`
- `#HorizontalSlider`: 名前参照バインディング
- `Mode=OneWay`: スライダー→テキストボックス方向のみ
- `StringFormat=\{0:0\}`: 整数形式で表示

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

```
SliderPage (UserControl)
    │
    └─ DockPanel
           │
           ├─ DockPanel (DockPanel.Dock="Top")
           │      │
           │      ├─ HorizontalSliderValue (TextBox)
           │      │      └─ Text ← OneWay Binding ← HorizontalSlider.Value
           │      │
           │      └─ HorizontalSlider (Slider)
           │             └─ Value = 50 (初期値)
           │
           └─ ResetSliders (Button)
                  └─ Click → ResetSliders_Click()
                         └─ HorizontalSlider.Value = 50
```

### データフロー図

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

Slider Drag ───▶ HorizontalSlider.Value ───▶ OneWay Binding
                                                   │
                                                   ▼
                                           StringFormat=\{0:0\}
                                                   │
                                                   ▼
                                           HorizontalSliderValue.Text

Reset Click ───▶ Value = 50 ───▶ バインディング更新 ───▶ Text更新
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| SliderPage.axaml | `samples/IntegrationTestApp/Pages/SliderPage.axaml` | ソース | 画面レイアウト定義（XAML） |
| SliderPage.axaml.cs | `samples/IntegrationTestApp/Pages/SliderPage.axaml.cs` | ソース | イベントハンドラ実装（コードビハインド） |
| MainWindow.axaml | `samples/IntegrationTestApp/MainWindow.axaml` | ソース | 親ウィンドウ（ナビゲーション） |
| Slider.cs | `src/Avalonia.Controls/Slider.cs` | ソース | Sliderコントロールの実装 |
| RangeBase.cs | `src/Avalonia.Controls/Primitives/RangeBase.cs` | ソース | Sliderの基底クラス |
