avalonia-layout-zafiro

Zafiro.Avalonia を使った Avalonia レイアウト

モダンでクリーンかつ保守しやすい Avalonia UI レイアウトを習得しましょう。 セマンティックコンテナ、共有スタイル、最小限の XAML に焦点を当てます。

🎯 選択的読み取りルール

レイアウトの課題に関連するファイルだけを読んでください！

---

📑 コンテンツマップ

ファイル	説明	読むタイミング
themes.md	テーマの構成と共有スタイル	アプリのテーマを設定または改良するとき
containers.md	セマンティックコンテナ（HeaderedContainer、EdgePanel、Card）	ビューやレイアウトを構成するとき
icons.md	IconExtension と IconOptions を使ったアイコンの利用	アイコンを追加またはカスタマイズするとき
behaviors.md	Xaml.Interaction.Behaviors と Converter の回避	複雑なインタラクションを実装するとき
components.md	ジェネリックコンポーネントとネストの回避	再利用可能な UI 要素を作成するとき

---

🔗 関連プロジェクト（模範的な実装）

実際の例については、Angor プロジェクトを参照してください： /mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln

---

✅ クリーンなレイアウトのためのチェックリスト

• セマンティックコンテナを使用しているか？（例：手動でヘッダーを作る Border の代わりに HeaderedContainer を使う）
• 冗長なプロパティを避けているか？ axaml ファイルの共有スタイルを使用してください。
• ネストを最小限にしているか？ EdgePanel やジェネリックコンポーネントを使ってレイアウトをフラットにしてください。
• アイコンは拡張機能経由か？ スタイリングには {Icon fa-name} と IconOptions を使用してください。
• コードビハインドよりビヘイビアを優先しているか？ UI ロジックには Interaction.Behaviors を使用してください。
• Converter を避けているか？ 必要がない限り、ViewModel のプロパティやビヘイビアを優先してください。

---

❌ アンチパターン

やってはいけないこと：

• ビューでハードコードされた色やサイズ（リテラル）を使う。
• Grid と StackPanel を深くネストする。
• 複数の要素で同じ見た目のプロパティを繰り返す（スタイルを使ってください）。
• ViewModel に置くべき単純なロジックに IValueConverter を使う。

推奨事項：

• 色やブラシには DynamicResource を使用する。
• 繰り返し現れるレイアウトはジェネリックコンポーネントに切り出す。
• 一般的な UI パターンには、Zafiro.Avalonia 固有のパネル（EdgePanel など）を活用する。