# 画面設計書 11-Buttons

## 概要

本ドキュメントは、ControlCatalogアプリケーションにおけるButtonsページ（各種ボタンコントロールのデモページ）の画面設計を記述したものである。

### 本画面の処理概要

ButtonsページはAvaloniaフレームワークで提供される各種ボタンコントロールの機能と外観をデモンストレーションするための画面である。開発者がボタンコントロールの使い方を学習し、自身のアプリケーションへの実装を検討する際の参考として利用される。

**業務上の目的・背景**：Avaloniaフレームワークを使用してGUIアプリケーションを開発する開発者が、様々なボタンコントロールの種類、スタイリング方法、イベント処理などを視覚的に確認・学習できる環境を提供する。これにより開発者はドキュメントだけでなく、実動作するサンプルコードを参照しながら実装を進めることができる。

**画面へのアクセス方法**：MainWindow起動後、左側のHamburgerMenuから「Buttons」を選択してアクセスする。ControlCatalogアプリケーションのナビゲーションメニューから直接遷移可能である。

**主要な操作・処理内容**：
1. 標準Buttonの各種スタイル（フォアグラウンド、バックグラウンド、無効状態、再テーマ、アクセント）の確認
2. ToggleButtonのオン/オフ状態の切り替え操作
3. RepeatButtonのクリック回数カウントアップ動作確認
4. HyperlinkButtonによる外部リンクへのナビゲーション
5. DropDownButtonのメニュー表示操作
6. SplitButtonのプライマリ・セカンダリ操作
7. ToggleSplitButtonの複合トグル操作

**画面遷移**：MainViewのHamburgerMenuから遷移してくる。本画面から他画面への直接遷移はないが、HyperlinkButtonクリック時は外部ブラウザでURLが開かれる。

**権限による表示制御**：本画面はデモ用途であり、権限による表示制御は実装されていない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 6 | Button | 主機能 | 各種ボタンコントロールのデモ。標準ボタン、スタイル付きボタン |
| 18 | MenuItem | 補助機能 | DropDownButton、SplitButtonでのMenuFlyout表示 |

## 画面種別

デモ・サンプル画面（各種ボタンコントロールの機能展示）

## URL/ルーティング

ControlCatalogアプリケーション内のHamburgerMenuによるナビゲーション。URIベースのルーティングは使用していない。

## 入出力項目

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|----------|------|------|
| RepeatButtonClickCount | 出力 | int | - | RepeatButtonのクリック回数 |
| HyperlinkButton.IsVisited | 入出力 | bool | - | ハイパーリンクの訪問済み状態 |

## 表示項目

| セクション | コントロール | 説明 |
|------------|--------------|------|
| Button | Button (8種類) | 標準XAML Button、Foreground、Background、Disabled、Re-themed、Accent、Letter Spacing |
| ToggleButton | ToggleButton | チェック状態を持つボタン |
| RepeatButton | RepeatButton | 押し続けるとClickイベントが繰り返し発火するボタン |
| HyperlinkButton | HyperlinkButton (2種類) | 有効状態と無効状態のハイパーリンクボタン |
| DropDownButton | DropDownButton (4種類) | ドロップダウンメニュー付きボタン |
| SplitButton | SplitButton (3種類) | プライマリとセカンダリに分割されたボタン |
| ToggleSplitButton | ToggleSplitButton (3種類) | トグル機能付きスプリットボタン |

## イベント仕様

### 1-RepeatButton Click

RepeatButtonを押下（押し続ける）すると、OnRepeatButtonClickイベントハンドラが繰り返し呼び出される。

**処理フロー**:
1. RepeatButtonのClickイベントが発火
2. OnRepeatButtonClick()が呼び出される
3. repeatButtonClickCountをインクリメント
4. RepeatButtonTextBlockのTextプロパティを更新

**関連コード** (ButtonsPage.xaml.cs:15-19):
```csharp
public void OnRepeatButtonClick(object? sender, RoutedEventArgs args)
{
    repeatButtonClickCount++;
    RepeatButtonTextBlock.Text = $"Repeat Button: {repeatButtonClickCount}";
}
```

### 2-HyperlinkButton Navigate

HyperlinkButtonをクリックすると、NavigateUriで指定されたURLがデフォルトブラウザで開かれる。

**処理フロー**:
1. HyperlinkButtonのClickイベントが発火
2. NavigateUriプロパティ（https://docs.avaloniaui.net/docs/welcome）に基づき外部ブラウザが起動
3. IsVisitedプロパティがtrueに更新

### 3-DropDownButton/SplitButton Flyout

DropDownButtonまたはSplitButtonのセカンダリ部分をクリックすると、共有MenuFlyoutが表示される。

**MenuFlyout構造**:
- Item 1
  - Subitem 1
  - Subitem 2
  - Subitem 3
- Item 2 (Ctrl+A)
- Item 3

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

本画面はUIデモ用途であり、データベース操作は行わない。

## メッセージ仕様

本画面では特定のメッセージ表示は実装されていない。

## 例外処理

本画面では特別な例外処理は実装されていない。ボタンの無効状態はIsEnabled="False"で制御される。

## 備考

- LetterSpacingプロパティによる文字間隔の調整デモを含む（-0.5〜4.0の範囲）
- Button.Stylesを使用したインラインスタイルによるテーマカスタマイズのサンプルを含む
- SharedMenuFlyoutをUserControl.Resourcesで定義し、複数のボタンで共有している

---

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

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

### 推奨読解順序

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

本画面では特別なデータモデルは使用しておらず、UIコントロールの状態がそのまま表示される。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ButtonsPage.xaml.cs | `samples/ControlCatalog/Pages/ButtonsPage.xaml.cs` | repeatButtonClickCount（int型）の管理方法 |

**読解のコツ**: コードビハインドはシンプルで、RepeatButtonのクリックカウンタのみを管理している。

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ButtonsPage.xaml | `samples/ControlCatalog/Pages/ButtonsPage.xaml` | UserControlの構造とリソース定義 |

**主要処理フロー**:
1. **行1-3**: UserControl定義とクラス名の指定
2. **行5-18**: SharedMenuFlyoutリソースの定義（DropDownButton/SplitButton用）
3. **行21-48**: カスタムスタイル定義（header-border、header、thin）
4. **行52-290**: StackPanelによる縦方向レイアウトと各ボタンセクション

#### Step 3: イベントハンドラを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ButtonsPage.xaml.cs | `samples/ControlCatalog/Pages/ButtonsPage.xaml.cs` | OnRepeatButtonClickメソッドの実装 |

**主要処理フロー**:
- **行8**: repeatButtonClickCountフィールドの宣言（初期値0）
- **行15-19**: OnRepeatButtonClickイベントハンドラ - カウントアップとテキスト更新

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

```
ButtonsPage
    │
    ├─ InitializeComponent()
    │      └─ XAML解析・コントロール初期化
    │
    └─ OnRepeatButtonClick()
           └─ RepeatButtonTextBlock.Text 更新
```

### データフロー図

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

RepeatButton.Click ───▶ OnRepeatButtonClick() ───▶ RepeatButtonTextBlock.Text
                              │
                              └─ repeatButtonClickCount++

HyperlinkButton.Click ───▶ NavigateUri ───▶ 外部ブラウザ起動
                                │
                                └─ IsVisited = true
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ButtonsPage.xaml | `samples/ControlCatalog/Pages/ButtonsPage.xaml` | XAML | 画面レイアウト・コントロール定義 |
| ButtonsPage.xaml.cs | `samples/ControlCatalog/Pages/ButtonsPage.xaml.cs` | ソース | コードビハインド・イベントハンドラ |
| MainView.xaml | `samples/ControlCatalog/MainView.xaml` | XAML | ナビゲーション元のメインビュー |
