avalonia-layout-zafiro
使用 Zafiro 构建乾淨的 Avalonia UI 佈局
使用語義化容器和共享樣式建立可維護的 Avalonia 應用程式。透過 Zafiro.Avalonia 元件和最佳實踐減少 XAML 冗餘。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「avalonia-layout-zafiro」。 建立一個錢包餘額顯示，包含圖示、標籤和數值
預期結果:
使用 EdgePanel，將 StartContent 用於錢包圖示，Content 用於標籤，EndContent 用於餘額數值。套用 IconOptions.Size 和 IconOptions.Fill 以保持一致的圖示樣式。
正在使用「avalonia-layout-zafiro」。 如何避免重複邊框和顏色設定？
預期結果:
在 Containers.axaml 中定義樣式，使用選擇器 'HeaderedContainer.BlueSection'，使用 DynamicResource 設定 CornerRadius、BorderThickness、BorderBrush 和 Background。透過 Classes='BlueSection' 套用。
安全審計
安全Static analysis detected 100 pattern matches but all are false positives. The skill contains only Markdown documentation files with XAML examples for Avalonia UI development. Detected patterns like backticks are Markdown code fences, not shell execution. No executable code or security risks present.
品質評分
你能建構什麼
桌面應用程式開發者
重構現有的 Avalonia 檢視以使用語義化容器和共享樣式，實現更清晰、可維護的 XAML。
UI 架構師
在大型 Avalonia 程式碼庫中建立一致的 UI 模式，使用 Zafiro 元件和主題組織。
跨平台開發者
學習現代 Avalonia 佈局技術，適用於 Windows、macOS 和 Linux 平台。
試試這些提示
我需要建立一個設定區域，包含標題和內容。我應該使用哪個 Zafiro 容器，如何使用？
展示如何使用 IconExtension 將 FontAwesome 圖示新增至按鈕和標題，並保持一致的樣式。
我在多個 HeaderedContainer 元件中有重複的屬性設定。協助我使用 Classes 將這些擷取到共享樣式中。
我需要在不使用後置程式碼的情況下處理 TextBox 的焦點管理。展示如何使用 Interaction.Behaviors 實現這一點。
最佳實務
- 使用 DynamicResource 處理顏色和畫刷以支援主題切換
- 使用 EdgePanel 扁平化佈局，避免巢狀的 Grid 和 StackPanel 結構
- 將重複的佈局擷取到通用 UserControl 元件中以提高可重用性
避免
- 在檢視 XAML 中直接使用硬編碼顏色或大小，而非使用資源
- 使用多層 Grid 和 StackPanel 建立深層巢狀結構
- 對於應在 ViewModel 中的簡單邏輯使用 IValueConverter