# Avalonia ControlCatalog 業務運用マニュアル

## 目次

**【基本操作】**
1. [システム概要](#1-システム概要)
2. [アプリケーションの起動・終了手順](#2-アプリケーションの起動終了手順)
3. [メイン画面（TOP画面）](#3-メイン画面top画面)

**【業務フローに沿った機能】**
4. [【STEP1】コントロールナビゲーション機能](#4-step1コントロールナビゲーション機能)
5. [【STEP2-3】コントロール操作・デモ機能](#5-step2-3コントロール操作デモ機能)
6. [【STEP3-4】テーマ・スタイル設定機能](#6-step3-4テーマスタイル設定機能)
7. [【STEP4-5】ウィンドウカスタマイズ機能](#7-step4-5ウィンドウカスタマイズ機能)

**【サポート機能】**
8. [グラフィックス・描画機能](#8-グラフィックス描画機能)
9. [入力処理機能](#9-入力処理機能)
10. [データバインディング機能](#10-データバインディング機能)

**【運用ガイド】**
11. [日常業務の流れ](#11-日常業務の流れ)
12. [よくある質問と対処法](#12-よくある質問と対処法)
13. [トラブルシューティング](#13-トラブルシューティング)

---

## 1. システム概要

### 1.1 Avalonia ControlCatalogとは

Avalonia ControlCatalogは、Avalonia UIフレームワークの各種コントロールを一覧し、デモンストレーションするためのサンプルアプリケーションです。開発者がAvaloniaの各種コントロールの動作を確認し、実装方法を学習するために使用します。

本アプリケーションは、.NET向けのクロスプラットフォームUIフレームワーク「Avalonia」の機能を実際に体験できるカタログアプリケーションとして機能します。Windows、macOS、Linux、iOS、Android、WebAssemblyなど幅広いプラットフォームで動作確認が可能です。

### 1.2 本システムで行う主要業務

本システムは、主に以下の業務を支援します：

| 業務カテゴリ | 具体的な業務内容 |
|------------|----------------|
| **UIコントロール確認** | ボタン、テキストボックス、リストなど60種類以上のUIコントロールの動作確認 |
| **テーマカスタマイズ** | Light/Darkテーマの切り替え、Fluent/Simpleテーマの適用確認 |
| **ウィンドウ設定** | ウィンドウ装飾、透過レベル、サイズ変更などのカスタマイズ |
| **レンダリング確認** | アニメーション、描画、グラフィックス効果の動作確認 |
| **入力テスト** | キーボード、マウス、タッチ、ジェスチャー入力の動作確認 |

### 1.3 業務フロー概要

本システムにおける業務は、以下の流れで進行します：

```
+---------------------------------------------------------------------+
|                        業務フロー                                    |
+---------------------------------------------------------------------+
|                                                                     |
|  【STEP 1】アプリケーションを起動し、メイン画面を表示                  |
|      |                                                              |
|  【STEP 2】HamburgerMenuから確認したいコントロールを選択              |
|      |                                                              |
|  【STEP 3】選択したコントロールの操作・設定を実行                     |
|      |                                                              |
|  【STEP 4】テーマ・スタイル・ウィンドウ設定をカスタマイズ              |
|      |                                                              |
|  【STEP 5】結果を確認し、アプリケーションを終了                       |
|                                                                     |
+---------------------------------------------------------------------+
```

**役割別の業務概要：**

| 役割 | 主な業務 |
|------|---------|
| **開発者** | UIコントロールの動作確認、実装パターンの学習、テーマ/スタイルのカスタマイズ検証 |
| **デザイナー** | テーマの視覚的確認、カラースキームの検証、レイアウトの確認 |
| **テスター** | 各コントロールの動作検証、クロスプラットフォーム動作確認 |

### 1.4 主な機能

| 機能 | 説明 | 業務フローでの位置 |
|------|------|------------------|
| コントロールナビゲーション | HamburgerMenuによる60種類以上のコントロールへのアクセス | STEP 1-2 |
| コントロールデモ | 各コントロールの操作と動作確認 | STEP 3 |
| テーマ設定 | Light/Dark、Fluent/Simpleテーマの切り替え | STEP 4 |
| ウィンドウカスタマイズ | 装飾、透過、サイズの設定 | STEP 4 |
| レンダリングデモ | アニメーション、描画効果の確認 | STEP 3 |
| 入力処理デモ | キーボード、マウス、タッチ入力の確認 | STEP 3 |

### 1.5 ユーザー種別

システムには以下のユーザー種別があります：

| ユーザー種別 | 説明 |
|-------------|------|
| 開発者 | Avaloniaを使用してアプリケーションを開発する技術者 |
| デザイナー | UIデザインとテーマカスタマイズを担当する担当者 |
| テスター | アプリケーションの動作検証を行う担当者 |

### 1.6 対応プラットフォーム・ブラウザ

**対応プラットフォーム：**
- Windows（Win32）
- macOS（Cocoa）
- Linux（X11、Framebuffer）
- iOS/tvOS
- Android
- WebAssembly（ブラウザ）

**推奨環境：**
- .NET SDK 10.0.101以上（または.NET 8.0）
- Visual Studio 2022以上（オプション）
- JetBrains Rider 2017.2以上（オプション）

---

## 2. アプリケーションの起動・終了手順

### 2.1 起動方法

#### デスクトップ版の起動手順

1. ターミナル（コマンドプロンプト）を開きます
2. プロジェクトディレクトリに移動します
   ```bash
   cd samples/ControlCatalog.Desktop
   ```
3. 以下のコマンドを実行します
   ```bash
   dotnet run
   ```
4. アプリケーションのメインウィンドウが表示されます

#### Visual Studioでの起動手順

1. Visual Studioで「Avalonia.sln」または「Avalonia.Desktop.slnf」を開きます
2. 「ControlCatalog.Desktop」プロジェクトをスタートアッププロジェクトに設定します
3. 「F5」キーを押してデバッグ実行します
4. アプリケーションのメインウィンドウが表示されます

### 2.2 終了方法

#### 方法1: メニューから終了

1. 画面上部のメニューバーから「File」をクリックします
2. 表示されるメニューから「Exit」（macOSでは「Quit Avalonia」）を選択します
3. アプリケーションが終了します

**ショートカットキー：**
- Windows/Linux: `Alt+F4`
- macOS: `Cmd+Q`

#### 方法2: ウィンドウボタンから終了

1. ウィンドウ右上（macOSでは左上）の「X」ボタンをクリックします
2. アプリケーションが終了します

### 2.3 ウィンドウサイズについて

| 設定 | 値 |
|------|------|
| デフォルトサイズ | 1024 x 800 ピクセル |
| 最小サイズ | 500 x 300 ピクセル |
| リサイズ | 可能 |

---

## 3. メイン画面（TOP画面）

### 3.1 画面構成

メインウィンドウは以下の要素で構成されています：

```
+------------------------------------------------------------------+
|  [タイトルバー] Avalonia Control Gallery                          |
+------------------------------------------------------------------+
|  [メニューバー] File | Edit | Options                             |
+------------------------------------------------------------------+
| +-------------+ +-----------------------------------------------+ |
| | Hamburger   | |                                               | |
| | Menu        | |     コンテンツエリア                           | |
| |             | |     （選択したコントロールのデモ画面）          | |
| | - Composition|                                                | |
| | - Accelerator|                                                | |
| | - Acrylic   | |                                               | |
| | - ...       | |                                               | |
| | [設定]      | |                                               | |
| +-------------+ +-----------------------------------------------+ |
+------------------------------------------------------------------+
```

### 3.2 メニューバーの機能

#### Fileメニュー

| メニュー項目 | 説明 | ショートカット |
|-------------|------|---------------|
| Open | ファイルを開く（Recentに追加） | Ctrl+O |
| Recent | 最近開いたファイルの履歴 | - |
| Exit/Quit | アプリケーションを終了 | Alt+F4 / Cmd+Q |

#### Editメニュー

| メニュー項目 | 説明 | ショートカット |
|-------------|------|---------------|
| Copy | クリップボードにコピー | Ctrl+C |
| Paste | クリップボードから貼り付け | Ctrl+V |

#### Optionsメニュー

| メニュー項目 | 説明 | 種別 |
|-------------|------|------|
| Option 1 | チェックボックス型オプション | CheckBox |
| Option 2 | チェックボックス型オプション | CheckBox |
| Radio Option A | ラジオボタン型オプション（グループ） | RadioButton |
| Radio Option B | ラジオボタン型オプション（グループ） | RadioButton |
| Radio Option C | ラジオボタン型オプション（グループ） | RadioButton |

### 3.3 HamburgerMenu（サイドナビゲーション）

左側のサイドバーには、カテゴリ別に整理された60種類以上のコントロールデモへのリンクが表示されます。

**主なカテゴリ：**
- UIコントロール（Button、TextBox、ComboBox等）
- レイアウト（Grid、StackPanel、Canvas等）
- 入力処理（Gestures、Focus、DragDrop等）
- グラフィックス（Drawing、Animation、Brushes等）

---

## 4. 【STEP1】コントロールナビゲーション機能

> **業務フローでの位置**: アプリケーション起動後、確認したいコントロールを選択するステップです。

### 4.1 コントロールの選択方法

#### やるべきこと
- 確認したいコントロールをサイドメニューから選択する

#### システムでの操作手順

1. アプリケーションを起動します
2. 左側のHamburgerMenuが表示されていることを確認します
3. スクロールして目的のコントロール名を探します
4. コントロール名をクリックします
5. 右側のコンテンツエリアに該当コントロールのデモ画面が表示されます

### 4.2 コントロール一覧（主要なもの）

| カテゴリ | コントロール名 | 説明 |
|---------|---------------|------|
| 基本コントロール | Buttons | ボタン、トグルボタン、リピートボタン |
| 基本コントロール | TextBox | テキスト入力、マルチライン |
| 基本コントロール | CheckBox | チェックボックス（3状態対応） |
| 基本コントロール | RadioButton | ラジオボタン（排他選択） |
| 選択コントロール | ComboBox | ドロップダウン選択 |
| 選択コントロール | ListBox | リスト選択 |
| 選択コントロール | TreeView | 階層データ表示 |
| 日時選択 | Calendar | カレンダー表示 |
| 日時選択 | DatePicker | 日付選択 |
| 日時選択 | TimePicker | 時刻選択 |
| レイアウト | Canvas | 絶対座標配置 |
| レイアウト | Expander | 折りたたみコンテンツ |
| 入力 | Gestures | ジェスチャー認識 |
| 入力 | Focus | フォーカス管理 |
| 入力 | Drag+Drop | ドラッグ＆ドロップ |

### 4.3 注意点・Tips

- HamburgerMenuは60種類以上のコントロールを含むため、スクロールが必要な場合があります
- コントロール名はアルファベット順に並んでいます
- 各コントロールのデモは独立しており、他のデモに影響しません

---

## 5. 【STEP2-3】コントロール操作・デモ機能

> **業務フローでの位置**: 選択したコントロールの操作と動作確認を行うステップです。

### 5.1 基本的な操作フロー

1. HamburgerMenuから目的のコントロールを選択します
2. コンテンツエリアにデモ画面が表示されます
3. 各コントロールの操作を試します
4. プロパティやスタイルの変更を確認します

### 5.2 ボタン系コントロール（Buttons）の操作

#### 業務シーン
ボタンクリック時の動作を確認したい場合

#### 操作手順

1. サイドメニューから「Buttons」を選択します
2. 画面に各種ボタンが表示されます：
   - **Button**: 標準的なクリックボタン
   - **ToggleButton**: オン/オフ切り替えボタン
   - **RepeatButton**: 押し続けると繰り返しイベント発生
   - **DropDownButton**: ドロップダウンメニュー付きボタン
   - **SplitButton**: 分割ボタン
3. 各ボタンをクリックして動作を確認します

### 5.3 テキスト入力系コントロール（TextBox）の操作

#### 業務シーン
テキスト入力フィールドの動作を確認したい場合

#### 操作手順

1. サイドメニューから「TextBox」を選択します
2. 各種テキストボックスが表示されます
3. テキストを入力して動作を確認します：
   - 単一行入力
   - 複数行入力
   - パスワード入力
   - マスク付き入力

### 5.4 リスト系コントロール（ListBox、ComboBox）の操作

#### 業務シーン
リスト選択UIの動作を確認したい場合

#### 操作手順

1. サイドメニューから「ListBox」または「ComboBox」を選択します
2. リスト/ドロップダウンが表示されます
3. 項目を選択して動作を確認します：
   - 単一選択モード
   - 複数選択モード
   - 仮想化スクロール

### 5.5 日時選択コントロール（Calendar、DatePicker、TimePicker）の操作

#### 業務シーン
日付・時刻選択UIの動作を確認したい場合

#### 操作手順

1. サイドメニューから「Calendar」「Date/Time Picker」を選択します
2. カレンダーまたは日時選択コントロールが表示されます
3. 日付/時刻を選択して動作を確認します

---

## 6. 【STEP3-4】テーマ・スタイル設定機能

> **業務フローでの位置**: アプリケーション全体のテーマやスタイルを変更するステップです。

### 6.1 設定画面へのアクセス

1. HamburgerMenuの下部にある設定アイコン（歯車マーク）をクリックします
2. 設定Flyoutが表示されます

### 6.2 テーマバリアント（Light/Dark）の切り替え

#### やるべきこと
アプリケーション全体の明るさテーマを変更する

#### システムでの操作手順

1. 設定Flyoutを開きます
2. 「ThemeVariant」ドロップダウンを探します
3. 以下から選択します：
   - **Default**: システム設定に従う
   - **Light**: 明るいテーマ
   - **Dark**: 暗いテーマ
4. 選択後、アプリケーション全体のテーマが即座に変更されます

### 6.3 カタログテーマ（Fluent/Simple）の切り替え

#### やるべきこと
コントロールのデザインスタイルを変更する

#### システムでの操作手順

1. 設定Flyoutを開きます
2. 「Themes」ドロップダウンを探します
3. 以下から選択します：
   - **Fluent**: Microsoft Fluent Design準拠のモダンなテーマ
   - **Simple**: 軽量でシンプルなテーマ
4. 選択後、コントロールのデザインが変更されます

### 6.4 透過レベルの設定

#### やるべきこと
ウィンドウの透過度を変更する

#### システムでの操作手順

1. 設定Flyoutを開きます
2. 「TransparencyLevel」ドロップダウンを探します
3. 透過レベルを選択します
4. ウィンドウ背景の透過度が変更されます

### 6.5 フロー方向の設定

#### やるべきこと
テキストの表示方向を変更する（多言語対応確認用）

#### システムでの操作手順

1. 設定Flyoutを開きます
2. 「FlowDirection」ドロップダウンを探します
3. 以下から選択します：
   - **LeftToRight**: 左から右（日本語、英語など）
   - **RightToLeft**: 右から左（アラビア語、ヘブライ語など）
4. UIの表示方向が変更されます

---

## 7. 【STEP4-5】ウィンドウカスタマイズ機能

> **業務フローでの位置**: ウィンドウの装飾や状態を変更し、結果を確認するステップです。

### 7.1 ウィンドウ装飾の変更

#### やるべきこと
ウィンドウのタイトルバーやフレームを変更する

#### システムでの操作手順

1. 設定Flyoutを開きます
2. 「Decorations」ドロップダウンを探します
3. 以下から選択します：
   - **Full**: 標準的なウィンドウ装飾（タイトルバー、フレーム付き）
   - **BorderOnly**: フレームのみ（タイトルバーなし）
   - **None**: 装飾なし（カスタムウィンドウ用）
4. ウィンドウの外観が変更されます

### 7.2 ウィンドウ状態の変更

#### やるべきこと
ウィンドウの表示状態を変更する

#### システムでの操作手順

1. 設定Flyoutを開きます
2. 「WindowState」ドロップダウンを探します
3. 以下から選択します：
   - **Normal**: 通常サイズ
   - **Minimized**: 最小化
   - **Maximized**: 最大化
   - **FullScreen**: フルスクリーン
4. ウィンドウの状態が変更されます

### 7.3 ウィンドウカスタマイズページでの詳細設定

#### やるべきこと
より詳細なウィンドウカスタマイズを行う

#### システムでの操作手順

1. サイドメニューから「Window Customizations」を選択します
2. 詳細なウィンドウ設定オプションが表示されます
3. 各設定を変更して効果を確認します

---

## 8. グラフィックス・描画機能

### 8.1 アニメーションデモ（Animations）

#### 操作手順

1. サイドメニューから「RenderDemo」アプリケーションを起動します
2. 「Animations」を選択します
3. 各種アニメーションの動作を確認します：
   - キーフレームアニメーション
   - イージング関数
   - プロパティアニメーション

### 8.2 描画デモ（Custom Drawing）

#### 操作手順

1. サイドメニューから「Custom Drawing」を選択します
2. 描画コンテキストを使用した図形描画を確認します
3. 以下の描画機能を確認できます：
   - 線、矩形、楕円の描画
   - パス描画
   - テキスト描画

### 8.3 ブラシデモ（Brushes）

#### 操作手順

1. 「Brushes」ページを選択します
2. 各種ブラシの効果を確認します：
   - SolidColorBrush（単色）
   - LinearGradientBrush（線形グラデーション）
   - RadialGradientBrush（円形グラデーション）
   - ImageBrush（画像）

---

## 9. 入力処理機能

### 9.1 ジェスチャー認識（Gestures）

#### 操作手順

1. サイドメニューから「Gestures」を選択します
2. タッチまたはマウスでジェスチャーを試します：
   - タップ
   - ダブルタップ
   - 長押し
   - ピンチ
   - スワイプ

### 9.2 ドラッグ＆ドロップ（Drag+Drop）

#### 操作手順

1. サイドメニューから「Drag+Drop」を選択します
2. ドラッグ元のアイテムをクリックして保持します
3. ドロップ先までドラッグします
4. マウスボタンを離してドロップします

### 9.3 フォーカス管理（Focus）

#### 操作手順

1. サイドメニューから「Focus」を選択します
2. Tabキーでフォーカスを移動します
3. フォーカスの視覚的表示を確認します

---

## 10. データバインディング機能

### 10.1 データバインディングデモ

#### 操作手順

1. BindingDemoアプリケーションを起動します
2. 各タブでバインディングの動作を確認します：
   - **Basic**: 基本的なバインディング
   - **ListBox**: リストへのバインディング
   - **Property Validation**: バリデーション付きバインディング
   - **Commands**: コマンドバインディング
   - **Advanced**: 高度なバインディング

### 10.2 データバリデーション

#### 操作手順

1. 「Data Validation」ページを選択します
2. 入力フィールドにデータを入力します
3. バリデーションエラーの表示を確認します

---

## 11. 日常業務の流れ

本セクションでは、業務フローに沿った日常業務の流れを説明します。

```
業務フロー概要（再掲）
======================================================================
【STEP 1】アプリケーションを起動し、メイン画面を表示 -> 2章参照
    |
【STEP 2】HamburgerMenuから確認したいコントロールを選択 -> 4章参照
    |
【STEP 3】選択したコントロールの操作・設定を実行 -> 5章参照
    |
【STEP 4】テーマ・スタイル・ウィンドウ設定をカスタマイズ -> 6-7章参照
    |
【STEP 5】結果を確認し、アプリケーションを終了 -> 2章参照
======================================================================
```

### 11.1 【開発者】STEP1: アプリケーションの起動

開発作業開始時に、ControlCatalogアプリケーションを起動してコントロールの動作確認環境を準備します。

#### 操作手順

1. ターミナルを開きます
2. プロジェクトディレクトリに移動します
3. `dotnet run`コマンドを実行します
4. メインウィンドウが表示されることを確認します

### 11.2 【開発者】STEP2: コントロールの選択

実装したいUIコントロールをHamburgerMenuから選択します。

#### 操作手順

1. 左側のサイドメニューをスクロールします
2. 目的のコントロール名をクリックします
3. デモ画面が表示されることを確認します

### 11.3 【開発者】STEP3: コントロールの操作確認

選択したコントロールの操作方法を確認します。

#### 操作手順

1. デモ画面のコントロールを操作します
2. イベントの発生を確認します
3. プロパティの変更効果を確認します

### 11.4 【開発者】STEP4-5: テーマ確認と終了

異なるテーマでの表示を確認し、作業を完了します。

#### 操作手順

1. 設定Flyoutからテーマを切り替えます
2. コントロールの見た目を確認します
3. File > Exitでアプリケーションを終了します

---

## 12. よくある質問と対処法

### 12.1 起動に関するQ&A

**Q: アプリケーションが起動しません**

A: 以下を確認してください：
1. .NET SDKがインストールされていますか？（バージョン8.0以上推奨）
2. `dotnet --version`コマンドでSDKのバージョンを確認してください
3. プロジェクトディレクトリで`dotnet restore`を実行してください

**Q: ビルドエラーが発生します**

A: 以下を試してください：
1. `git submodule update --init`を実行してサブモジュールを更新
2. `dotnet clean`でビルド成果物をクリア
3. `dotnet build`で再ビルド

### 12.2 操作に関するQ&A

**Q: HamburgerMenuが表示されません**

A: ウィンドウサイズが小さい可能性があります。ウィンドウを広げるか、メニューアイコンをクリックしてください。

**Q: テーマが変更されません**

A: 設定Flyoutの「ThemeVariant」ドロップダウンから正しく選択しているか確認してください。変更は即座に反映されます。

**Q: 透過が動作しません**

A: 一部のプラットフォームでは透過がサポートされていない場合があります。Windows 10以降またはmacOSでの使用を推奨します。

---

## 13. トラブルシューティング

### 13.1 エラーメッセージと対処法

| エラーメッセージ | 原因 | 対処法 |
|----------------|------|--------|
| SDK not found | .NET SDKがインストールされていない | https://dotnet.microsoft.com から.NET SDKをインストール |
| Project not found | プロジェクトファイルが見つからない | 正しいディレクトリにいるか確認 |
| Build failed | ビルドエラー | `dotnet restore`を実行後、再ビルド |

### 13.2 よくあるトラブルと解決方法

#### 画面が真っ白になる

**原因**: レンダリングの問題

**解決方法**:
1. アプリケーションを再起動します
2. グラフィックスドライバーを更新します
3. ハードウェアアクセラレーションを無効にしてみます

#### コントロールが反応しない

**原因**: フォーカスの問題

**解決方法**:
1. コントロールをクリックしてフォーカスを当てます
2. Tabキーでフォーカスを移動してみます
3. アプリケーションを再起動します

#### ウィンドウサイズが変更できない

**原因**: リサイズが無効化されている

**解決方法**:
1. 設定FlyoutでWindowStateを「Normal」に設定します
2. CanResizeプロパティがtrueになっているか確認します

### 13.3 サポートへの連絡方法

技術的な問題が解決しない場合は、以下の方法でサポートを受けることができます：

1. **GitHubリポジトリ**: https://github.com/AvaloniaUI/Avalonia
   - Issuesセクションで既存の問題を検索
   - 新しいIssueを作成して報告

2. **公式ドキュメント**: Avaloniaの公式ドキュメントを参照

3. **コミュニティ**: Gitterや公式フォーラムでコミュニティに質問

---

## 改訂履歴

| 版数 | 改訂日 | 改訂内容 |
|-----|--------|---------|
| 1.0 | 2026-02-22 | 初版作成 |

---

*本マニュアルは、Avalonia ControlCatalogのエンドユーザー（開発者）向け業務運用マニュアルです。*
*フレームワークの更新により、画面や操作方法が変更される場合があります。*
