# 画面設計書 15-Carousel

## 概要

本ドキュメントは、ControlCatalogアプリケーションにおけるCarouselページ（Carouselコントロールのデモページ）の画面設計を記述したものである。

### 本画面の処理概要

CarouselページはAvaloniaフレームワークのCarouselコントロールの機能をデモンストレーションするための画面である。Carouselは複数のアイテムをページ単位で表示し、スライドやフェードなどのトランジション効果で切り替えることができるコントロールである。

**業務上の目的・背景**：画像ギャラリー、オンボーディング画面、プレゼンテーション風のUIなど、複数のコンテンツをページ送りで表示する必要があるアプリケーションを開発する開発者に対して、Carouselコントロールの使用方法とトランジション効果のカスタマイズ方法を示す。

**画面へのアクセス方法**：MainWindow起動後、左側のHamburgerMenuから「Carousel」を選択してアクセスする。

**主要な操作・処理内容**：
1. 左右ボタンによるページ切り替え（Previous/Next）
2. トランジション種類の選択（None、Slide、Crossfade、3D Rotation）
3. トランジション方向の選択（Horizontal、Vertical）
4. 3枚の画像のスライドショー表示

**画面遷移**：MainViewのHamburgerMenuから遷移してくる。本画面から他画面への直接遷移はない。

**権限による表示制御**：本画面はデモ用途であり、権限による表示制御は実装されていない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 30 | Carousel | 主機能 | Carouselコントロールのデモ。コンテンツのスライド切り替え |
| 69 | Transition | 補助機能 | ページスライドトランジションの適用 |

## 画面種別

デモ・サンプル画面（Carouselコントロールの機能展示）

## URL/ルーティング

ControlCatalogアプリケーション内のHamburgerMenuによるナビゲーション。URIベースのルーティングは使用していない。

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| transition | 入力 | int (SelectedIndex) | - | トランジション種類の選択（0-3） |
| orientation | 入力 | int (SelectedIndex) | - | トランジション方向の選択（0-1） |
| carousel.SelectedIndex | 出力 | int | - | 現在表示中のページインデックス |

## 表示項目

| 要素 | コントロール | 説明 |
|------|--------------|------|
| 左矢印ボタン | Button (left) | Carouselの前のページへ移動 |
| Carousel | Carousel (carousel) | 3枚の画像を表示するカルーセル |
| 右矢印ボタン | Button (right) | Carouselの次のページへ移動 |
| Transitionラベル | TextBlock | トランジション選択ラベル |
| トランジション選択 | ComboBox (transition) | None/Slide/Crossfade/3D Rotation |
| Orientationラベル | TextBlock | 方向選択ラベル |
| 方向選択 | ComboBox (orientation) | Horizontal/Vertical |

**表示画像**:
- `/Assets/delicate-arch-896885_640.jpg`
- `/Assets/hirsch-899118_640.jpg`
- `/Assets/maple-leaf-888807_640.jpg`

## イベント仕様

### 1-左矢印ボタンクリック

左矢印ボタンをクリックすると、Carouselが前のページに移動する。

**処理フロー**:
1. leftボタンのClickイベントが発火
2. carousel.Previous()が呼び出される
3. 現在のPageTransitionに従ってアニメーション実行
4. SelectedIndexが1減少（0の場合は最後のページへ）

**関連コード** (CarouselPage.xaml.cs:12):
```csharp
left.Click += (s, e) => carousel.Previous();
```

### 2-右矢印ボタンクリック

右矢印ボタンをクリックすると、Carouselが次のページに移動する。

**処理フロー**:
1. rightボタンのClickイベントが発火
2. carousel.Next()が呼び出される
3. 現在のPageTransitionに従ってアニメーション実行
4. SelectedIndexが1増加（最後の場合は最初のページへ）

**関連コード** (CarouselPage.xaml.cs:13):
```csharp
right.Click += (s, e) => carousel.Next();
```

### 3-トランジション/方向選択変更

トランジションまたは方向のComboBoxを変更すると、CarouselのPageTransitionプロパティが更新される。

**処理フロー**:
1. transitionまたはorientationのSelectionChangedイベントが発火
2. TransitionChanged()ハンドラが呼び出される
3. SelectedIndexに応じて適切なPageTransitionを生成
4. carousel.PageTransitionに設定

**関連コード** (CarouselPage.xaml.cs:18-35):
```csharp
private void TransitionChanged(object? sender, SelectionChangedEventArgs e)
{
    switch (transition.SelectedIndex)
    {
        case 0:
            carousel.PageTransition = null;
            break;
        case 1:
            carousel.PageTransition = new PageSlide(TimeSpan.FromSeconds(0.25),
                orientation.SelectedIndex == 0 ? PageSlide.SlideAxis.Horizontal : PageSlide.SlideAxis.Vertical);
            break;
        case 2:
            carousel.PageTransition = new CrossFade(TimeSpan.FromSeconds(0.25));
            break;
        case 3:
            carousel.PageTransition = new Rotate3DTransition(TimeSpan.FromSeconds(0.5),
                orientation.SelectedIndex == 0 ? PageSlide.SlideAxis.Horizontal : PageSlide.SlideAxis.Vertical);
            break;
    }
}
```

**トランジション種類**:
| Index | 種類 | クラス | Duration |
|-------|------|--------|----------|
| 0 | None | null | - |
| 1 | Slide | PageSlide | 0.25秒 |
| 2 | Crossfade | CrossFade | 0.25秒 |
| 3 | 3D Rotation | Rotate3DTransition | 0.5秒 |

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

本画面はUIデモ用途であり、データベース操作は行わない。

## メッセージ仕様

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

## 例外処理

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

## 備考

- XAMLでは初期状態でPageSlide（水平方向、0.25秒）が設定されている
- Rotate3DTransitionは他のトランジションより長い0.5秒のDurationを使用
- 矢印ボタンにはSVG風のPath.Dataでアイコンを描画

---

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

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

### 推奨読解順序

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | CarouselPage.xaml | `samples/ControlCatalog/Pages/CarouselPage.xaml` | Carouselに表示される画像リスト |

**読解のコツ**: Carouselの子要素として3つのImageが直接配置されている。ItemsSourceではなく直接子要素として定義。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | CarouselPage.xaml.cs | `samples/ControlCatalog/Pages/CarouselPage.xaml.cs` | コンストラクタでのイベント登録 |

**主要処理フロー**:
1. **行10-11**: InitializeComponent()で初期化
2. **行12**: left.Clickイベントにcarousel.Previous()をラムダ式で登録
3. **行13**: right.Clickイベントにcarousel.Next()をラムダ式で登録
4. **行14-15**: transition/orientationのSelectionChangedイベントにTransitionChanged登録

#### Step 3: イベントハンドラを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | CarouselPage.xaml.cs | `samples/ControlCatalog/Pages/CarouselPage.xaml.cs` | TransitionChangedメソッド |

**主要処理フロー**:
- **行18-35**: TransitionChangedイベントハンドラ
  - **行20-22**: case 0 - トランジションなし（null）
  - **行23-25**: case 1 - PageSlide（方向はorientationで決定）
  - **行26-28**: case 2 - CrossFade
  - **行29-32**: case 3 - Rotate3DTransition（方向はorientationで決定）

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

```
CarouselPage
    │
    ├─ InitializeComponent()
    │      └─ XAML解析・コントロール初期化
    │
    ├─ left.Click → carousel.Previous()
    │
    ├─ right.Click → carousel.Next()
    │
    └─ TransitionChanged()
           ├─ case 0: null
           ├─ case 1: new PageSlide(0.25s, Horizontal/Vertical)
           ├─ case 2: new CrossFade(0.25s)
           └─ case 3: new Rotate3DTransition(0.5s, Horizontal/Vertical)
```

### データフロー図

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

left.Click ───▶ carousel.Previous() ───▶ SelectedIndex--
                                                │
                                                └─▶ PageTransition実行

right.Click ───▶ carousel.Next() ───▶ SelectedIndex++
                                               │
                                               └─▶ PageTransition実行

ComboBox.SelectionChanged ───▶ TransitionChanged() ───▶ carousel.PageTransition
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| CarouselPage.xaml | `samples/ControlCatalog/Pages/CarouselPage.xaml` | XAML | 画面レイアウト・Carousel定義 |
| CarouselPage.xaml.cs | `samples/ControlCatalog/Pages/CarouselPage.xaml.cs` | ソース | コードビハインド・イベントハンドラ |
| delicate-arch-896885_640.jpg | `samples/ControlCatalog/Assets/` | 画像 | Carouselの1枚目の画像 |
| hirsch-899118_640.jpg | `samples/ControlCatalog/Assets/` | 画像 | Carouselの2枚目の画像 |
| maple-leaf-888807_640.jpg | `samples/ControlCatalog/Assets/` | 画像 | Carouselの3枚目の画像 |
| MainView.xaml | `samples/ControlCatalog/MainView.xaml` | XAML | ナビゲーション元のメインビュー |
