imported>TechCorner-Redaktion: Neufassung von "Xamarin: Wartedialog Daten laden": ActivityIndicator, CommunityToolkit.Mvvm, RefreshView

2026-10-14T00:00:00Z

Neufassung von "Xamarin: Wartedialog Daten laden": ActivityIndicator, CommunityToolkit.Mvvm, RefreshView

Neue Seite

{{Steckbrief
| gilt_fuer = .NET MAUI 9/10, CommunityToolkit.Mvvm 8.x
| bereich = Softwareentwicklung
| dauer = ca. 15 Minuten
| rechte = Entwicklungsumgebung
| stand = Oktober 2026
}}
'''Eine Ladeanzeige in .NET MAUI''' zeigt dem Benutzer, dass die App gerade Daten lädt – etwa beim Abruf einer Kundenliste aus dem Netz. Mit einer <code>IsBusy</code>-Eigenschaft im ViewModel und einem daran gebundenen <code>ActivityIndicator</code> entsteht die Anzeige einmal in XAML und funktioniert auf Android, iOS und Windows gleichermaßen. Die frühere Xamarin-Lösung mit getrenntem Code für <code>ProgressBar</code> und <code>UIActivityIndicatorView</code> entfällt.

[[Datei:NET-MAUI-Ladeanzeige.png|thumb|center|750px|Ladeanzeige in .NET MAUI: IsBusy im ViewModel steuert per Binding den ActivityIndicator; finally setzt die Anzeige auch bei Fehlern zurück.]]

== ViewModel mit IsBusy ==
Mit dem '''CommunityToolkit.Mvvm''' erzeugt ein Attribut die Eigenschaften samt Änderungsbenachrichtigung automatisch:
<syntaxhighlight lang="csharp">
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public partial class KundenViewModel(IKundenService kundenService) : ObservableObject
{
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(IsNotBusy))]
private bool isBusy;

[ObservableProperty]
private string? fehlermeldung;

public bool IsNotBusy => !IsBusy;

public ObservableCollection<Kunde> Kunden { get; } = [];

[RelayCommand]
private async Task LadenAsync(int landId)
{
if (IsBusy) return; // Doppelklick verhindern
try
{
IsBusy = true;
Fehlermeldung = null;
Kunden.Clear();
foreach (var k in await kundenService.GetKundenNachLandAsync(landId))
Kunden.Add(k);
}
catch (Exception ex)
{
Fehlermeldung = "Daten konnten nicht geladen werden.";
System.Diagnostics.Debug.WriteLine(ex);
}
finally
{
IsBusy = false; // auch bei Fehlern zurücksetzen
}
}
}
</syntaxhighlight>
Das Attribut <code>[RelayCommand]</code> erzeugt den Befehl <code>LadenCommand</code>; die Methode ist <code>async Task</code> statt <code>async void</code>, damit Ausnahmen nicht verloren gehen.

== Oberfläche in XAML ==
<syntaxhighlight lang="xml">
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:MeineApp.ViewModels"
x:Class="MeineApp.Views.KundenPage"
x:DataType="vm:KundenViewModel">
<Grid>
<CollectionView ItemsSource="{Binding Kunden}"
IsVisible="{Binding IsNotBusy}">

</CollectionView>

<ActivityIndicator IsRunning="{Binding IsBusy}"
IsVisible="{Binding IsBusy}"
Color="{StaticResource Primary}"
HorizontalOptions="Center"
VerticalOptions="Center" />

<Label Text="{Binding Fehlermeldung}" TextColor="Red"
VerticalOptions="End" Margin="16" />
</Grid>
</ContentPage>
</syntaxhighlight>
<code>x:DataType</code> aktiviert '''kompilierte Bindungen''' – schneller und mit Fehlerprüfung beim Build.

=== Laden beim Öffnen der Seite ===
<syntaxhighlight lang="csharp">
protected override async void OnAppearing()
{
base.OnAppearing();
if (BindingContext is KundenViewModel vm && vm.Kunden.Count == 0)
await vm.LadenCommand.ExecuteAsync(49); // Beispiel: Land-ID
}
</syntaxhighlight>

== Alternative: Pull-to-Refresh ==
Für Listen, die der Benutzer selbst aktualisieren soll, ist ein <code>RefreshView</code> oft eleganter – er bringt eine eigene Ladeanimation mit:
<syntaxhighlight lang="xml">
<RefreshView IsRefreshing="{Binding IsBusy}" Command="{Binding LadenCommand}">
<CollectionView ItemsSource="{Binding Kunden}" />
</RefreshView>
</syntaxhighlight>

== Hinweise ==
* '''Nicht <code>Page.IsBusy</code> verwenden:''' Die eingebaute Eigenschaft der Seite ist in .NET MAUI 10 als veraltet markiert. Eine eigene <code>IsBusy</code>-Eigenschaft im ViewModel wie oben ist der empfohlene Weg.
* '''CollectionView statt ListView:''' <code>ListView</code> ist in .NET 10 ebenfalls veraltet.
* '''Lange Vorgänge:''' Bei Ladezeiten über einigen Sekunden zusätzlich einen Abbrechen-Knopf und einen Fortschrittstext anbieten.
* Bei der Entwicklung benutzerfreundlicher Apps unterstützt Sie die [https://www.max-it.de/development/individuelle-softwareentwicklung/ individuelle Softwareentwicklung von m.a.x. it].

== Siehe auch ==
* [[.NET MAUI: MVVM mit dem CommunityToolkit.Mvvm statt MvvmLight]]
* [[Von Xamarin zu .NET MAUI migrieren]]
* [[Dependency Injection]]

== Links und Quellen ==
* [https://learn.microsoft.com/de-de/dotnet/maui/user-interface/controls/activityindicator Microsoft Learn: ActivityIndicator in .NET MAUI]
* [https://www.max-it.de/development/individuelle-softwareentwicklung/ Individuelle Softwareentwicklung und App-Entwicklung von m.a.x. it]

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

.NET MAUI: Ladeanzeige mit ActivityIndicator - Versionsgeschichte

imported>TechCorner-Redaktion: Neufassung von "Xamarin: Wartedialog Daten laden": ActivityIndicator, CommunityToolkit.Mvvm, RefreshView