Quelltext der Seite .NET MAUI: MVVM mit dem CommunityToolkit.Mvvm statt MvvmLight

{{Steckbrief
| gilt_fuer   = .NET MAUI 9/10, CommunityToolkit.Mvvm 8.x; Migration von MvvmLight (Xamarin)
| bereich     = Softwareentwicklung
| dauer       = ca. 30 Minuten (Einstieg), Migration je nach Projektgröße
| rechte      = Entwicklungsumgebung
| stand       = Oktober 2026
}}
'''MVVM in .NET MAUI''' setzen Sie heute mit dem '''CommunityToolkit.Mvvm''' um – dem offiziellen Nachfolger von MvvmLight. Die früher unter Xamarin typischen Probleme mit MvvmLight-Bindings, die beim Navigieren „hängen bleiben“ oder Daten verspätet anzeigen, entfallen: .NET MAUI bindet über den <code>BindingContext</code> der Seite, und das Toolkit erzeugt Eigenschaften und Befehle per Quellcode-Generator.

[[Datei:NET-MAUI-MVVM-CommunityToolkit.png|thumb|center|750px|MVVM in .NET MAUI mit dem CommunityToolkit.Mvvm und die wichtigsten Entsprechungen beim Umstieg von MvvmLight.]]

== Problem ==
* In einer Xamarin-App mit '''MvvmLight''' werden Daten nicht oder verspätet angezeigt; nach mehrfachem Navigieren reagieren Bindings doppelt oder gar nicht.
* MvvmLight wird seit 2021 nicht mehr weiterentwickelt und ist für .NET MAUI nicht vorgesehen.

== Ursache ==
MvvmLight verwendete unter Xamarin.Android und Xamarin.iOS eigene Binding-Objekte, die je nach Lebenszyklus manuell gelöst werden mussten (<code>Detach()</code> in <code>OnStop</code> bzw. <code>ViewDidDisappear</code>). Wurde das vergessen, blieben Bindings am ViewModel hängen – mit Speicherlecks und doppelten Aktualisierungen. In .NET MAUI übernimmt das XAML-Binding-System diese Aufgabe.

== Lösung: CommunityToolkit.Mvvm ==
<syntaxhighlight lang="bash">
dotnet add package CommunityToolkit.Mvvm
</syntaxhighlight>

=== ViewModel ===
<syntaxhighlight lang="csharp">
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public partial class AuftragViewModel : ObservableObject
{
    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(SpeichernCommand))]
    private string? kunde;

    [ObservableProperty]
    private decimal betrag;

    [RelayCommand(CanExecute = nameof(KannSpeichern))]
    private async Task SpeichernAsync()
    {
        await Task.Delay(500);   // z. B. Service-Aufruf
    }

    private bool KannSpeichern() => !string.IsNullOrWhiteSpace(Kunde);
}
</syntaxhighlight>
Der Generator erzeugt die öffentlichen Eigenschaften <code>Kunde</code> und <code>Betrag</code> mit <code>PropertyChanged</code> sowie den Befehl <code>SpeichernCommand</code>.

=== Seite und Dependency Injection ===
<syntaxhighlight lang="csharp">
// MauiProgram.cs
builder.Services.AddTransient<AuftragViewModel>();
builder.Services.AddTransient<AuftragPage>();

// AuftragPage.xaml.cs
public partial class AuftragPage : ContentPage
{
    public AuftragPage(AuftragViewModel vm)
    {
        InitializeComponent();
        BindingContext = vm;
    }
}
</syntaxhighlight>
<syntaxhighlight lang="xml">
<ContentPage ... x:DataType="vm:AuftragViewModel">
    <VerticalStackLayout Padding="16" Spacing="8">
        <Entry Text="{Binding Kunde}" Placeholder="Kunde" />
        <Entry Text="{Binding Betrag}" Keyboard="Numeric" />
        <Button Text="Speichern" Command="{Binding SpeichernCommand}" />
    </VerticalStackLayout>
</ContentPage>
</syntaxhighlight>

== Von MvvmLight umsteigen ==
{| class="wikitable"
! MvvmLight !! CommunityToolkit.Mvvm
|-
| <code>ViewModelBase</code> || <code>ObservableObject</code>
|-
| <code>Set(ref feld, wert)</code> / <code>RaisePropertyChanged()</code> || <code>[ObservableProperty]</code> bzw. <code>SetProperty(ref feld, wert)</code>
|-
| <code>RelayCommand</code>, <code>RelayCommand<T></code> || <code>[RelayCommand]</code>, auch async mit <code>AsyncRelayCommand</code>
|-
| <code>Messenger.Default</code> || <code>WeakReferenceMessenger.Default</code>
|-
| <code>SimpleIoc</code> / <code>ViewModelLocator</code> || Dependency Injection über <code>builder.Services</code>
|-
| <code>SetBinding</code>/<code>Detach()</code> in Activity/ViewController || XAML-Binding über <code>BindingContext</code>, kein manuelles Lösen
|-
| Xamarin.Forms <code>MessagingCenter</code> || <code>WeakReferenceMessenger</code>
|}

== Hinweise ==
* '''Kompilierte Bindungen:''' <code>x:DataType</code> auf Seiten und DataTemplates setzen – Tippfehler in Bindungen fallen dann schon beim Build auf.
* '''Messenger und Speicher:''' Der <code>WeakReferenceMessenger</code> hält Empfänger nur schwach; trotzdem Empfänger bei langlebigen Objekten mit <code>UnregisterAll(this)</code> abmelden.
* '''Plattformcode:''' Wer in .NET for Android/iOS ohne XAML arbeitet, kann das Toolkit für ViewModels ebenfalls nutzen; die Bindung an native Controls erfolgt dann über <code>PropertyChanged</code>-Ereignisse – an den passenden Lebenszyklus-Methoden an- und abmelden.
* Bei Architektur und Modernisierung Ihrer Apps unterstützt Sie die [https://www.max-it.de/development/individuelle-softwareentwicklung/ individuelle Softwareentwicklung von m.a.x. it].

== Siehe auch ==
* [[.NET MAUI: Ladeanzeige mit ActivityIndicator]]
* [[Von Xamarin zu .NET MAUI migrieren]]
* [[Dependency Injection]]
* [[Lokale Funktionen in C-Sharp (Local Functions)]]

== Links und Quellen ==
* [https://learn.microsoft.com/de-de/dotnet/communitytoolkit/mvvm/ Microsoft Learn: MVVM Toolkit (CommunityToolkit.Mvvm)]
* [https://www.max-it.de/development/individuelle-softwareentwicklung/ Individuelle Softwareentwicklung und App-Entwicklung von m.a.x. it]

{{Uebermax}}
[[Kategorie:Softwareentwicklung]]