XAML Grundlagen Schulung für WPF, WinUI 3, MAUI, Avalonia

Was ist XAML?

• XAML als Auszeichnungssprache für Objektbäume: Markup wird zu .NET-Instanzen
• Warum Markup für die UI-Definition nützlich ist: Trennung von Layout und Logik, Werkzeuge
• Frameworks mit XAML: WPF, WinUI 3, .NET MAUI, Avalonia, Uno; UWP im Wartungsmodus
• Dialekte vergleichen: Avalonia .axaml, WinUI x:Bind, MAUI BindableProperty
• Aufbau einer XAML-Datei: Wurzelelement, x:Class, Code-Behind und partielle Klasse
• Weitere XAML-Konzepte im Überblick: XAML-Compiler, BAML in WPF, XAML-Quellgenerator in MAUI

Werkzeuge für XAML

• XAML-Designer in Visual Studio für WPF; WinUI 3 und MAUI ohne klassischen Designer
• Drag-and-Drop-Bearbeitung im Designer und warum Handarbeit im Code meist sauberer ist
• Designer konfigurieren: Zoom, Raster, Designzeitdaten mit d:DataContext und d:DesignInstance
• XAML-Editor optimieren: IntelliSense, Formatierung, XAML Styler, Einstellungen in Visual Studio und Rider
• Das Eigenschaftsfenster: Werte setzen, Ressourcen zuweisen, Quelle eines Werts erkennen
• XAML Hot Reload, Live Visual Tree und Live Property Explorer beim Debuggen
• Live Preview in Visual Studio für WPF, WinUI 3 und MAUI; Avalonia-Previewer in VS Code, in Rider per Plugin
• Bindungsfehler finden: XAML-Bindungsfehler-Fenster und Trace-Ausgabe

XAML-Namensräume

• Namespace-Prinzipien in XML: URI, Präfix und Standard-Namensraum
• Namespace-Deklarationen in XAML-Dateien: xmlns, xmlns:x und eigene Präfixe
• Namespace-Zuordnung verstehen: XmlnsDefinition bündelt CLR-Namespaces unter einer URI
• Vordefinierte Namensräume: Präsentations-, XAML-, Designer- und Kompatibilitäts-Namensraum
• CLR-Referenzen: clr-namespace:…;assembly=… in WPF und MAUI, using: in WinUI und Avalonia
• Globale XAML-Namensräume in .NET MAUI 10, implizite Namensräume dort noch als Vorschau-Funktion

Die grundlegenden Bestandteile von XAML

• Objektelemente instanziieren: parameterloser Konstruktor, x:Arguments und x:FactoryMethod
• Objektelemente und Eigenschaftsattribute: Werte als Zeichenketten und ihre Umwandlung
• Dieselbe Oberfläche im Code erzeugen: Eigenschaften in C# setzen und mit XAML vergleichen
• Eigenschaftselemente (<Grid.RowDefinitions>) als Alternative zu Attributen
• Ereignisattribute verwenden, um Ereignisse zu abonnieren; Routed Events in WPF
• Ereignisbehandler im Code-Behind schreiben – und wann Commands die bessere Wahl sind
• Namen vergeben mit x:Name und Zugriff aus dem Code-Behind

Inhalte in XAML

• Was Inhalt in XAML bedeutet: ContentProperty und implizite Inhaltseigenschaft
• TextBlock und Inline-Inhalte: Run, Bold, Hyperlink, LineBreak; Span in MAUI
• Layout-Panels: Grid, StackPanel, DockPanel, Canvas und ihre Pendants je Framework
• Komplexe Inhalte in einem ContentControl: Button mit Bild und Text
• Nicht-UI-Typen im ContentControl und automatische Darstellung über DataTemplate
• Listen von Elementen mit ItemsControl, ListBox, ListView und ItemsRepeater anzeigen
• Liste per Binding mit ItemsSource aus einer ObservableCollection füllen
• Elemente mit ListBoxItem auswählbar machen, SelectedItem binden
• Inhalt mit einem Dekorator umhüllen: Border, Viewbox und eigene Decorators

Das Eigenschaftssystem: Abhängigkeitseigenschaften

• Konzept der Abhängigkeitseigenschaften: Werte aus Stil, Bindung, Animation, Vererbung
• Übung: benutzerdefiniertes Sterne-Bewertungs-Steuerelement als UserControl
• Eigene Abhängigkeitseigenschaft registrieren mit Standardwert und Änderungsrückruf
• Gegenstücke: BindableProperty in .NET MAUI, StyledProperty in Avalonia
• Bindung an die Abhängigkeitseigenschaft der Basisklasse und RelativeSource

Dienste des Eigenschaftssystems

• Vererbung von Eigenschaften im Elementbaum: FontSize, DataContext, FlowDirection
• Wie ein Stil Abhängigkeitseigenschaften setzt – und warum lokale Werte gewinnen
• Bindung an ein anderes Element mit ElementName bzw. x:Reference
• Rangfolge der Werte: lokal, Trigger, Template, Stil, geerbt, Standard
• Datenbindung im Detail: Modi, Konverter, UpdateSourceTrigger, kompilierte Bindungen

Angehängte Eigenschaften

• Konzept angehängter Eigenschaften: Grid.Row, Canvas.Left und ihre Registrierung
• Übung: Polar-Panel mit eigener angehängter Eigenschaft für Winkel und Radius
• Tooltips und AutomationProperties als angehängte Eigenschaften für Barrierefreiheit
• Tastaturnavigation mit angehängten Eigenschaften: TabIndex, KeyboardNavigation
• Angehängte Eigenschaften im Grid: Zeilen, Spalten, Spans und SharedSizeGroup
• Attached Behaviors: Verhalten per angehängter Eigenschaft an Steuerelemente koppeln

Typkonverter

• Konzept der Typkonverter: aus "Red" wird ein Brush, aus "10,5" ein Thickness
• Eingebaute Typkonverter auflisten: Farben, Geometrie, GridLength, Bildquellen
• Wie WPF TypeConverter beim Parsen verwendet und was MAUI und WinUI anders machen
• Eigenen Typkonverter erstellen und mit [TypeConverter] an einen Typ binden
• Abgrenzung: Typkonverter beim Parsen vs. IValueConverter in Bindungen

Laufzeitinformationen mit Markup-Erweiterungen

• Was eine Markup-Erweiterung ist: geschweifte Klammern und ProvideValue
• Gängige Markup-Erweiterungen: Binding, StaticResource, x:Static, x:Null, x:Type
• Framework-spezifisch: x:Bind in WinUI, OnPlatform/OnIdiom in MAUI, DynamicResource
• Eigene Markup-Erweiterung erstellen, z. B. für übersetzte Texte
• Parameter an eine eigene Markup-Erweiterung übergeben: Konstruktor- und benannte Argumente, in WinUI 3 nur benannte

XAML-Ressourcen, Styles und Templates

• XAML-Ressourcen und ResourceDictionary: Schlüssel, Typen und Gültigkeitsbereich
• Die Eigenschaft Resources an Fenster, Seiten, Panels und Steuerelementen
• Ressourcen mit StaticResource verwenden; Unterschied zu DynamicResource und ThemeResource
• Stile in Ressourcen: implizite Stile, BasedOn und Selektoren in Avalonia
• Farben und Pinsel in Ressourcen, Hell-/Dunkel-Themes und Fluent-Design-Ressourcen
• Datenquellen in Ressourcen: ObjectDataProvider, CollectionViewSource, ViewModel-Locator
• Datenvorlagen in Ressourcen: DataTemplate, DataType und DataTemplateSelector
• ControlTemplate: Aussehen eines Steuerelements ersetzen, TemplateBinding, Visual States
• Ressourcenhierarchie erforschen: Element, Seite, Anwendung, Theme und System
• Zusammengeführte Ressourcen mit MergedDictionaries und Pack-URIs bzw. ms-appx
• Ressourcendatei zur Laufzeit laden für Themes und dynamische Oberflächen
• Eigenschaftsfenster erkunden: Ressourcen sichtbar machen und Werte nachverfolgen
• Ressourcen mit dem Eigenschaftsfenster erstellen und in Dateien auslagern

XAML mit JetBrains AI in Rider

• Zielframework und XAML-Dialekt in den Kontext geben, damit kein WPF-Trigger in WinUI landet
• Abhängigkeitseigenschaften und BindableProperty generieren lassen, Rückrufe selbst prüfen
• Bindungsfehler aus der Debug-Ausgabe an den Assistenten geben und Korrektur per Hot Reload testen
• Große Ressourcen-Wörterbücher aufräumen lassen: doppelte Schlüssel, ungenutzte Styles finden
• Code-Behind-Logik in Commands und ViewModels verschieben lassen, Verhalten vorher festhalten

Praxisprojekt: Einstellungsdialog mit Themes

• Dialog in WPF mit Grid, ItemsControl und eigenem Sterne-Steuerelement aufbauen
• Styles, ControlTemplates und Farben in zusammengeführte Wörterbücher auslagern
• Hell-/Dunkel-Umschaltung zur Laufzeit über ausgetauschte Ressourcendateien
• Dieselbe Ansicht nach Avalonia oder WinUI 3 übertragen und Unterschiede dokumentieren