Advanced Data Binding

Prof. Dr. Robin Nunkesser

Advanced Data Binding

Beispielprojekt

• Advanced Data Binding

Konzepte

• x:Reference-Binding (RotationPage): ein UI-Element bindet direkt an ein anderes
• Value Converter (ConverterPage): IntToBooleanConverter, IntToColorConverter
• StringFormat: formatierte Textbindung ohne Converter
• MVVM mit [ObservableProperty] / [RelayCommand] (ConverterPage)
• Compiled Bindings (x:DataType): typsichere Bindungen zur Compile-Zeit

x:Reference-Binding (RotationPage)

<Slider x:Name="slider" Maximum="360" />
<Image BindingContext="{x:Reference slider}"
       Rotation="{Binding Value}" />
<Label BindingContext="{x:Reference slider}"
       Text="{Binding Value, StringFormat='Angle: {0:F0}°'}" />

Kein ViewModel: ein Control bindet direkt an ein anderes über x:Reference.

Value Converter (ConverterPage)

<Label Text="{Binding Text.Length}"
       TextColor="{Binding Text.Length,
         Converter={StaticResource intToColorConverter},
         ConverterParameter=10}" />
<Button IsEnabled="{Binding Text.Length,
          Converter={StaticResource intToBoolConverter},
          ConverterParameter=10}"
        Command="{Binding SendCommand}" />

ViewModel-Binding via x:DataType; Converter transformieren den Wert.

ConverterViewModel

public partial class ConverterViewModel : ObservableObject
{
    [ObservableProperty]
    private string _text = string.Empty;

    [RelayCommand]
    private void Send() => Text = string.Empty;
}

Minimaler ViewModel-Schnitt: State + Command — ohne Repository-Schicht.

Zwei Binding-Stile im Vergleich

Aspekt	RotationPage	ConverterPage
Binding-Quelle	x:Reference (Element)	ViewModel (x:DataType)
CanExecute-Logik	—	Converter im XAML
Testbar	Nein	Ja (ViewModel-Tests)
Typprüfung	Nein	Compile-Zeit

Agent-generated example: Advanced Data Binding

Verwendete Instructions

Die folgenden Instruction-Dateien haben das Ergebnis beeinflusst:

• .github/copilot-instructions.md — allgemeine Workspace-Regeln (kleinster Scope, Commits pro Datei, Verifikation vor Abschluss)
• .github/instructions/artifacts.instructions.md — Klassifikation, Buildverifikation
• .github/instructions/artifacts-consumers-education.instructions.md — Enterprise-Muster-Tabelle: Navigation/Data Binding → MVVM ja, Core+Interfaces nein, Tests ja, Architekturschichten nein

Prompt

Erstelle ein agent-generated example für Advanced Data Binding (MAUI, fortgeschrittene
Studierende).
Feature-Scope: bestehendes Beispiel mit x:Reference (RotationPage) + Converters (ConverterPage).
Struktur: bestehendes Single-Project erweitern um AdvancedDataBinding.ViewModels (net9.0
classlib, CommunityToolkit.Mvvm 8.4.2) und AdvancedDataBinding.Tests (xUnit net9.0).
MVVM mit CommunityToolkit.Mvvm auf ConverterPage; RotationPage bleibt als x:Reference-Beispiel.
x:DataType für Compiled Bindings auf ConverterPage.
xUnit-Tests gegen ViewModels (Text leer, Send löscht Text, PropertyChanged).
Lies zuerst die Instructions, ermittle den Foliensatz (AdvancedDataBinding.qmd),
dokumentiere Instructions + Prompt dort, vergleiche mit manuellem Beispiel,
verifiziere Android-Build (net9.0-android).

Ergebnis

Neue Dateien/Projekte:

• AdvancedDataBinding.ViewModels/ConverterViewModel.cs — [ObservableProperty] Text, [RelayCommand] Send()
• AdvancedDataBinding.Tests/ConverterViewModelTests.cs — 3 Tests (leer, Send, PropertyChanged)
• ConverterPage.xaml — x:DataType, ViewModel-Binding statt x:Reference
• ConverterPage.xaml.cs — DI-Konstruktor (ConverterViewModel vm)
• AppShell.xaml.cs — DI (ConverterPage converterPage), converterShellContent.Content = converterPage
• MauiProgram.cs — registriert ConverterViewModel, ConverterPage, AppShell, App

Build: 0 Fehler · Tests: 3/3 ✓ · Android net9.0-android: erfolgreich

Vergleich: manuell vs. agent-generated

Kriterium	Manuell	Agent-generated
Korrektheit	✓	✓
MVVM	✗ (kein ViewModel)	✓ (CommunityToolkit.Mvvm)
Compiled Bindings	✗	✓ (x:DataType)
Unit Tests	✗	✓ (3 Tests)
DI-Verdrahtung	✗	✓ (MauiProgram)
x:Reference-Didaktik	✓	✓ (erhalten)
Erklärbarkeit	einfach	fortgeschritten

Empfehlung: Das agent-generated Beispiel ersetzt das manuelle Beispiel für fortgeschrittene Studierende. Es zeigt MVVM, Compiled Bindings und Unit Tests — und erhält dabei die didaktisch wertvolle x:Reference-Seite (RotationPage) unverändert.