# 画面設計書 50-ScrollViewer

## 概要

本ドキュメントは、Avalonia UIフレームワークのControlCatalogサンプルアプリケーションにおける「ScrollViewer」デモページの画面設計書です。

### 本画面の処理概要

ScrollViewerページは、スクロール機能を提供するScrollViewerコントロールの様々な機能をデモンストレーションする画面です。基本的なスクロール機能から、スクロールバーの表示制御、慣性スクロール、スナップポイントなど、高度な機能を示しています。

**業務上の目的・背景**：大きなコンテンツをスクロールして閲覧する機能は、ほぼすべてのアプリケーションで必要とされます。ScrollViewerは、水平・垂直方向のスクロール、スクロールバーの表示/非表示制御、タッチ操作での慣性スクロール、コンテンツへのスナップなど、多彩なスクロール体験を提供します。本画面は、これらの機能の使用方法と設定オプションを示しています。

**画面へのアクセス方法**：MainWindowからMainViewのHamburgerMenuを開き、「ScrollViewer」メニュー項目を選択することでアクセスできます。

**主要な操作・処理内容**：
1. ScrollViewerタブ：基本的なスクロール設定の変更とデモ
2. Snappingタブ：スナップポイントによるスクロール位置制御のデモ
3. スクロールバー表示モード（Auto/Visible/Hidden/Disabled）の切り替え
4. 慣性スクロール（Inertia）の有効/無効切り替え
5. スクロールバー自動非表示の有効/無効切り替え
6. 遅延スクロール（Deferred Scrolling）の有効/無効切り替え
7. スナップポイントタイプとアライメントの設定

**画面遷移**：本画面は単独のデモページであり、MainViewのHamburgerMenuから遷移します。他画面への直接遷移機能は持ちません。

**権限による表示制御**：本デモ画面では権限による表示制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 21 | ScrollViewer | 主機能 | 水平・垂直スクロールコントロール |

## 画面種別

デモ / スクロール

## URL/ルーティング

ControlCatalog内のHamburgerMenuナビゲーションによるページ切り替え（URL/ルーティング定義なし）

## 入出力項目

| 項目名 | 項目種別 | データ型 | 必須 | 説明 |
|--------|----------|----------|------|------|
| AllowAutoHide | 入力 | bool | - | スクロールバー自動非表示 |
| EnableInertia | 入力 | bool | - | 慣性スクロール有効化 |
| IsDeferredScrollingEnabled | 入力 | bool | - | 遅延スクロール有効化 |
| HorizontalScrollVisibility | 入力 | ScrollBarVisibility | - | 水平スクロールバー表示モード |
| VerticalScrollVisibility | 入力 | ScrollBarVisibility | - | 垂直スクロールバー表示モード |
| SnapPointsType | 入力 | SnapPointsType | - | スナップポイントタイプ |
| SnapPointsAlignment | 入力 | SnapPointsAlignment | - | スナップポイントアライメント |
| AreSnapPointsRegular | 入力 | bool | - | 等間隔スナップポイント |

## 表示項目

| 項目名 | 表示位置 | 説明 |
|--------|----------|------|
| ScrollViewerタブ | タブ1 | 基本スクロール設定 |
| Snappingタブ | タブ2 | スナップポイント設定 |
| Allow auto hide トグル | ScrollViewerタブ左 | 自動非表示切り替え |
| Enable Inertia トグル | ScrollViewerタブ左 | 慣性スクロール切り替え |
| Enable Deferred Scrolling トグル | ScrollViewerタブ左 | 遅延スクロール切り替え |
| Horizontal Scroll コンボボックス | ScrollViewerタブ左 | 水平スクロールバー表示モード |
| Vertical Scroll コンボボックス | ScrollViewerタブ左 | 垂直スクロールバー表示モード |
| サンプルScrollViewer | ScrollViewerタブ右 | 800x800の画像を400x400で表示 |
| Snap Point Type コンボボックス | Snappingタブ上部 | None/Mandatory/MandatorySingle |
| Snap Point Alignment コンボボックス | Snappingタブ上部 | Near/Center/Far |
| Are Snap Points regular? トグル | Snappingタブ上部 | 等間隔スナップ |
| 垂直スナップScrollViewer | Snappingタブ中央 | 12個のChild要素 |
| 水平スナップScrollViewer | Snappingタブ下部 | 6個のChild要素 |

## イベント仕様

### 1-スクロールバー表示モード変更

HorizontalScrollVisibilityまたはVerticalScrollVisibilityが変更されると、ViewModelのプロパティが更新され、INotifyPropertyChangedを通じてScrollViewerにバインディング通知される。

### 2-スナップポイント設定変更

SnapPointsType、SnapPointsAlignment、AreSnapPointsRegularのいずれかが変更されると、対応するScrollViewerのスナップ動作が更新される。スナップはタッチ/ペン操作時に適用される。

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

本画面はUIコントロールのデモ画面であり、データベースへのアクセス・更新は行いません。

## メッセージ仕様

本画面では特定のメッセージ表示は実装されていません。

## 例外処理

本画面では特別な例外処理は実装されていません。

## 備考

- ScrollBarVisibilityの選択肢: Auto/Visible/Hidden/Disabled
- SnapPointsTypeの選択肢: None/Mandatory/MandatorySingle
- SnapPointsAlignmentの選択肢: Near/Center/Far
- IsDeferredScrollingEnabled: スクロールバードラッグ中はコンテンツを更新せず、リリース時に更新
- AreVerticalSnapPointsRegular/AreHorizontalSnapPointsRegular: StackPanelの添付プロパティ
- サンプル画像: `/Assets/delicate-arch-896885_640.jpg`

---

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

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

### 推奨読解順序

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

ViewModelのプロパティとデータ構造を理解することが重要です。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ScrollViewerPage.xaml.cs | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs` | ScrollViewerPageViewModel（8-93行）で全プロパティ確認 |
| 1-2 | ScrollViewerPage.xaml.cs | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs` | AvailableVisibility（20-27行）でScrollBarVisibilityリスト |
| 1-3 | ScrollViewerPage.xaml.cs | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs` | AvailableSnapPointsType/Alignment（28-40行）でスナップ設定 |

**読解のコツ**: ViewModelBaseとRaiseAndSetIfChangedパターン、List<enum>によるコンボボックス項目ソースの提供方法を理解しておくと良い。

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

UserControlの初期化処理を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ScrollViewerPage.xaml.cs | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs` | コンストラクタ（97-102行）でViewModel設定 |

**主要処理フロー**:
1. **99行**: InitializeComponentでXAMLをロード
2. **101行**: ScrollViewerPageViewModelをインスタンス化してDataContext設定

#### Step 3: ScrollViewerタブを理解する

基本的なスクロール設定のUIとバインディングを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ScrollViewerPage.xaml | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml` | ToggleSwitch群（16-22行）で各種設定 |
| 3-2 | ScrollViewerPage.xaml | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml` | ComboBox（27-35行）でVisibility選択 |
| 3-3 | ScrollViewerPage.xaml | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml` | ScrollViewer（39-50行）でバインディング適用 |

#### Step 4: Snappingタブを理解する

スナップポイント設定のUIと動作を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | ScrollViewerPage.xaml | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml` | スナップ設定UI（63-82行） |
| 4-2 | ScrollViewerPage.xaml | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml` | 垂直スナップScrollViewer（94-188行） |
| 4-3 | ScrollViewerPage.xaml | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml` | 水平スナップScrollViewer（200-266行） |

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

```
ScrollViewerPage (UserControl)
    │
    ├─ InitializeComponent()
    │      └─ XAMLパーサー → ScrollViewerPage.xaml読み込み
    │
    ├─ ScrollViewerPageViewModel
    │      ├─ AllowAutoHide (bool)
    │      ├─ EnableInertia (bool)
    │      ├─ HorizontalScrollVisibility (ScrollBarVisibility)
    │      ├─ VerticalScrollVisibility (ScrollBarVisibility)
    │      ├─ AvailableVisibility (List<ScrollBarVisibility>)
    │      ├─ SnapPointsType (SnapPointsType)
    │      ├─ SnapPointsAlignment (SnapPointsAlignment)
    │      ├─ AreSnapPointsRegular (bool)
    │      ├─ AvailableSnapPointsType (List<SnapPointsType>)
    │      └─ AvailableSnapPointsAlignment (List<SnapPointsAlignment>)
    │
    └─ TabControl
           │
           ├─ ScrollViewerタブ
           │      ├─ 設定UI (ToggleSwitch x 3, ComboBox x 2)
           │      └─ ScrollViewer (400x400)
           │             └─ Image (800x800)
           │
           └─ Snappingタブ
                  ├─ 設定UI (ComboBox x 2, ToggleSwitch x 1)
                  ├─ 垂直スナップScrollViewer
                  │      └─ StackPanel (Vertical)
                  │             └─ Border x 12
                  └─ 水平スナップScrollViewer
                         └─ StackPanel (Horizontal)
                                └─ Border x 6
```

### データフロー図

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

ToggleSwitch ───────────▶ ViewModel ─────────────────▶ ScrollViewer
(AllowAutoHide等)         ├─ RaiseAndSetIfChanged        プロパティ更新
                          └─ INotifyPropertyChanged

ComboBox ───────────────▶ ViewModel ─────────────────▶ ScrollViewer
(ScrollBarVisibility)     ├─ SelectedItem取得            表示モード更新
                          └─ プロパティ設定

ComboBox ───────────────▶ ViewModel ─────────────────▶ ScrollViewer
(SnapPointsType等)        ├─ SelectedItem取得            スナップ設定更新
                          └─ プロパティ設定                  │
                                                            ▼
                                                      タッチ/ペンスクロール時
                                                      スナップポイントで停止
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ScrollViewerPage.xaml | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml` | XAML | 画面レイアウト・ScrollViewer/スナップ定義 |
| ScrollViewerPage.xaml.cs | `samples/ControlCatalog/Pages/ScrollViewerPage.xaml.cs` | ソース | コードビハインド・ViewModel定義 |
| delicate-arch-896885_640.jpg | `samples/ControlCatalog/Assets/` | 画像 | サンプル表示画像 |
