# 画面設計書 9-Border

## 概要

本ドキュメントは、ControlCatalogアプリケーションのBorderページ（BorderPage）の画面設計を定義します。

### 本画面の処理概要

このBorderページは、Avalonia UIのBorderコントロールをデモンストレーションするページです。境界線、背景色、角丸、BackgroundSizing、クリッピングなどの様々な設定を示しています。

**業務上の目的・背景**：本画面は、Avalonia UIフレームワークのBorderコントロールの実装方法を示すデモです。Borderはコンテンツを囲む枠線や背景を提供する基本的なコントロールで、カード、パネル、ボタンの背景など様々な場面で使用されます。BackgroundSizingプロパティによる背景の描画範囲制御や、CornerRadiusによる角丸設定が可能です。

**画面へのアクセス方法**：MainViewのHamburgerMenuから「Border」タブを選択してアクセスします。MainView.xamlの34-36行目で定義されています。

**主要な操作・処理内容**：
1. 基本的なBorderの確認（境界線のみ）
2. BackgroundSizing（CenterBorder/InnerBorderEdge/OuterBorderEdge）の違いを確認
3. CornerRadius（角丸）の効果を確認
4. ClipToBoundsによる画像クリッピングを確認

**画面遷移**：
- 遷移元：MainView（HamburgerMenu）
- 遷移先：なし（コンテンツページ）

**権限による表示制御**：本アプリケーションはデモ用のため、特別な権限制御は実装されていません。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 38 | Border | 主機能 | Borderコントロールのデモ。境界線と背景の設定 |

## 画面種別

デモページ / サンプル

## URL/ルーティング

デスクトップアプリケーションのため、URLルーティングは該当なし。HamburgerMenuのTabItemとしてアクセス。

## 入出力項目

本画面は入力項目を持たず、表示のみのデモページです。

## 表示項目

| 項目名 | 表示位置 | データ型 | 説明 |
|--------|----------|----------|------|
| h2テキスト | 上部 | TextBlock | 説明文 |
| 基本Border | 1行目 | Border | 境界線のみ |
| CenterBorder | 2行目 | Border | BackgroundSizing=CenterBorder |
| InnerBorderEdge | 3行目 | Border | BackgroundSizing=InnerBorderEdge |
| OuterBorderEdge | 4行目 | Border | BackgroundSizing=OuterBorderEdge |
| 角丸Border（境界線） | 5行目 | Border | CornerRadius=8、境界線あり |
| 角丸Border（背景） | 6行目 | Border | CornerRadius=8、背景色のみ |
| クリッピングBorder | 7行目 | Border | CornerRadius=100、ClipToBounds=True |

## イベント仕様

本画面にはイベントハンドラが実装されていません。XAMLのみで完結する静的なデモページです。

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

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

本画面はデータベースを使用しません。

## メッセージ仕様

| メッセージID | 種別 | 内容 | 表示条件 |
|-------------|------|------|----------|
| N/A | - | - | - |

本画面では特別なメッセージ表示は行われません。

## 例外処理

| 例外種別 | 発生条件 | 対処 |
|----------|----------|------|
| - | - | - |

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

## 備考

- SystemAccentColor/SystemAccentColorDark1をDynamicResourceで参照
- SemiTransparentSystemAccentBrushはOpacity=0.4で定義
- BackgroundSizingの3つのオプション：
  - CenterBorder: 境界線の中央から背景を描画
  - InnerBorderEdge: 境界線の内側から背景を描画
  - OuterBorderEdge: 境界線の外側から背景を描画
- 円形クリッピングはCornerRadius=100とClipToBounds=Trueで実現
- maple-leaf-888807_640.jpg画像をUniformToFillで表示

---

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

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

### 推奨読解順序

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

この画面は特別なデータ構造を使用していません。リソースとしてSemiTransparentSystemAccentBrushを定義しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | BorderPage.xaml | `samples/ControlCatalog/Pages/BorderPage.xaml` | リソース定義（SolidColorBrush） |

**読解のコツ**: DynamicResourceを使用することで、テーマ変更時に自動的に色が変わります。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | BorderPage.xaml | `samples/ControlCatalog/Pages/BorderPage.xaml` | StackPanel構造と各Border設定 |
| 2-2 | BorderPage.xaml.cs | `samples/ControlCatalog/Pages/BorderPage.xaml.cs` | コードビハインド（最小限） |

**主要処理フロー**:
1. **8-10行目**: リソース定義（SemiTransparentSystemAccentBrush）
2. **17-19行目**: 基本Border（境界線のみ）
3. **20-26行目**: BackgroundSizing=CenterBorder
4. **27-33行目**: BackgroundSizing=InnerBorderEdge
5. **34-40行目**: BackgroundSizing=OuterBorderEdge
6. **41-46行目**: 角丸Border（境界線あり）
7. **47-51行目**: 角丸Border（背景のみ）
8. **52-58行目**: 円形クリッピング

#### Step 3: BackgroundSizingを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | BorderPage.xaml | `samples/ControlCatalog/Pages/BorderPage.xaml` | 3つのBackgroundSizing値の違い |

**主要処理フロー**:
- **CenterBorder**: 半透明の境界線と背景が重なる中央で描画
- **InnerBorderEdge**: 境界線の内側から背景を描画（境界線が上に表示）
- **OuterBorderEdge**: 境界線の外側から背景を描画（背景が境界線を超える）

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

```
BorderPage（UserControl）
    │
    ├─ Resources
    │      └─ SemiTransparentSystemAccentBrush
    │             └─ SystemAccentColor, Opacity=0.4
    │
    └─ StackPanel
           │
           ├─ TextBlock[h2]
           │
           ├─ Border[基本]
           │      └─ BorderBrush=SystemAccentColor
           │             BorderThickness=2
           │
           ├─ Border[CenterBorder]
           │      ├─ Background=SystemAccentColorDark1
           │      ├─ BorderBrush=SemiTransparent...
           │      ├─ BackgroundSizing=CenterBorder
           │      └─ BorderThickness=8
           │
           ├─ Border[InnerBorderEdge]
           │      └─ BackgroundSizing=InnerBorderEdge
           │
           ├─ Border[OuterBorderEdge]
           │      └─ BackgroundSizing=OuterBorderEdge
           │
           ├─ Border[角丸+境界線]
           │      └─ CornerRadius=8, BorderThickness=4
           │
           ├─ Border[角丸+背景]
           │      └─ CornerRadius=8, Background
           │
           └─ Border[円形クリッピング]
                  ├─ CornerRadius=100
                  ├─ ClipToBounds=True
                  └─ Image[maple-leaf]
                         └─ Stretch=UniformToFill
```

### データフロー図

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

なし ────────────▶ BorderPage ─────────────▶ 表示のみ
                        │
                        ├─ リソース解決 ─────▶ 色の適用
                        │      └─ DynamicResource
                        │
                        └─ レンダリング ─────▶ 各Border描画
                               ├─ 境界線
                               ├─ 背景
                               ├─ 角丸
                               └─ クリッピング
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| BorderPage.xaml | `samples/ControlCatalog/Pages/BorderPage.xaml` | XAML | BorderデモのUI定義 |
| BorderPage.xaml.cs | `samples/ControlCatalog/Pages/BorderPage.xaml.cs` | ソース | コードビハインド（最小限） |
| maple-leaf-888807_640.jpg | `samples/ControlCatalog/Assets/maple-leaf-888807_640.jpg` | リソース | クリッピングデモ用画像 |
