# 画面設計書 32-Flyouts

## 概要

本ドキュメントは、ControlCatalogサンプルアプリケーションのFlyoutsページに関する画面設計書です。Flyoutコントロールの各種機能と使用方法をデモンストレーションするページです。

### 本画面の処理概要

Flyoutは、ボタンやその他の要素に関連付けて表示される軽量なポップアップUIです。この画面では、Flyoutの基本的な使用方法、MenuFlyout、AttachedFlyout、共有Flyout、配置オプション、表示モードなど、様々なFlyout機能を学習・検証できます。

**業務上の目的・背景**：デスクトップアプリケーションにおいて、コンテキストに応じた追加情報やアクションを表示するためにFlyoutは頻繁に使用されます。メニュー、ツールバーボタンの詳細オプション、クイックアクションパネルなど、多くのUIパターンでFlyoutが活用されています。本画面は開発者がFlyoutの各種オプションと動作を確認し、適切な実装方法を学ぶために提供されています。

**画面へのアクセス方法**：ControlCatalogアプリケーションのMainViewから、HamburgerMenuナビゲーションを使用して「Flyouts」を選択することでアクセスできます。

**主要な操作・処理内容**：
1. ボタンクリックによるFlyoutの表示確認
2. MenuFlyoutを使用したメニュー表示
3. パネルのダブルクリックによるAttachedFlyoutの表示
4. 複数ボタンでの共有Flyoutの動作確認
5. 14種類の配置オプション（Placement）の確認
6. カスタム配置コールバックの動作確認
7. 3種類のShowMode（Standard/Transient/TransientWithDismissOnPointerMoveAway）の確認

**画面遷移**：
- 遷移元：MainView（HamburgerMenuによるナビゲーション）
- 遷移先：なし（デモページのため他画面への遷移機能はなし）

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 19 | ContextMenu | 主機能 | Flyoutのデモ。ポップアップUI表示 |

## 画面種別

デモ/サンプル画面

## URL/ルーティング

HamburgerMenuナビゲーション経由でアクセス（Avalonia UIフレームワークのページベースナビゲーション）

## 入出力項目

| 項目名 | 入力/出力 | 型 | 説明 |
|--------|----------|------|------|
| ボタンクリック | 入力 | イベント | Flyoutを表示するトリガー |
| ダブルタップ | 入力 | イベント | AttachedFlyoutを表示するトリガー |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| Button with a Flyout | セクション | 基本的なFlyout使用例 |
| MenuFlyout | セクション | メニュー形式のFlyout |
| Attached Flyouts | セクション | 要素に添付されたFlyout |
| Sharing Flyouts | セクション | 複数ボタンで共有するFlyout |
| Flyout Placements | セクション | 14種類の配置オプションデモ |
| Flyout ShowMode | セクション | 3種類の表示モードデモ |

## イベント仕様

### 1-ButtonのFlyout表示

ButtonにFlyoutプロパティが設定されている場合、ボタンクリック時に自動的にFlyoutが表示されます。

### 2-MenuFlyout表示

MenuFlyoutはFlyoutと同様にButtonに設定可能で、メニュー形式のポップアップを表示します。MenuItem要素でメニュー項目を定義できます。

### 3-AttachedFlyoutのダブルタップ表示

パネルにFlyoutBase.AttachedFlyoutが設定され、DoubleTappedイベントハンドラでFlyoutBase.ShowAttachedFlyout(panel)を呼び出すことでFlyoutが表示されます。

### 4-カスタム配置コールバック

Placement="Custom"が設定されたFlyoutでは、CustomPopupPlacementCallbackメソッドが呼び出され、Anchor、Gravity、Offsetをランダムに設定します。

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

本画面はデモ画面のため、データベース操作は行いません。

## メッセージ仕様

本画面には固有のメッセージ表示はありません。XAMLコード例がTextBlockに表示されます。

## 例外処理

本画面はデモ画面のため、特別な例外処理は実装されていません。

## 備考

- Flyoutの配置オプション（Placement）：Top, Bottom, Left, Right, Center, TopEdgeAlignedLeft, TopEdgeAlignedRight, BottomEdgeAlignedLeft, BottomEdgeAlignedRight, LeftEdgeAlignedTop, LeftEdgeAlignedBottom, RightEdgeAlignedTop, RightEdgeAlignedBottom, Custom
- ShowModeオプション：Standard（フォーカス取得）、Transient（フォーカスなし）、TransientWithDismissOnPointerMoveAway（フォーカスなし、ポインタ移動で閉じる）
- FlyoutPresenterThemeでFlyoutの見た目をカスタマイズ可能（例：CornerRadius設定）
- StaticResourceを使用してFlyoutをリソースとして定義し、複数のボタンで共有可能

---

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

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

### 推奨読解順序

#### Step 1: UI定義を理解する

FlyoutsPageはViewModelを持たないシンプルな構造で、主にXAMLでFlyoutの各種パターンを定義しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | FlyoutsPage.axaml | `samples/ControlCatalog/Pages/FlyoutsPage.axaml` | リソース定義、各種Flyoutパターン、Placement設定を理解 |

**読解のコツ**: UserControl.Resourcesセクションで共有リソースとして定義されたMenuFlyoutとFlyoutの構造を確認してください。各セクションが異なるFlyoutの使用パターンを示しています。

#### Step 2: コードビハインドを理解する

イベントハンドラとXAMLコード例の設定を行います。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | FlyoutsPage.axaml.cs | `samples/ControlCatalog/Pages/FlyoutsPage.axaml.cs` | DoubleTappedイベントハンドラ、カスタム配置コールバックを理解 |

**主要処理フロー**:
1. **行14**: InitializeComponent()でXAMLの読み込み
2. **行16**: AttachedFlyoutPanel.DoubleTapped += Afp_DoubleTapped でイベント登録
3. **行18**: SetXamlTexts()でサンプルコードテキストを設定
4. **行21-27**: Afp_DoubleTappedでFlyoutBase.ShowAttachedFlyout(p)を呼び出し
5. **行74-92**: CustomPlacementCallbackでランダムな配置を設定

#### Step 3: Flyoutリソース定義を理解する

XAMLのリソースセクションで定義された共有Flyoutを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | FlyoutsPage.axaml | `samples/ControlCatalog/Pages/FlyoutsPage.axaml` | 行8-28のUserControl.Resourcesセクション |

**主要処理フロー**:
- **行9-17**: SharedMenuFlyoutの定義（サブメニュー、InputGesture付き）
- **行18-27**: BasicFlyoutの定義（カスタムFlyoutPresenterTheme付き）

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

```
FlyoutsPage (UserControl)
    |
    +-- FlyoutsPage.axaml.cs (Code-behind)
    |       |
    |       +-- InitializeComponent()
    |       +-- AttachedFlyoutPanel.DoubleTapped += Afp_DoubleTapped
    |       +-- SetXamlTexts()
    |       |
    |       +-- Afp_DoubleTapped(sender, e)
    |       |       +-- FlyoutBase.ShowAttachedFlyout(panel)
    |       |
    |       +-- CustomPlacementCallback(placement)
    |               +-- Random anchor/gravity/offset設定
    |
    +-- Resources (XAML)
            +-- SharedMenuFlyout
            +-- BasicFlyout
```

### データフロー図

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

Button.Click ──────────> Flyout.Show() ──────────────> Flyout表示
                               |
                               v
                         Placement設定に基づく
                         位置計算

Panel.DoubleTapped ────> FlyoutBase.ShowAttachedFlyout() ──> AttachedFlyout表示

Placement="Custom" ────> CustomPlacementCallback() ────> ランダム位置でFlyout表示
                               |
                               v
                         Anchor, Gravity, Offset
                         のランダム設定
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| FlyoutsPage.axaml | `samples/ControlCatalog/Pages/FlyoutsPage.axaml` | XAML | UI定義、Flyoutリソース定義 |
| FlyoutsPage.axaml.cs | `samples/ControlCatalog/Pages/FlyoutsPage.axaml.cs` | ソース | コードビハインド、イベントハンドラ |
