# 画面設計書 51-Slider

## 概要

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

### 本画面の処理概要

本画面は、Avaloniaフレームワークが提供するSlider（スライダー）コントロールの機能を実演するデモページです。ユーザーがThumb（つまみ）をドラッグしてTrack（トラック）上を移動させることで、指定された範囲内から値を選択できるコントロールの動作を確認できます。

**業務上の目的・背景**：Sliderコントロールは、音量調整、明るさ設定、ズームレベル、価格範囲フィルタなど、連続的な値の入力が必要なUI設計において不可欠な要素です。本デモページは、開発者がSliderコントロールの様々なプロパティ設定（目盛り表示、スナップ機能、方向反転、ツールチップ表示など）を理解し、適切に実装するための参考資料として機能します。

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

**主要な操作・処理内容**：
1. 水平スライダーのThumbをドラッグして0〜100の範囲で値を調整
2. カスタム目盛り付きスライダーでIsSnapToTickEnabledによる目盛り位置へのスナップ動作を確認
3. 方向反転スライダー（IsDirectionReversed）で逆方向の値増減を体験
4. ツールチップ付きスライダーでドラッグ中の現在値表示を確認
5. バリデーションエラー表示付きスライダーの視覚的フィードバックを確認
6. 垂直方向スライダー（Orientation="Vertical"）の操作

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 14 | Slider | 主機能 | Sliderコントロールのデモ。範囲指定と刻み幅設定 |

## 画面種別

デモ / 機能確認

## URL/ルーティング

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

## 入出力項目

| 項目名 | 項目種別 | 入力/出力 | データ型 | 説明 |
|--------|----------|-----------|----------|------|
| Value | プロパティ | 入出力 | double | スライダーの現在値（0〜100） |
| Minimum | プロパティ | 入力 | double | 最小値（0） |
| Maximum | プロパティ | 入力 | double | 最大値（100） |
| TickFrequency | プロパティ | 入力 | double | 目盛りの間隔（10） |
| IsSnapToTickEnabled | プロパティ | 入力 | bool | 目盛りへのスナップ有効化 |
| IsDirectionReversed | プロパティ | 入力 | bool | 方向反転の有効化 |
| Orientation | プロパティ | 入力 | Orientation | 水平/垂直方向の指定 |

## 表示項目

| 表示項目 | 説明 |
|----------|------|
| 説明テキスト | Sliderコントロールの概要説明 |
| 水平スライダー（基本） | TickFrequency=10の基本的なスライダー |
| カスタム目盛りスライダー | Ticks="0,20,25,40,75,100"のカスタム目盛り |
| 方向反転目盛りスライダー | IsDirectionReversed=True |
| ツールチップ付きスライダー | ドラッグ中にToolTipで現在値を表示 |
| エラー表示スライダー | DataValidationErrors.Errorによるエラー表示 |
| 方向反転スライダー | IsDirectionReversed=True（目盛りなし） |
| 垂直スライダー（左） | Orientation="Vertical"、TickPlacement="Outside" |
| 垂直スライダー（右） | Orientation="Vertical"、IsDirectionReversed=True |

## イベント仕様

### 1-ValueChanged

Thumbをドラッグすると、Valueプロパティが変更され、バインドされている値が更新されます。

### 2-ToolTip表示

SliderWithTooltipでは、Thumbにカスタムスタイルが適用され、ドラッグ中にToolTipで現在値が"Value {0:f}"形式で表示されます。

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

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

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

## メッセージ仕様

| メッセージ種別 | メッセージ内容 | 表示条件 |
|----------------|----------------|----------|
| ツールチップ | "Value {現在値:f}" | ツールチップ付きスライダーのドラッグ中 |

## 例外処理

本画面はデモ用途のため、特別な例外処理は実装されていません。DataValidationErrors.Errorの例外設定はUIデモ目的で固定的に設定されています。

## 備考

- Sliderコントロールは、RangeBaseクラスを継承しており、Value、Minimum、Maximum、SmallChange、LargeChangeなどのプロパティを持ちます
- TickPlacementプロパティにより、目盛りの表示位置をNone、TopLeft、BottomRight、Outsideから選択できます
- カスタムフォントやスタイルによるToolTip表示のカスタマイズが可能です

---

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

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

### 推奨読解順序

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

Sliderページはシンプルな構成で、特別なViewModelやデータモデルを使用していません。Sliderコントロールの組み込みプロパティのみを使用しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Slider.cs | `src/Avalonia.Controls/Slider.cs` | Sliderコントロールの基本プロパティ（Value、Minimum、Maximum、TickFrequency等）の定義を理解 |

**読解のコツ**: AvaloniaのSliderはWPFのSliderと互換性の高いAPIを持っています。RangeBaseクラスからの継承関係を確認すると、Value変更の仕組みが理解しやすくなります。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | SliderPage.xaml | `samples/ControlCatalog/Pages/SliderPage.xaml` | ページのXAML定義。各Sliderの設定と配置を確認 |
| 2-2 | SliderPage.xaml.cs | `samples/ControlCatalog/Pages/SliderPage.xaml.cs` | コードビハインド。InitializeComponent()のみの最小実装 |

**主要処理フロー**:
1. **行1-4**: UserControlの名前空間定義とクラス宣言
2. **行5-82**: StackPanelによるSliderコントロールのレイアウト
3. **行11-15**: 基本的な水平スライダーの定義
4. **行16-23**: カスタム目盛り付きスライダー（Ticks属性による不均等目盛り）
5. **行33-46**: ToolTip付きスライダー（Stylesによるカスタマイズ）
6. **行63-70**: 垂直スライダーの定義

#### Step 3: スタイルとテンプレートを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | Slider.xaml（Fluent） | `src/Avalonia.Themes.Fluent/Controls/Slider.xaml` | Fluentテーマでのスライダースタイル定義 |

**主要処理フロー**:
- **行38-45**: ToolTipのカスタムスタイル設定。$parent[Slider].Valueへのバインディングで現在値を表示

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

```
MainView (HamburgerMenu)
    │
    └─ SliderPage (UserControl)
           │
           ├─ Slider (基本)
           │      └─ Track / Thumb
           │
           ├─ Slider (カスタム目盛り)
           │      └─ TickBar
           │
           ├─ Slider (ToolTip付き)
           │      └─ Thumb
           │            └─ ToolTip
           │
           └─ Slider (垂直)
                  └─ Track / Thumb (90度回転)
```

### データフロー図

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

ユーザードラッグ ───▶ Thumb.OnPointerMoved ───▶ Value更新
                           │
                           └──▶ RangeBase.Value ───▶ ToolTip表示
                                      │
                                      └──▶ バインディング先更新
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| SliderPage.xaml | `samples/ControlCatalog/Pages/SliderPage.xaml` | ソース | ページのXAML定義 |
| SliderPage.xaml.cs | `samples/ControlCatalog/Pages/SliderPage.xaml.cs` | ソース | コードビハインド |
| Slider.cs | `src/Avalonia.Controls/Slider.cs` | フレームワーク | Sliderコントロール本体 |
| RangeBase.cs | `src/Avalonia.Controls/Primitives/RangeBase.cs` | フレームワーク | 基底クラス（Value、Min、Max管理） |
| Track.cs | `src/Avalonia.Controls/Primitives/Track.cs` | フレームワーク | トラック描画 |
| Thumb.cs | `src/Avalonia.Controls/Primitives/Thumb.cs` | フレームワーク | ドラッグ可能なつまみ |
