# 画面設計書 58-ToggleSwitch

## 概要

本ドキュメントは、AvaloniaフレームワークのControlCatalogサンプルアプリケーションにおけるToggleSwitchデモページの画面設計書です。ToggleSwitchコントロールの各種表示バリエーションをデモンストレーションします。

### 本画面の処理概要

本画面は、Avaloniaフレームワークが提供するToggleSwitchコントロールの機能を実演するデモページです。ToggleSwitchは、オン/オフの2状態を切り替えるためのスイッチコントロールで、設定画面などで広く使用されます。

**業務上の目的・背景**：ToggleSwitchは、Wi-Fi、Bluetooth、通知、ダークモードなどの設定の有効/無効を切り替えるUIとして、モバイル・デスクトップアプリケーションで広く使用されています。チェックボックスと比較して、状態変更が即座に反映されることを視覚的に示すのに適しています。本デモページは、開発者がToggleSwitchのContent、OnContent、OffContentプロパティを理解し、カスタムコンテンツを含むスイッチUIを実装するための参考資料として機能します。

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

**主要な操作・処理内容**：
1. シンプルなToggleSwitchのオン/オフ切り替え
2. ヘッダー付きToggleSwitch（Content="h_eadered"）の切り替え
3. カスタムOnContent/OffContent（"On"/"Off"テキスト）を持つToggleSwitchの切り替え
4. 画像コンテンツ（Image）を持つToggleSwitchの切り替え

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

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 23 | ToggleSwitch | 主機能 | ToggleSwitchコントロールのデモ。オン・オフトグルスイッチ |

## 画面種別

デモ / 機能確認

## URL/ルーティング

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

## 入出力項目

| 項目名 | 項目種別 | 入力/出力 | データ型 | 説明 |
|--------|----------|-----------|----------|------|
| IsChecked | プロパティ | 入出力 | bool? | スイッチの状態（true=オン、false=オフ） |
| Content | プロパティ | 入力 | object | スイッチの横に表示されるコンテンツ |
| OnContent | プロパティ | 入力 | object | オン時に表示されるコンテンツ |
| OffContent | プロパティ | 入力 | object | オフ時に表示されるコンテンツ |

## 表示項目

| 表示項目 | 説明 |
|----------|------|
| "Simple ToggleSwitch"ヘッダー | シンプルなToggleSwitchセクション |
| シンプルToggleSwitch | 基本的なToggleSwitch |
| コードサンプル（Simple） | `<ToggleSwitch/>` |
| "Headered ToggleSwitch"ヘッダー | ヘッダー付きToggleSwitchセクション |
| ヘッダー付きToggleSwitch | Content="h_eadered"、IsChecked=true |
| コードサンプル（Headered） | `<ToggleSwitch>headered</ToggleSwitch>` |
| "Custom content ToggleSwitch"ヘッダー | カスタムコンテンツセクション |
| カスタムコンテンツToggleSwitch | OnContent="On"、OffContent="Off" |
| コードサンプル（Custom） | OnContent/OffContent設定のXAML |
| "Image content ToggleSwitch"ヘッダー | 画像コンテンツセクション |
| 画像コンテンツToggleSwitch | OnContent/OffContentに画像を使用 |

## イベント仕様

### 1-IsChecked変更

ToggleSwitchをクリックまたはドラッグすると、IsCheckedプロパティが切り替わり、スイッチの視覚状態が更新されます。

### 2-OnContent/OffContent表示切り替え

IsCheckedの状態に応じて、OnContent（オン時）またはOffContent（オフ時）が表示されます。画像コンテンツの例では、異なる画像が表示されます。

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

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- Contentプロパティにアンダースコアプレフィックス（h_eadered、_Custom、_Just Click!）を使用することで、アクセスキーを設定できます
- OnContent/OffContentプロパティを設定しない場合は、デフォルトの表示が使用されます
- 画像などのリッチコンテンツをOnContent/OffContentに設定することで、視覚的に状態を示すことができます

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ToggleSwitch.cs | `src/Avalonia.Controls/ToggleSwitch.cs` | ToggleSwitchの主要プロパティ（IsChecked、Content、OnContent、OffContent）を確認 |

**読解のコツ**: ToggleSwitchはToggleButtonを継承しており、IsCheckedプロパティで状態を管理します。

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

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

**主要処理フロー**:
1. **行4-5**: StackPanelでコンテンツを配置（MaxWidth=500）
2. **行6-12**: "Simple ToggleSwitch"セクション
3. **行9**: 基本ToggleSwitch（プロパティ設定なし）
4. **行14-22**: "Headered ToggleSwitch"セクション
5. **行18**: Content="h_eadered"、IsChecked=true
6. **行24-38**: "Custom content ToggleSwitch"セクション
7. **行28-31**: OnContent="On"、OffContent="Off"
8. **行40-55**: "Image content ToggleSwitch"セクション
9. **行46-51**: OnContent/OffContentにImageを設定

#### Step 3: カスタムスタイルを理解する

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

**主要処理フロー**:
- **行59-65**: TextBox.CodeBoxスタイル - 読み取り専用のコードサンプル表示用
- **行67-70**: TextBlock.headerスタイル - セクションヘッダー用（FontSize=18）
- **行72-76**: Border.Thinスタイル - 薄い枠線でセクションを囲む

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

```
MainView (HamburgerMenu)
    │
    └─ ToggleSwitchPage (UserControl)
           │
           ├─ StackPanel (メインレイアウト)
           │      │
           │      ├─ TextBlock "Simple ToggleSwitch"
           │      ├─ Border.Thin
           │      │      ├─ ToggleSwitch (シンプル)
           │      │      └─ TextBox.CodeBox
           │      │
           │      ├─ TextBlock "Headered ToggleSwitch"
           │      ├─ Border.Thin
           │      │      ├─ ToggleSwitch (Content="h_eadered", IsChecked=true)
           │      │      └─ TextBox.CodeBox
           │      │
           │      ├─ TextBlock "Custom content ToggleSwitch"
           │      ├─ Border.Thin
           │      │      ├─ ToggleSwitch (OnContent="On", OffContent="Off")
           │      │      └─ TextBox.CodeBox
           │      │
           │      ├─ TextBlock "Image content ToggleSwitch"
           │      └─ Border.Thin
           │             └─ ToggleSwitch
           │                    ├─ OnContent: Image (hirsch)
           │                    └─ OffContent: Image (arch)
           │
           └─ UserControl.Styles
                  ├─ TextBox.CodeBox
                  ├─ TextBlock.header
                  └─ Border.Thin
```

### データフロー図

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

ユーザークリック ───▶ ToggleSwitch.OnPointerPressed ───▶ IsChecked反転
                              │
                              └──▶ IsChecked=true ───▶ OnContent表示
                              │
                              └──▶ IsChecked=false ───▶ OffContent表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ToggleSwitchPage.xaml | `samples/ControlCatalog/Pages/ToggleSwitchPage.xaml` | ソース | ページのXAML定義 |
| ToggleSwitchPage.xaml.cs | `samples/ControlCatalog/Pages/ToggleSwitchPage.xaml.cs` | ソース | コードビハインド |
| ToggleSwitch.cs | `src/Avalonia.Controls/ToggleSwitch.cs` | フレームワーク | ToggleSwitchコントロール本体 |
| hirsch-899118_640.jpg | `samples/ControlCatalog/Assets/` | リソース | OnContent用画像 |
| delicate-arch-896885_640.jpg | `samples/ControlCatalog/Assets/` | リソース | OffContent用画像 |
