# 画面設計書 40-Notifications

## 概要

本ドキュメントは、ControlCatalogサンプルアプリケーションのNotificationsページに関する画面設計書です。通知（Notification）機能の使用方法をデモンストレーションするページです。

### 本画面の処理概要

Notificationsページは、Avaloniaフレームワークにおける通知機能を確認するためのデモ画面です。WindowNotificationManagerを使用したトースト形式の通知表示、標準通知、カスタム通知、XAMLのみで定義された通知の各パターンを学習・検証できます。

**業務上の目的・背景**：ユーザーへのフィードバックや情報提供のために、通知機能は多くのアプリケーションで活用されています。成功メッセージ、警告、エラー通知など、ユーザーの操作に対するレスポンスを提供します。AvaloniaのWindowNotificationManagerは、ウィンドウ内に表示されるトースト形式の通知を簡単に実装できます。

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

**主要な操作・処理内容**：
1. Show Standard Managed Notification：標準的な通知を表示（Information型）
2. Show Custom Managed Notification：カスタム通知を表示（Warning型、Yes/Noボタン付き）
3. Show XAML only Notification：XAMLで定義された通知を表示（クリックハンドラ付き）

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 115 | Notifications | 主機能 | 通知のデモ。トースト通知とウィンドウ通知 |

## 画面種別

デモ/サンプル画面

## URL/ルーティング

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

## 入出力項目

| 項目名 | 入力/出力 | 型 | 説明 |
|--------|----------|------|------|
| ボタンクリック | 入力 | イベント | 通知を表示するトリガー |
| 通知クリック | 入力 | イベント | 通知がクリックされた際のコールバック |

## 表示項目

| 項目名 | 型 | 説明 |
|--------|------|------|
| TopLevel bound notification manager | TextBlock | セクションタイトル |
| Show Standard Managed Notification | Button | 標準通知表示ボタン |
| Show Custom Managed Notification | Button | カスタム通知表示ボタン |
| XAML only notification manager | TextBlock | セクションタイトル |
| Show XAML only Notification | Button | XAML定義通知表示ボタン |
| ControlNotifications | WindowNotificationManager | 通知表示領域（Border内） |

## イベント仕様

### 1-Show Standard Managed Notification

ShowManagedNotificationCommandが実行され、NotificationManagerのShowメソッドで標準のNotificationオブジェクトが表示されます。タイトル"Welcome"、メッセージ"Avalonia now supports Notifications."、タイプInformationで表示されます。

### 2-Show Custom Managed Notification

ShowCustomManagedNotificationCommandが実行され、NotificationViewModelオブジェクトがカスタム通知として表示されます。タイトル"Hey There!"、メッセージ"Did you know that Avalonia now supports Custom In-Window Notifications?"、タイプWarningで表示されます。

### 3-Show XAML only Notification

XAMLで定義されたNotificationオブジェクトがControlNotifications.Showコマンドで表示されます。OnClick="NotificationOnClick"が設定されており、通知がクリックされると"Notification clicked"という新しい通知が表示されます。

### 4-Yes/Noボタン（カスタム通知）

カスタム通知にはYesCommand、NoCommandが設定されており、クリックするとそれぞれの通知が表示されます。

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

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

## メッセージ仕様

| メッセージ | 種別 | 表示タイミング |
|-----------|------|--------------|
| Welcome | Information | 標準通知ボタンクリック時 |
| Avalonia now supports Notifications. | Information | 標準通知ボタンクリック時 |
| Hey There! | Warning | カスタム通知ボタンクリック時 |
| Did you know that Avalonia now supports Custom In-Window Notifications? | Warning | カスタム通知ボタンクリック時 |
| Title / Message | 通知 | XAML通知ボタンクリック時 |
| Notification clicked | 通知 | XAML通知クリック時 |

## 例外処理

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

## 備考

- WindowNotificationManager: ウィンドウに関連付けられた通知マネージャー
- NotificationType: Information、Success、Warning、Error
- TopLevel.GetTopLevel(this): 現在の要素が属するトップレベル（ウィンドウ）を取得
- OnAttachedToVisualTree: ビジュアルツリーにアタッチされた時点でNotificationManagerを初期化
- Notification.OnClick: 通知がクリックされた際のコールバック
- カスタム通知ではNotificationViewModelをそのまま表示データとして使用可能

---

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

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

### 推奨読解順序

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

ViewModelの構造とコマンドを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | NotificationViewModel.cs | `samples/ControlCatalog/ViewModels/NotificationViewModel.cs` | NotificationManager、各種コマンドを理解 |

**読解のコツ**: NotificationViewModelはTitle、Messageプロパティを持ち、カスタム通知の表示データとしても使用されます。NotificationManagerプロパティは外部から設定されます。

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

XAMLで通知関連のUI構造を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | NotificationsPage.xaml | `samples/ControlCatalog/Pages/NotificationsPage.xaml` | Button.Command、Notification要素、ControlNotificationsを理解 |

**主要処理フロー**:
- **行12**: Show Standard Managed NotificationボタンのCommand設定
- **行13**: Show Custom Managed NotificationボタンのCommand設定
- **行19-22**: XAML定義のNotificationオブジェクトをCommandParameterとして設定
- **行24-26**: ControlNotifications（WindowNotificationManager）の配置

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

NotificationManagerの初期化とクリックハンドラを理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | NotificationsPage.xaml.cs | `samples/ControlCatalog/Pages/NotificationsPage.xaml.cs` | OnAttachedToVisualTree、NotificationOnClickを理解 |

**主要処理フロー**:
1. **行16-18**: コンストラクタでViewModelを初期化、DataContextに設定
2. **行21-25**: OnAttachedToVisualTreeでWindowNotificationManagerを作成し、ViewModelに設定
3. **行28-31**: NotificationOnClickでControlNotificationsに"Notification clicked"を表示

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

```
NotificationsPage (UserControl)
    |
    +-- NotificationsPage.xaml.cs (Code-behind)
    |       |
    |       +-- InitializeComponent()
    |       +-- _viewModel = new NotificationViewModel()
    |       +-- DataContext = _viewModel
    |       |
    |       +-- OnAttachedToVisualTree()
    |       |       +-- new WindowNotificationManager(TopLevel)
    |       |       +-- _viewModel.NotificationManager = manager
    |       |
    |       +-- NotificationOnClick()
    |               +-- ControlNotifications.Show("Notification clicked")
    |
    +-- NotificationViewModel (ViewModel)
    |       |
    |       +-- NotificationManager: WindowNotificationManager
    |       |
    |       +-- ShowManagedNotificationCommand
    |       |       +-- NotificationManager.Show(new Notification(...))
    |       |
    |       +-- ShowCustomManagedNotificationCommand
    |       |       +-- NotificationManager.Show(NotificationViewModel, Warning)
    |       |
    |       +-- YesCommand / NoCommand
    |               +-- NotificationManager.Show(new Notification(...))
    |
    +-- ControlNotifications (WindowNotificationManager)
            +-- XAML定義のNotificationを表示
```

### データフロー図

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

Standard Button ──────> ShowManagedNotificationCommand ───> 標準通知表示
                              |                              (Information)
                              v
                        NotificationManager.Show(
                          new Notification("Welcome", ...))

Custom Button ────────> ShowCustomManagedNotificationCommand ─> カスタム通知表示
                              |                                  (Warning)
                              v
                        NotificationManager.Show(
                          NotificationViewModel, Warning)

XAML Button ──────────> ControlNotifications.Show ──────────> XAML通知表示
                              |
                              v
                        CommandParameter = Notification

通知クリック ─────────> NotificationOnClick() ──────────────> "Notification clicked"
                              |                               通知表示
                              v
                        ControlNotifications.Show(...)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| NotificationsPage.xaml | `samples/ControlCatalog/Pages/NotificationsPage.xaml` | XAML | UI定義 |
| NotificationsPage.xaml.cs | `samples/ControlCatalog/Pages/NotificationsPage.xaml.cs` | ソース | コードビハインド |
| NotificationViewModel.cs | `samples/ControlCatalog/ViewModels/NotificationViewModel.cs` | ソース | ViewModel、コマンド実装 |
