技能 avalonia-layout-zafiro
📦

avalonia-layout-zafiro

安全

Erstellen Sie saubere Avalonia UI-Layouts mit Zafiro

Erstellen Sie wartbare Avalonia-Anwendungen mit semantischen Containern und gemeinsamen Stilen. Reduzieren Sie XAML-Redundanz mit Zafiro.Avalonia-Komponenten und bewährten Verfahren.

支持: Claude Codex Code(CC)
🥉 74 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“avalonia-layout-zafiro”。 Erstellen Sie eine Wallet-Saldo-Anzeige mit Icon, Beschriftung und Wert

预期结果:

Verwenden Sie EdgePanel mit StartContent für das Wallet-Icon, Content für die Beschriftung und EndContent für den Saldo-Wert. Wenden Sie IconOptions.Size und IconOptions.Fill für konsistentes Icon-Styling an.

正在使用“avalonia-layout-zafiro”。 Wie vermeide ich die Wiederholung von Rahmen- und Farbeinstellungen?

预期结果:

Definieren Sie einen Style in Containers.axaml mit Selektor 'HeaderedContainer.BlueSection', setzen Sie CornerRadius, BorderThickness, BorderBrush und Background mit DynamicResource. Wenden Sie mit Classes='BlueSection' an.

安全审计

安全
v1 • 2/24/2026

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.

6
已扫描文件
300
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
50
社区
100
安全
91
规范符合性

你能构建什么

Desktop-App-Entwickler

Refaktorieren Sie bestehende Avalonia-Ansichten zur Verwendung semantischer Container und gemeinsamer Stile für saubereres, wartbareres XAML.

UI-Architekt

Etablieren Sie konsistente UI-Muster über eine große Avalonia-Codebasis hinweg mit Zafiro-Komponenten und Theme-Organisation.

Cross-Platform-Entwickler

Erlernen Sie moderne Avalonia-Layout-Techniken, die auf Windows, macOS und Linux-Plattformen funktionieren.

试试这些提示

Grundlegende Container-Auswahl
Ich muss einen Einstellungsbereich mit Überschrift und Inhalt erstellen. Welchen Zafiro-Container sollte ich verwenden und wie?
Icon-Integration
Zeigen Sie mir, wie ich FontAwesome-Icons zu Buttons und Überschriften mit IconExtension und konsistentem Styling hinzufüge.
Stil-Extraktion
Ich habe wiederholte Eigenschaftseinstellungen über mehrere HeaderedContainer-Elemente hinweg. Helfen Sie mir, diese mit Classes in einen gemeinsamen Stil zu extrahieren.
Behavior-Implementierung
Ich muss die Fokus-Verwaltung für eine TextBox ohne Code-Behind handhaben. Zeigen Sie mir, wie ich dies mit Interaction.Behaviors implementiere.

最佳实践

  • Verwenden Sie DynamicResource für Farben und Brushes zur Unterstützung des Theme-Wechsels
  • Flachen Sie Layouts mit EdgePanel anstatt verschachtelter Grid- und StackPanel-Strukturen ab
  • Extrahieren Sie wiederholte Layouts in generische UserControl-Komponenten für Wiederverwendbarkeit

避免

  • Verwendung hartkodierter Farben oder Größen direkt im View-XAML anstatt in Ressourcen
  • Erstellung tiefer Verschachtelung mit mehreren Grid- und StackPanel-Ebenen
  • Verwendung von IValueConverter für einfache Logik, die ins ViewModel gehört

常见问题

Was ist Zafiro.Avalonia?
Zafiro.Avalonia ist eine Bibliothek, die verbesserte UI-Komponenten für Avalonia bereitstellt, einschließlich semantischer Container wie HeaderedContainer und EdgePanel, sowie Icon-Verwaltung über IconExtension.
Wie füge ich Zafiro.Avalonia zu meinem Projekt hinzu?
Installieren Sie das Zafiro.Avalonia NuGet-Paket. Referenzieren Sie den Namespace in Ihrem XAML mit xmlns:zafiro='using:Zafiro.Avalonia' oder ähnlich, basierend auf Ihrer Projektstruktur.
Wann sollte ich Behaviors anstelle von Code-Behind verwenden?
Verwenden Sie Interaction.Behaviors für wiederverwendbare UI-Logik wie Fokus-Verwaltung oder Animationen. Dies hält XAML sauber und ermöglicht unabhängiges Testen von UI-Behaviors.
Was ist der Vorteil semantischer Container?
Semantische Container wie HeaderedContainer drücken die Absicht klar aus, reduzieren XAML-Ausführlichkeit und bieten eingebaute Styling-Hooks über Classes für konsistentes Theming.
Wie wechsle ich zwischen hellem und dunklem Theme?
Definieren Sie Farben und Brushes als DynamicResource in Colors.axaml. Referenzieren Sie sie in Stilen. Tauschen Sie Ressourcen-Wörterbücher zur Laufzeit aus, um Themes ohne Neukompilierung von Views zu wechseln.
Kann ich diesen Skill mit bestehenden Avalonia-Projekten verwenden?
Ja. Die Richtlinien gelten für jedes Avalonia-Projekt. Sie können Zafiro-Komponenten und gemeinsame Stilmuster schrittweise übernehmen, während Sie bestehende Views refaktorieren.