# 画面設計書 25-DataGrid

## 概要

本ドキュメントは、Avalonia ControlCatalogサンプルアプリケーションにおけるDataGridデモページの画面設計を定義するものです。

### 本画面の処理概要

本画面は、DataGridコントロールのデモページですが、現在はDataGridが別リポジトリに移動したことを案内するページとなっています。外部リポジトリへのリンクを提供し、ユーザーを適切なリソースに誘導します。

**業務上の目的・背景**：DataGridは、表形式でデータを表示・編集するための高機能なコントロールです。Avaloniaの本体リポジトリからは分離され、`Avalonia.Controls.DataGrid`という独立したNuGetパッケージとして提供されるようになりました。この画面は、DataGridの機能を求めるユーザーに対して、正しいリソースの場所を案内するナビゲーション目的のページです。

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

**主要な操作・処理内容**：
1. DataGridが別リポジトリに移動した旨のメッセージ表示
2. 外部GitHubリポジトリへのハイパーリンク提供
3. リンククリックでブラウザを起動し、外部サイトへ遷移

**画面遷移**：MainViewからHamburgerMenuナビゲーションを通じて遷移。リンククリックで外部ブラウザへ遷移。

**権限による表示制御**：特になし（サンプルアプリケーション）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 9 | ListBox | 主機能 | DataGridコントロールのデモ。表形式データ表示 |
| 21 | ScrollViewer | 補助機能 | 大量データのスクロール表示 |

## 画面種別

案内 / リダイレクト

## URL/ルーティング

HamburgerMenu内部ナビゲーション（直接URLルーティングなし）

## 入出力項目

本画面には入力項目はありません。

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| 案内メッセージ | TextBlock | 「DataGrid has moved to its own repository!」 |
| リンク | HyperlinkButton | https://github.com/AvaloniaUI/Avalonia.Controls.DataGrid |

## イベント仕様

### 1-HyperlinkButtonクリック

OnLinkClickedハンドラが呼び出され、Process.Startで外部ブラウザを起動してGitHubリポジトリURLを開く。UseShellExecute=trueにより、OSのデフォルトブラウザで開かれる。

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

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

本画面はUIコントロールのデモであり、データベース操作は行いません。

## メッセージ仕様

| 種別 | メッセージID | メッセージ内容 | 表示条件 |
|------|-------------|---------------|----------|
| 情報 | - | DataGrid has moved to its own repository! | 常時表示 |

## 例外処理

- ブラウザ起動失敗時は例外がスローされる可能性あり

## 備考

- DataGridコントロールは`Avalonia.Controls.DataGrid`パッケージとして提供
- 別リポジトリ: https://github.com/AvaloniaUI/Avalonia.Controls.DataGrid
- ControlCatalog本体からDataGrid機能は削除済み

---

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

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

### 推奨読解順序

#### Step 1: 画面レイアウトを理解する

シンプルな構造のため、XAMLから直接理解できます。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | DataGridPage.xaml | `samples/ControlCatalog/Pages/DataGridPage.xaml` | StackPanel内のTextBlockとHyperlinkButtonの配置 |

**主要処理フロー**:
1. **行5-6**: 案内テキストの表示
2. **行7-8**: HyperlinkButtonでGitHubリンク表示

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

リンククリック処理を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | DataGridPage.xaml.cs | `samples/ControlCatalog/Pages/DataGridPage.xaml.cs` | OnLinkClickedメソッドでProcess.Start |

**主要処理フロー**:
- **行14-21**: OnLinkClicked - ProcessStartInfoを使用したブラウザ起動

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

```
DataGridPage (UserControl)
    │
    └─ HyperlinkButton.Click
           └─ OnLinkClicked
                  └─ Process.Start
                         └─ ProcessStartInfo
                                ├─ FileName = GitHub URL
                                └─ UseShellExecute = true
```

### データフロー図

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

リンククリック ─────────▶ OnLinkClicked ─────────────────▶ Process.Start
                              │
                              └─ UseShellExecute=true ───▶ OSデフォルトブラウザ起動
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| DataGridPage.xaml | `samples/ControlCatalog/Pages/DataGridPage.xaml` | XAML | 画面レイアウト定義 |
| DataGridPage.xaml.cs | `samples/ControlCatalog/Pages/DataGridPage.xaml.cs` | ソース | コードビハインド |
