# 画面設計書 56-TextBlock

## 概要

本ドキュメントは、AvaloniaフレームワークのControlCatalogサンプルアプリケーションにおけるTextBlockデモページの画面設計書です。TextBlockコントロールの各種テキスト表示機能とフォーマットオプションを網羅的にデモンストレーションします。

### 本画面の処理概要

本画面は、Avaloniaフレームワークが提供するTextBlockコントロールの多彩なテキスト表示機能を実演するデモページです。テキストの省略表示、配置、フォントカスタマイズ、テキスト装飾、絵文字表示、インライン要素、フォント機能など、TextBlockの主要な機能を確認できます。

**業務上の目的・背景**：TextBlockはテキスト表示の基本コンポーネントであり、ラベル、見出し、説明文など、あらゆるテキスト表示に使用されます。本デモページは、開発者がTextBlockの多様なプロパティ設定（TextTrimming、TextAlignment、TextWrapping、TextDecorations、FontFeatures等）を理解し、リッチなテキスト表示を実装するための参考資料として機能します。特にUnicode絵文字の正しい表示、カスタムTextDecorations、OpenTypeフォント機能の活用を学ぶことができます。

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

**主要な操作・処理内容**：
1. TextTrimmingによる省略表示の確認（CharacterEllipsis、WordEllipsis）
2. テキスト配置（Left、Center、Right）の確認
3. TextWrappingによるテキスト折り返し表示の確認
4. カスタムフォント（Source Sans Pro）の各スタイル表示
5. TextDecorationsによる下線、取り消し線、上線、ベースライン表示
6. カスタムTextDecorations（グラデーション線）の表示
7. Unicode絵文字（肌の色、家族、ジェスチャー）の表示確認
8. SelectableTextBlockによる選択可能なテキストとインライン要素
9. FontFeaturesによるOpenTypeフォント機能（c2sc、smcp、frac）の確認

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 8 | TextBlock | 主機能 | TextBlockコントロールのデモ。書式設定とインライン要素 |

## 画面種別

デモ / 機能確認

## URL/ルーティング

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

## 入出力項目

| 項目名 | 項目種別 | 入力/出力 | データ型 | 説明 |
|--------|----------|-----------|----------|------|
| Text | プロパティ | 出力 | string | 表示するテキスト |
| TextTrimming | プロパティ | 入力 | TextTrimming | テキスト省略方式 |
| TextAlignment | プロパティ | 入力 | TextAlignment | テキスト配置 |
| TextWrapping | プロパティ | 入力 | TextWrapping | テキスト折り返し |
| TextDecorations | プロパティ | 入力 | TextDecorationCollection | テキスト装飾 |
| FontFamily | プロパティ | 入力 | FontFamily | フォントファミリー |
| FontFeatures | プロパティ | 入力 | FontFeatureCollection | OpenTypeフォント機能 |

## 表示項目

| 表示項目 | 説明 |
|----------|------|
| ページ説明 | "A control that can display text" |
| TextTrimmingセクション | CharacterEllipsis、WordEllipsis |
| 配置セクション | Left/Center/Right配置 |
| TextWrappingセクション | マルチラインテキスト折り返し |
| カスタムフォントセクション | Source Sans Pro（Regular/Bold/Italic/BoldItalic） |
| TextDecorationsセクション | Underline/Strikethrough/Overline/Baseline |
| カスタムTextDecorationsセクション | グラデーション線のTextDecoration |
| 絵文字セクション（肌の色） | 肌の色修飾子付き絵文字 |
| 絵文字セクション（家族） | 複合絵文字（家族） |
| SelectableTextBlockセクション | 選択可能テキストとSpan要素 |
| FontFeaturesセクション | c2sc、smcp、frac機能 |

## イベント仕様

### 1-SelectableTextBlockテキスト選択

SelectableTextBlockでは、マウスドラッグでテキストを選択し、クリップボードにコピーできます。

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- TextTrimmingのCharacterEllipsisは文字単位で省略し、WordEllipsisは単語単位で省略します
- TextDecorationはLocation、Stroke、StrokeThicknessなどの詳細なカスタマイズが可能です
- Unicode絵文字はZWJ（Zero-Width Joiner）で複合絵文字を構成できます
- FontFeaturesはOpenTypeフォントの高度な機能を活用できます（スモールキャップス、分数表示など）
- avares://スキームでカスタムフォントを読み込めます

---

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

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

### 推奨読解順序

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

TextBlockPageはシンプルな構成で、ViewModelを使用せず、すべてのプロパティがXAMLで直接設定されています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | TextBlock.cs | `src/Avalonia.Controls/TextBlock.cs` | TextBlockの主要プロパティを確認 |
| 1-2 | TextDecoration.cs | `src/Avalonia.Media/TextDecoration.cs` | TextDecorationの構造を確認 |

**読解のコツ**: TextBlockは多くのフォーマットプロパティを持つため、表示結果と関連付けて読み進めてください。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | TextBlockPage.xaml | `samples/ControlCatalog/Pages/TextBlockPage.xaml` | 各種TextBlockの設定を確認 |
| 2-2 | TextBlockPage.xaml.cs | `samples/ControlCatalog/Pages/TextBlockPage.xaml.cs` | InitializeComponent()のみの最小実装 |

**主要処理フロー**:
1. **行5**: ページ説明TextBlock
2. **行9-16**: Borderスタイル（枠線、パディング、幅の統一）
3. **行18-29**: TextTrimming、TextAlignmentセクション
4. **行31-35**: TextWrappingセクション
5. **行36-55**: カスタムフォントセクション（Source Sans Pro）
6. **行56-105**: TextDecorationsセクション（標準、カスタム）
7. **行106-119**: 絵文字セクション（肌の色、家族）
8. **行120-130**: SelectableTextBlockとSpan要素
9. **行131-137**: FontFeaturesセクション（Run要素）

#### Step 3: TextDecorationのカスタマイズを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | TextBlockPage.xaml（行62-103） | `samples/ControlCatalog/Pages/TextBlockPage.xaml` | カスタムTextDecorationの定義 |

**主要処理フロー**:
- **行62**: "Custom TextDecorations"テキストブロック
- **行63-101**: TextDecorationCollectionの定義
  - **行65-76**: Overline（グラデーションストローク、赤→緑）
  - **行77-88**: Strikethrough（グラデーションストローク、緑→青）
  - **行89-100**: Underline（グラデーションストローク、青→赤）

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

```
MainView (HamburgerMenu)
    │
    └─ TextBlockPage (UserControl)
           │
           ├─ StackPanel (メインレイアウト)
           │      │
           │      ├─ TextBlock (ページ説明)
           │      │
           │      └─ WrapPanel (コンテンツグリッド)
           │             │
           │             ├─ Border (TextTrimming/Alignment)
           │             │      └─ StackPanel
           │             │             ├─ TextBlock (CharacterEllipsis)
           │             │             ├─ TextBlock (WordEllipsis)
           │             │             └─ TextBlock (Left/Center/Right)
           │             │
           │             ├─ Border (TextWrapping)
           │             │      └─ TextBlock (Wrap)
           │             │
           │             ├─ Border (カスタムフォント)
           │             │      └─ StackPanel
           │             │             └─ TextBlock (Regular/Bold/Italic)
           │             │
           │             ├─ Border (TextDecorations)
           │             │      └─ StackPanel
           │             │             ├─ TextBlock (Underline)
           │             │             ├─ TextBlock (Strikethrough)
           │             │             ├─ TextBlock (Overline)
           │             │             ├─ TextBlock (Baseline)
           │             │             └─ TextBlock (Custom)
           │             │
           │             ├─ Border (絵文字)
           │             │      └─ StackPanel
           │             │             └─ TextBlock (肌の色/家族)
           │             │
           │             ├─ Border (SelectableTextBlock)
           │             │      └─ SelectableTextBlock
           │             │             └─ Span/Bold/Italic要素
           │             │
           │             └─ Border (FontFeatures)
           │                    └─ TextBlock (Times New Roman)
           │                           └─ Run (c2sc, smcp, frac)
```

### データフロー図

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

XAML Text属性 ───▶ TextBlock.Text ───▶ TextPresenter ───▶ 画面表示
                         │
                         └──▶ FormattedText生成

TextDecorations ───▶ TextDecoration適用 ───▶ 装飾線描画
     │
     └──▶ Stroke（LinearGradientBrush）

FontFeatures ───▶ OpenType機能適用 ───▶ グリフ変換 ───▶ 表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| TextBlockPage.xaml | `samples/ControlCatalog/Pages/TextBlockPage.xaml` | ソース | ページのXAML定義 |
| TextBlockPage.xaml.cs | `samples/ControlCatalog/Pages/TextBlockPage.xaml.cs` | ソース | コードビハインド |
| TextBlock.cs | `src/Avalonia.Controls/TextBlock.cs` | フレームワーク | TextBlockコントロール本体 |
| SelectableTextBlock.cs | `src/Avalonia.Controls/SelectableTextBlock.cs` | フレームワーク | 選択可能TextBlock |
| TextDecoration.cs | `src/Avalonia.Media/TextDecoration.cs` | フレームワーク | テキスト装飾 |
| SourceSansPro-*.ttf | `samples/ControlCatalog/Assets/Fonts/` | リソース | カスタムフォント |
