# 画面設計書 20-Container Queries

## 概要

本ドキュメントは、ControlCatalogアプリケーションにおけるContainer Queriesページ（コンテナクエリのデモページ）の画面設計を記述したものである。

### 本画面の処理概要

Container QueriesページはAvaloniaフレームワークのContainer Query機能をデモンストレーションするための画面である。Container Queryは、親コンテナのサイズに基づいて子要素のスタイルを動的に変更するレスポンシブレイアウト機能である。CSSのContainer Queriesに類似した機能をXAMLで実現している。

**業務上の目的・背景**：ウィンドウサイズや親コンテナのサイズに応じてレイアウトを動的に変更する必要があるアプリケーション（レスポンシブデザイン、ダッシュボード、画像ギャラリーなど）を開発する開発者に対して、Container Query機能の使用方法を示す。従来のメディアクエリとは異なり、コンポーネント単位でのレスポンシブ対応が可能となる。

**画面へのアクセス方法**：MainWindow起動後、左側のHamburgerMenuから「Container Queries」を選択してアクセスする。

**主要な操作・処理内容**：
1. ウィンドウ/コンテナのリサイズによる列数の動的変更
2. 幅400px未満：1列表示
3. 幅400px以上：2列表示
4. 幅800px以上：3列表示
5. 幅1200px以上：4列表示

**画面遷移**：MainViewのHamburgerMenuから遷移してくる。本画面から他画面への直接遷移はない。

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 5 | Control | 主機能 | コンテナクエリのデモ。レスポンシブレイアウト制御 |

## 画面種別

デモ・サンプル画面（Container Query機能の展示）

## URL/ルーティング

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

## 入出力項目

本画面には入出力項目はない。コンテナサイズに応じたレイアウト変更のみ。

## 表示項目

| 要素 | コントロール | 説明 |
|------|--------------|------|
| 説明テキスト | TextBlock | Container Query機能の説明 |
| コンテナ | Border | Container.Name="UniformGrid"、Container.Sizing="Width" |
| グリッド | UniformGrid (ContentGrid) | 列数がContainer Queryで動的に変更 |
| 画像1-7 | Image | 7枚の画像がグリッド内に配置 |

**Container Query設定**:

| クエリ条件 | 列数（Columns） | 説明 |
|-----------|----------------|------|
| max-width:400 | 1 | 幅400px未満は1列 |
| min-width:400 | 2 | 幅400px以上は2列 |
| min-width:800 | 3 | 幅800px以上は3列 |
| min-width:1200 | 4 | 幅1200px以上は4列 |

**表示画像**:
- /Assets/image1.jpg
- /Assets/image2.jpg
- /Assets/image3.jpg
- /Assets/image4.jpg
- /Assets/image5.jpg
- /Assets/image6.jpg
- /Assets/image7.jpg

## イベント仕様

### 1-コンテナサイズ変更

コンテナ（Border）のサイズが変更されると、Container Queryが評価され、UniformGridの列数が動的に変更される。

**処理フロー**:
1. ウィンドウリサイズまたはレイアウト変更
2. BorderのサイズがContainer.Sizing="Width"に基づいて検出
3. 定義されたContainerQueryが順に評価
4. 条件に一致するStyleが適用
5. UniformGrid#ContentGridのColumnsプロパティが更新
6. グリッド内の画像が再配置

**関連XAML** (ContainerQueryPage.xaml:12-39):
```xml
<ContainerQuery Name="UniformGrid" Query="max-width:400">
  <Style Selector="UniformGrid#ContentGrid">
    <Setter Property="Columns" Value="1"/>
  </Style>
</ContainerQuery>
<ContainerQuery Name="UniformGrid" Query="min-width:400">
  <Style Selector="UniformGrid#ContentGrid">
    <Setter Property="Columns" Value="2"/>
  </Style>
</ContainerQuery>
<!-- ... -->
```

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

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

## メッセージ仕様

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

## 例外処理

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

## 備考

- Container.Name="UniformGrid"でコンテナに名前を付与し、ContainerQuery要素で参照
- Container.Sizing="Width"でサイズ監視の対象を幅に限定
- ContainerQueryのQueryはCSSのContainer Queriesに類似した構文（min-width/max-width）
- 複数のContainerQueryが定義可能で、条件に一致するすべてが適用される
- UniformGridのColumnsプロパティで均等列数を制御
- 各画像はBorderでラップされ、CornerRadius=20とClipToBounds=Trueで角丸クリップ

---

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

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

### 推奨読解順序

#### Step 1: Container Query構文を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ContainerQueryPage.xaml | `samples/ControlCatalog/Pages/ContainerQueryPage.xaml` | ContainerQuery要素の定義 |

**読解のコツ**:
- ContainerQueryはStackPanel.Styles内に定義
- Name属性でContainerのContainer.Nameを参照
- Query属性でサイズ条件を指定（min-width:XXX, max-width:XXX）
- 内部のStyleでプロパティを設定

#### Step 2: コンテナ設定を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ContainerQueryPage.xaml | `samples/ControlCatalog/Pages/ContainerQueryPage.xaml` | Border（コンテナ）の設定 |

**主要処理フロー**:
- **行42-45**: Border定義
  - Container.Name="UniformGrid" - ContainerQueryで参照される名前
  - Container.Sizing="Width" - 幅のみを監視

#### Step 3: 対象コントロールを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ContainerQueryPage.xaml | `samples/ControlCatalog/Pages/ContainerQueryPage.xaml` | UniformGrid（対象コントロール）の設定 |

**主要処理フロー**:
- **行49**: UniformGrid定義（Name="ContentGrid"）
- **行50-104**: 7つの画像Border
  - 各BorderはMargin="10"、CornerRadius="20"、ClipToBounds="True"
  - Image.Stretch="Uniform"で画像を均等にスケール

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

```
ContainerQueryPage
    │
    └─ InitializeComponent()
           └─ XAML解析・コントロール初期化
                  │
                  ├─ StackPanel.Styles
                  │      └─ ContainerQuery x 4
                  │             └─ Style → UniformGrid#ContentGrid.Columns
                  │
                  └─ Border (Container)
                         └─ Container.Name="UniformGrid"
                         └─ Container.Sizing="Width"
                                │
                                └─ UniformGrid#ContentGrid
                                       └─ Image x 7
```

### データフロー図

```
[サイズ変更]                   [評価]                          [適用]

Border.Width変更 ───▶ ContainerQuery評価 ───▶ Style適用
                              │
                              ├─ width < 400 → Columns=1
                              ├─ width >= 400 → Columns=2
                              ├─ width >= 800 → Columns=3
                              └─ width >= 1200 → Columns=4
                                       │
                                       ▼
                              UniformGrid再レイアウト
                                       │
                                       ▼
                              画像の再配置
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ContainerQueryPage.xaml | `samples/ControlCatalog/Pages/ContainerQueryPage.xaml` | XAML | 画面レイアウト・ContainerQuery定義 |
| ContainerQueryPage.xaml.cs | `samples/ControlCatalog/Pages/ContainerQueryPage.xaml.cs` | ソース | コードビハインド（初期化のみ） |
| image1.jpg - image7.jpg | `samples/ControlCatalog/Assets/` | 画像 | グリッド内に表示される画像 |
| MainView.xaml | `samples/ControlCatalog/MainView.xaml` | XAML | ナビゲーション元のメインビュー |
