# 画面設計書 97-ScrollBar

## 概要

本ドキュメントは、IntegrationTestAppアプリケーションにおけるScrollBarPageの画面設計書です。ScrollBarコントロールの基本機能をテストするためのページとして設計されています。

### 本画面の処理概要

**業務上の目的・背景**：本画面は、AvaloniaフレームワークにおけるScrollBarコントロールの統合テストを目的としています。スクロールバーの基本動作、Value設定、AllowAutoHide機能などを検証するためのテストUIを提供します。特に水平スクロールバーの動作確認に焦点を当てており、UIオートメーションテストやE2Eテストでのスクロールバー操作検証に使用されます。

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

**主要な操作・処理内容**：
1. スクロールバーのサムをドラッグしてValue値を変更
2. スクロールバーの増減ボタンをクリックしてValue値を変更
3. スクロールバーのトラック領域をクリックしてValue値を変更

**画面遷移**：この画面はIntegrationTestAppのメインウィンドウ内のページとして表示されます。他画面への遷移機能はありません。

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 21 | ScrollViewer | 主機能 | ScrollBarのテスト。スクロール値の操作、表示制御 |

## 画面種別

テスト・検証画面

## URL/ルーティング

デスクトップアプリケーションのため、URLルーティングはなし。MainWindowのListBoxナビゲーションから「ScrollBar」を選択。

## 入出力項目

| 項目名 | 入出力 | 型 | 必須 | 説明 |
|--------|--------|-----|------|------|
| MyScrollBar | 入力 | ScrollBar (double) | - | テスト対象のスクロールバー。Value値を操作可能 |

## 表示項目

| 項目名 | コントロール名 | 設定値 | 説明 |
|--------|--------------|--------|------|
| MyScrollBar | ScrollBar | Orientation="Horizontal", Width="200", Height="30", Value="20", AllowAutoHide="False" | 水平方向のスクロールバー |

## イベント仕様

本画面はコードビハインドにイベントハンドラを定義していません。ScrollBarの標準動作のみを使用します。

### ScrollBarの標準動作

**サムドラッグ**:
- ドラッグ: Value値がドラッグ位置に応じて変化

**増減ボタンクリック**:
- クリック: SmallChange値分だけValueが増減

**トラッククリック**:
- クリック: LargeChange値分だけValueが増減

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

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

本画面はUIコントロールのテスト用であり、データベース操作は行いません。

## メッセージ仕様

本画面ではシステムメッセージの表示はありません。

## 例外処理

本画面では例外処理は定義されていません。

## 備考

- Orientation="Horizontal"で水平スクロールバーを配置
- Width="200", Height="30"で固定サイズを設定
- Value="20"で初期値を設定
- AllowAutoHide="False"でスクロールバーを常時表示
- コードビハインドはInitializeComponent()のみで、追加のロジックなし

---

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

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

### 推奨読解順序

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

まず、ScrollBarコントロールの主要プロパティを理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ScrollBar.cs | `src/Avalonia.Controls/Primitives/ScrollBar.cs` | Value、Orientation、AllowAutoHideプロパティの定義 |
| 1-2 | RangeBase.cs | `src/Avalonia.Controls/Primitives/RangeBase.cs` | ScrollBarの基底クラス、Value/Minimum/Maximum |

**読解のコツ**: ScrollBarはRangeBaseを継承しており、Value、Minimum、Maximum、SmallChange、LargeChangeなどの範囲値プロパティを持ちます。

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

処理の起点となるページファイルを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ScrollBarPage.axaml | `samples/IntegrationTestApp/Pages/ScrollBarPage.axaml` | UI構造、ScrollBarの設定 |
| 2-2 | ScrollBarPage.axaml.cs | `samples/IntegrationTestApp/Pages/ScrollBarPage.axaml.cs` | コードビハインド（最小限） |

**主要処理フロー**:
1. **行7 (axaml)**: MyScrollBarの定義と各種プロパティ設定

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

```
ScrollBarPage
    │
    └─ コンストラクタ
           └─ InitializeComponent()
                  │
                  └─ MyScrollBar 生成
                         ├─ Orientation = Horizontal
                         ├─ AllowAutoHide = False
                         ├─ Width = 200
                         ├─ Height = 30
                         └─ Value = 20
```

### データフロー図

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

サムドラッグ       ───▶  Value更新               ───▶  スクロール位置変更
                        (ドラッグ位置に応じて)

増減ボタン        ───▶  Value += SmallChange    ───▶  スクロール位置変更
クリック

トラック          ───▶  Value += LargeChange    ───▶  スクロール位置変更
クリック
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ScrollBarPage.axaml | `samples/IntegrationTestApp/Pages/ScrollBarPage.axaml` | ソース | ページのUI定義 |
| ScrollBarPage.axaml.cs | `samples/IntegrationTestApp/Pages/ScrollBarPage.axaml.cs` | ソース | ページのコードビハインド（最小限） |
| MainWindow.axaml | `samples/IntegrationTestApp/MainWindow.axaml` | ソース | メインウィンドウとナビゲーション |
| MainWindow.axaml.cs | `samples/IntegrationTestApp/MainWindow.axaml.cs` | ソース | ページ生成ファクトリ（行93） |
