# 画面設計書 60-TransitioningContentControl

## 概要

本ドキュメントは、AvaloniaフレームワークのControlCatalogサンプルアプリケーションにおけるTransitioningContentControlデモページの画面設計書です。TransitioningContentControlコントロールのコンテンツ遷移アニメーション機能をデモンストレーションします。

### 本画面の処理概要

本画面は、Avaloniaフレームワークが提供するTransitioningContentControlコントロールの機能を実演するデモページです。TransitioningContentControlは、Contentが変更された際にページトランジション（アニメーション）を再生するコントロールで、画像ギャラリー、ウィザード、タブコンテンツなどのコンテンツ切り替えUIを視覚的に魅力的にします。

**業務上の目的・背景**：TransitioningContentControlは、コンテンツの切り替えを滑らかにアニメーションさせることで、ユーザーエクスペリエンスを向上させます。フォトギャラリー、オンボーディングフロー、ステップバイステップのウィザード、タブコンテンツなどで、コンテンツの変更を視覚的にわかりやすく示すことができます。本デモページは、開発者がCrossFade、PageSlide、CompositePageTransition、カスタムトランジションなどの各種トランジション効果を理解し、適切に実装するための参考資料として機能します。

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

**主要な操作・処理内容**：
1. 「<」ボタンで前の画像に切り替え（逆方向トランジション）
2. 「>」ボタンで次の画像に切り替え（順方向トランジション）
3. トランジション選択ComboBoxでトランジション種類を変更（None、CrossFade、Slide horizontally、Slide vertically、Composite、Custom）
4. Duration NumericUpDownでトランジション時間を調整（ミリ秒）
5. ClipToBounds ToggleSwitchでコンテンツのクリッピングを制御

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 69 | Transition | 主機能 | TransitioningContentControlのデモ。コンテンツ遷移アニメーション |
| 71 | CrossFade | 補助機能 | フェードイン・アウトトランジション |

## 画面種別

デモ / 機能確認

## URL/ルーティング

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

## 入出力項目

| 項目名 | 項目種別 | 入力/出力 | データ型 | 説明 |
|--------|----------|-----------|----------|------|
| SelectedTransition | ViewModel | 入出力 | PageTransition | 選択されたトランジション |
| Duration | ViewModel | 入出力 | int | トランジション時間（ミリ秒） |
| ClipToBounds | ViewModel | 入出力 | bool | コンテンツクリッピング |
| SelectedImage | ViewModel | 入出力 | Bitmap | 現在表示中の画像 |
| Reversed | ViewModel | 内部 | bool | トランジション方向 |

## 表示項目

| 表示項目 | 説明 |
|----------|------|
| ページ説明 | TransitioningContentControlの説明テキスト |
| トランジション選択ComboBox | None/CrossFade/Slide horizontally/Slide vertically/Composite/Custom |
| Duration NumericUpDown | トランジション時間設定（デフォルト500ms） |
| ClipToBounds ToggleSwitch | クリッピング有効/無効 |
| 「<」ボタン | 前の画像へ |
| 「>」ボタン | 次の画像へ |
| TransitioningContentControl | 画像表示領域（トランジションアニメーション付き） |
| ExperimentalAcrylicBorder | 設定パネルの背景（アクリル効果） |

## イベント仕様

### 1-NextImage

「>」ボタンクリックでNextImageコマンドが実行され、Reversed=false、SelectedImageが次の画像に更新されます。トランジションが順方向で再生されます。

### 2-PrevImage

「<」ボタンクリックでPrevImageコマンドが実行され、Reversed=true、SelectedImageが前の画像に更新されます。トランジションが逆方向で再生されます。

### 3-SelectedTransition変更

ComboBoxでトランジションを変更すると、TransitioningContentControl.PageTransitionが更新され、次回のコンテンツ変更時から新しいトランジションが適用されます。

### 4-Duration変更

NumericUpDownで時間を変更すると、SetupTransitions()が再実行され、すべてのトランジションの時間が更新されます。

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

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

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

## メッセージ仕様

本画面にはメッセージ表示機能は実装されていません。

## 例外処理

本画面はデモ用途のため、特別な例外処理は実装されていません。カスタムトランジションでビジュアルの親が異なる場合はArgumentExceptionがスローされます。

## 備考

- TransitioningContentControlはContentTemplateを使用して、コンテンツの表示方法をカスタマイズできます
- IsTransitionReversedプロパティで、トランジションの方向を制御できます
- CompositePageTransitionは複数のトランジションを組み合わせて実行します
- カスタムトランジションはIPageTransitionインターフェースを実装して作成できます

---

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

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

### 推奨読解順序

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

TransitioningContentControlPageはMVVMパターンを採用しており、ViewModelでトランジションと画像を管理しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | TransitioningContentControlPageViewModel.cs | `samples/ControlCatalog/ViewModels/TransitioningContentControlPageViewModel.cs` | PageTransitions、Images、SelectedImage、Duration、Reversedプロパティを確認 |
| 1-2 | PageTransition（内部クラス） | `samples/ControlCatalog/ViewModels/TransitioningContentControlPageViewModel.cs` | DisplayTitle、Transitionプロパティを確認 |
| 1-3 | CustomTransition（内部クラス） | `samples/ControlCatalog/ViewModels/TransitioningContentControlPageViewModel.cs` | IPageTransition実装を確認 |

**読解のコツ**: SetupTransitions()メソッドでトランジションの初期化と更新が行われます。Durationプロパティのsetterで再初期化されるパターンに注目してください。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | TransitioningContentControlPage.axaml | `samples/ControlCatalog/Pages/TransitioningContentControlPage.axaml` | TransitioningContentControlの設定とバインディングを確認 |
| 2-2 | TransitioningContentControlPage.axaml.cs | `samples/ControlCatalog/Pages/TransitioningContentControlPage.axaml.cs` | InitializeComponent()のみの最小実装 |

**主要処理フロー**:
1. **行12-14**: DataContextにViewModelを設定
2. **行17-38**: HeaderedContentControlのカスタムテンプレート（SharedSizeGroup使用）
3. **行49**: ページ説明TextBlock
4. **行51-67**: ExperimentalAcrylicBorderで設定パネルを囲む
5. **行57-58**: トランジション選択ComboBox
6. **行60-61**: Duration NumericUpDown
7. **行63-64**: ClipToBounds ToggleSwitch
8. **行69-70**: 「<」「>」ナビゲーションボタン
9. **行72-81**: TransitioningContentControl本体

#### Step 3: ViewModelのトランジションロジックを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | TransitioningContentControlPageViewModel.cs（SetupTransitions） | `samples/ControlCatalog/ViewModels/TransitioningContentControlPageViewModel.cs` | 6種類のトランジション初期化 |

**主要処理フロー**:
- **行22-27**: 3つの画像をImagesリストに読み込み
- **行35-38**: SelectedTransitionとSelectedImageの初期化
- **行108-134**: SetupTransitions()でトランジションを生成
  - **行123**: CrossFade
  - **行124**: PageSlide（水平）
  - **行125**: PageSlide（垂直）
  - **行127-131**: CompositePageTransition（3つを組み合わせ）
  - **行133**: CustomTransition
- **行136-160**: NextImage/PrevImageメソッド

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

```
MainView (HamburgerMenu)
    │
    └─ TransitioningContentControlPage (UserControl)
           │
           ├─ TransitioningContentControlPageViewModel
           │      │
           │      ├─ PageTransitions (List<PageTransition>)
           │      │      ├─ None (null)
           │      │      ├─ CrossFade
           │      │      ├─ PageSlide (Horizontal)
           │      │      ├─ PageSlide (Vertical)
           │      │      ├─ Composite
           │      │      └─ Custom
           │      │
           │      ├─ Images (List<Bitmap>)
           │      │      ├─ delicate-arch-896885_640.jpg
           │      │      ├─ hirsch-899118_640.jpg
           │      │      └─ maple-leaf-888807_640.jpg
           │      │
           │      ├─ SelectedImage
           │      ├─ SelectedTransition
           │      ├─ Duration
           │      ├─ ClipToBounds
           │      ├─ Reversed
           │      │
           │      ├─ NextImage() ───▶ Reversed=false, Index++
           │      └─ PrevImage() ───▶ Reversed=true, Index--
           │
           └─ XAML
                  ├─ ExperimentalAcrylicBorder (設定パネル)
                  │      ├─ ComboBox (トランジション選択)
                  │      ├─ NumericUpDown (Duration)
                  │      └─ ToggleSwitch (ClipToBounds)
                  │
                  ├─ Button "<" ───▶ PrevImage
                  ├─ Button ">" ───▶ NextImage
                  │
                  └─ TransitioningContentControl
                         ├─ Content ───▶ SelectedImage
                         ├─ PageTransition ───▶ SelectedTransition.Transition
                         ├─ IsTransitionReversed ───▶ Reversed
                         └─ ContentTemplate ───▶ Image
```

### データフロー図

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

「>」ボタン ───▶ NextImage() ───▶ Reversed=false
                     │              Index++
                     │              SelectedImage更新
                     │
                     └──▶ PropertyChanged ───▶ TransitioningContentControl.Content更新
                                   │
                                   └──▶ PageTransition.Start() ───▶ アニメーション再生

Duration変更 ───▶ SetupTransitions() ───▶ トランジション再生成
                        │
                        └──▶ 新しいTimeSpan適用

ComboBox選択 ───▶ SelectedTransition変更 ───▶ PageTransition更新
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| TransitioningContentControlPage.axaml | `samples/ControlCatalog/Pages/TransitioningContentControlPage.axaml` | ソース | ページのXAML定義 |
| TransitioningContentControlPage.axaml.cs | `samples/ControlCatalog/Pages/TransitioningContentControlPage.axaml.cs` | ソース | コードビハインド |
| TransitioningContentControlPageViewModel.cs | `samples/ControlCatalog/ViewModels/TransitioningContentControlPageViewModel.cs` | ソース | ViewModel、トランジション管理 |
| TransitioningContentControl.cs | `src/Avalonia.Controls/TransitioningContentControl.cs` | フレームワーク | TransitioningContentControl本体 |
| CrossFade.cs | `src/Avalonia.Base/Animation/CrossFade.cs` | フレームワーク | CrossFadeトランジション |
| PageSlide.cs | `src/Avalonia.Base/Animation/PageSlide.cs` | フレームワーク | PageSlideトランジション |
| CompositePageTransition.cs | `src/Avalonia.Base/Animation/CompositePageTransition.cs` | フレームワーク | 複合トランジション |
| MathSubtractConverter.cs | `samples/ControlCatalog/Converter/MathSubtractConverter.cs` | ソース | 高さ計算用コンバーター |
| delicate-arch-896885_640.jpg | `samples/ControlCatalog/Assets/` | リソース | 画像1 |
| hirsch-899118_640.jpg | `samples/ControlCatalog/Assets/` | リソース | 画像2 |
| maple-leaf-888807_640.jpg | `samples/ControlCatalog/Assets/` | リソース | 画像3 |
