14. Okt 2024
Lesedauer 12 Min.
MAUI-Tools
Steuerelemente der Community
Nützliche Hilfen für besondere Aufgaben.
dotnetpro
Es gibt kaum eine Microsoft-Technologie, für die die Community keine Bibliothek mit nützlichen Tools bereitstellt. Auch für MAUI [1] gibt es eine Community-Toolkit-Erweiterung, über die zusätzliche Komponenten zur Verfügung stehen [2] [3]. Die Community verpackt darin verschiedene Steuerelemente und Helper, die fortgeschrittene Aufgaben erleichtern.
Das Toolkit einrichten
Im Bereich der Kompatibilität leistet die Community gute Arbeit. Die folgende Aufzählung zeigt die von den jeweiligen Betriebssystemen erwarteten Mindestversionen – lobenswert ist, dass auch Samsungs Smart-TV-Betriebssystem Tizen unterstützt wird, seitdem es mit MAUI-Kompatibilität ausgestattet wurde:- Android ab Version 5.0,
- iOS ab Version 10,
- macOS ab Version 10.15 unter Nutzung von Catalyst,
- Windows 10 ab Version 1809 mit WinUI 3,
- Tizen ab Version 7.0.
Für die Beispiele im Artikel genügt das NuGet-Paket CommunityTookit.Maui (Bild 1)
Autor
Nach dem erfolgreichen Deployen bietet sich eine Neukompilation der Solution an. In manchen Fällen führt diese zu einem Fehler dieser Art: „Ein Downgrade des Pakets Microsoft.Maui.Controls von 8.0.14 auf 8.0.7 wurde festgestellt …“ In diesem Fall kehren Sie zur NuGet-Konsole zurück, wechseln nun aber in den Tab Aktualisierungen. Visual Studio 2022 informiert dort über veraltete Pakete in der Solution und bietet Updates an.Zu beachten ist, dass Sie die in der Fehlermeldung genannte Variante des Pakets auswählen sollten – beim Schreiben des Artikels offerierte Microsoft manche Pakete als Vorabversionen der Version 9.0, die für unsere Experimente nicht geeignet sind.Zum Finalisieren der Integration ist es dann noch erforderlich, im Rahmen der Errichtung der Applikationsstruktur die Methode UseMauiCommunityToolkit aufzurufen. Der nachfolgend gezeigte Code realisiert eine „Baseline“ – wir werden in diesem Artikel an späterer Stelle noch feststellen, dass die Nutzung fortgeschrittener Funktionen das Übergeben von Parametern oder das Aufrufen weiterer Hilfsmethoden voraussetzt:
public static class MauiProgram {
public static MauiApp CreateMauiApp() {
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkit()
.ConfigureFonts(fonts => ... Komponenten per DockLayout organisieren
In praktischen Applikationen wünscht man sich immer wieder ein Layout, das aus Header, Footer sowie links und rechts statisch eingeblendeten Bereichen besteht. Das Community Toolkit entspricht diesen Vorstellungen durch das DockLayout, das seine Steuerelemente nach dem in Bild 2 gezeigten Schema auf dem Bildschirm angeordnet.
Das DockLayout: VerticalSpacing und HorizontalSpacing sorgen für größere Abstände (Bild 2)
Autor
Um das Layout nutzen zu können, wechseln Sie im ersten Schritt zur XAML-Datei des Projekts, zu der folgende Namespace-Deklaration für die im Toolkit enthaltenen Komponenten hinzugefügt wird:
<ContentPage ...
xmlns:toolkit="http://schemas.microsoft.com/
dotnet/2022/maui/toolkit"
x:Class="NMGMauiTKDemo1.MainPage">
Im nächsten Schritt wird das vom Projektgenerator angelegte ScrollView-Control durch folgendes Markup ersetzt:
<toolkit:DockLayout>
<Button toolkit:DockLayout.DockPosition="Top"
Text="Top" HeightRequest="50" />
<Button toolkit:DockLayout.DockPosition="Bottom"
Text="Bottom" HeightRequest="70" />
<Button toolkit:DockLayout.DockPosition="Left"
Text="Left" WidthRequest="80" />
<Button toolkit:DockLayout.DockPosition="Right"
Text="Right" WidthRequest="90" />
<Button Text="Center" />
</toolkit:DockLayout>
Fürs Erste soll das von Microsoft vorgegebene und aus fünf Buttons bestehende Beispiel genügen, weil es die Anordnung der in einem DockLayout enthaltenen Steuerelemente am besten visualisiert. Relevant ist hier vor allem das Attribut toolkit:DockLayout.DockPosition – es legt fest, wo das jeweilige Steuerelement unterzubringen ist. Ohne dieses Attribut ausgestattete Steuerelemente erscheinen in der Mitte.Unbefriedigend ist an der Standardeinstellung der sehr geringe Abstand zwischen den einzelnen Elementen. Für das Beispiel sind die Attribute VerticalSpacing=”10” und HorizontalSpacing=”15” erforderlich, die zur in Bild 2 gezeigten Fensterdarstellung führen:
<toolkit:DockLayout
VerticalSpacing="10"
HorizontalSpacing="15">
<Button toolkit:DockLayout.DockPosition="Top"
Text="Top" HeightRequest="50" />
Angemerkt sei, dass das DockLayoutauch noch einige andere Attribute anbietet. Außerdem ist das Verwenden von Buttons nicht unbedingt erforderlich – es ist erlaubt, andere Steuerelement-Typen oder ganze Unterlayouts in die Layout-Engine einzubinden.
wie alle Betriebssysteme ähnliche Komponenten an. Auch das Community Toolkit offeriert ein Interface zur Vereinheitlichung der Ansprache. Bei seiner Benutzung ist zu beachten, dass es sich dabei um eine Komponente handelt, die – je nach Betriebssystem – unterschiedliche Anpassungen an der Struktur des MAUI-Projektskeletts voraussetzt. Im Allgemeinen ist es vor dem Einbinden einer derartigen Komponente empfehlenswert, die Dokumentation zurate zu ziehen – im Fall des Controls Snackbar präsentiert sich die Situation wie in Bild 3 gezeigt.
Alerts informieren den Benutzer
Als Palm mit OS 4 den Notification Manager einführte, schrieb der PDA-Hersteller auf vielerlei Art und Weise Geschichte. Das System war zur Zentralisierung der Ereignisse befähigt und ersetzte die bisher hauseigenen Alert-Dialoge durch eine vom Betriebssystem bereitgestellte und optisch aus einem Guss erscheinende Variante.Seither bieten so gutwie alle Betriebssysteme ähnliche Komponenten an. Auch das Community Toolkit offeriert ein Interface zur Vereinheitlichung der Ansprache. Bei seiner Benutzung ist zu beachten, dass es sich dabei um eine Komponente handelt, die – je nach Betriebssystem – unterschiedliche Anpassungen an der Struktur des MAUI-Projektskeletts voraussetzt. Im Allgemeinen ist es vor dem Einbinden einer derartigen Komponente empfehlenswert, die Dokumentation zurate zu ziehen – im Fall des Controls Snackbar präsentiert sich die Situation wie in Bild 3 gezeigt.
Snackbar: Dokumentation zum plattformspezifischen Initialisieren des Controls (Bild 3)
Autor
Beim Schreiben dieses Artikels kam es zu Problemen beim Aktivieren der Tabs. Eine Lösung brachte die Anleitung unter [4]. Unter Windows ist folgende Anpassung erforderlich:
var builder = MauiApp.CreateBuilder();
builder.UseMauiApp<App>()
.UseMauiCommunityToolkit(options => {
options.SetShouldEnableSnackbarOnWindows(true);
}).ConfigureFonts(fonts => ...
Außerdem ist die Deklaration einer Permission erforderlich: Aus Platzgründen werden die (umfangreichen, aber simplen) Anpassungen an der Manifest-Datei hier nicht abgedruckt – Sie finden sie jedoch innerhalb des Quellcodes in den Downloads zum Artikel. Zu beachten ist zudem, dass das von Microsoft online zur Verfügung gestellte Sample nicht vollständig ist. Das Attribut com:ExeServer muss angepasst werden – wer den vom Autor vorgegebenen Projektnamen übernimmt, kann dabei so vorgehen:
<!-- Register COM CLSID -->
<com:Extension Category="windows.comServer">
<com:ComServer>
<com:ExeServer Executable=
"NMGMauiTKDemo1\NMGMauiTKDemo1.exe"
DisplayName="$targetnametoken$"
Arguments="----AppNotificationActivated:">
<!-- Example path to executable:
NMGMauiTKDemo1\NMGMauiTKDemo1.exe -->
<com:Class Id=”6e919706-2634-4d97-a93c-
2213b2acc334” />
</com:ExeServer>
Nach den erfolgreichen Anpassungen an der Manifest-Datei erhält einer der Buttons einen Eventhandler, der nach folgendem Schema mit dem Erzeugen der in der Snackbar anzuzeigenden Elemente beginnt:
private void Button_Clicked(object sender, EventArgs e)
{
CancellationTokenSource cancellationTokenSource =
new CancellationTokenSource();
string text = "Welcome to Snackbar!";
string actionButtonText = "Bar hat zu!";
Action action = async () =>
await DisplayAlert("ActionButton Tapped",
"ActionButton!", "OK");
TimeSpan duration = TimeSpan.FromSeconds(30);
Die erste Methode hat die Aufgabe, das als Attributsammlung vorliegende SnackBar-Steuerelement in eine für das Toolkit bekömmliche Form zu bringen. Der Aufruf DisplayAlert kümmert sich dann um die eigentliche Anzeige, die asynchron erfolgt – wäre der Eventhandler als asynchron deklariert, so könnten wir das Verschwinden und/oder Abnicken durch await abwarten.Das Beispiel ignoriert das SnackbarOptions-Objekt fürs Erste – es würde das Festlegen von Farben und sonstigen Attributen erlauben. Die eigentliche Aktivierung erfolgt dann so:
var snackbar = Snackbar.Make(
text, action, actionButtonText, duration);
snackbar.Show(cancellationTokenSource.Token);
}
Die Ergebnisse präsentiert Windows so, wie es in Bild 4 zu sehen ist. Interessant ist, dass unter Android keine Betriebssystemkomponenten zum Einsatz kommen. Die Programmausführung führt stattdessen zu dem im Bild 5 gezeigten Ergebnis. Als nächstes Experiment bietet sich die Verwendung der Klasse SnackbarOptions an, die unter anderem das Festlegen verschiedener Anzeigefarben erlaubt. Im Beispiel lässt sie sich nach folgendem Schema integrieren:
Unter Windows integriert sich die Snackbar in den Notification-Start des Betriebssystems (Bild 4)
Autor
Unter Android kommt zur Snackbar-Anzeige hauseigenes Markup zum Einsatz (Bild 5)
Autor
var snackbarOptions = new SnackbarOptions {
BackgroundColor = Colors.DeepPink,
TextColor = Colors.AliceBlue
};
var snackbar = Snackbar.Make(text, action,
actionButtonText, duration, snackbarOptions);
Unter Windows bleibt das Ergebnis der Programmausführung unverändert, die erzeugte Nachricht sieht nach wie vor wie in Bild 4 aus. Unter Android ist die Änderung jedoch deutlich sichtbar, siehe Bild 6.
Microsofts Rendering-Logik berücksichtigt die angelieferten Attribute unter Android (Bild 6)
Autor
Toasts
Die Android-spezifische Variante der soeben vorgeführten Notification ist der Toast: ein auf der Unterseite des Bildschirms aufpoppendes Fenster mit Text-Informationen. Analog zur Realisierung einer plattformunabhängigen Schnittstelle für die SnackBar setzt Microsoft beim Toast Ähnliches um: Unter Android und teilweise unter Tizen kommt das native API zum Einsatz, während iOS, Mac und Windows „selbst geschriebene“ Anzeigen verwenden.Wie diese Systeme funktionieren, wird im nächsten Schritt untersucht. Kehren Sie dafür zur XAML-Datei zurück und erweitern Sie das Markup um einem weiteren Button mit dem folgenden Code:
private void ButtonToast_Clicked(
object sender, EventArgs e)
{
CancellationTokenSource cancellationTokenSource =
new CancellationTokenSource();
string text = "Testmeldung der NMG!";
ToastDuration duration = ToastDuration.Long;
double fontSize = 20;
var toast =
Toast.Make(text, duration, fontSize);
toast.Show(cancellationTokenSource.Token);
}
Der Aufbau dieser Methode bietet Bekanntes: Der Code beginnt mit der Auflistung der Eigenschaften, die danach kombiniert zur Anzeige gebracht werden.Gut erkennbar ist, dass sich das Verhalten des Programms unter Windows und Android – wie in Bild 7 und Bild 8 gezeigt – deutlich unterscheidet.
Unter Windows wird der Toast zu einer normalen Notification ... (Bild 7)
Autor
... während er unter Android die Betriebssystemkomponente nutzt (Bild 8)
Autor
Badge: bequemes Einblenden von Mitteilungen im Programmstarter
Ein interessantes Feature, das unter Palm OS einst von Drittanbieter-Programmstartern eingeführt wurde, war die Notification Bubble. Das war eine Anzeige, die neben dem Symbol im Programmstarter eingeblendet wurde und den Nutzer darüber informiert hat, wie viele Ereignisse in der Applikation auf ihn warten.Problematisch ist im Fall von Android, dass es sehr viele unterschiedliche Implementierungen gibt – da Google im Betriebssystem keine gemeinsame Schnittstelle avisiert, implementiert jeder Anbieter, was ihm geeignet erscheint.Mit der Badge-Klasse versucht das .NET Community Toolkit, bis zu einem gewissen Grad Abhilfe zu schaffen; quasi nebenbei gibt es auch Unterstützung für die in iOS und Tizen enthaltenen Betriebssystemdienste.Aus der Logik der engen Betriebssystemintegration folgt, dass im ersten Schritt Anpassungen an der Applikationsstruktur erforderlich sind. Im Fall von Android gilt, dass für jedes System beziehungsweise für jeden Programmstarter eine spezifische Implementierung erforderlich ist.Hier werden schematisch die Möglichkeiten für den Samsung-Launcher durchdekliniert. Im ersten Schritt ist es erforderlich, im Rahmen der CreateMauiApp-Funktion einen Service zu schreiben:
public static MauiApp CreateMauiApp()
{
...
builder.Services.AddSingleton<
IBadge>(Badge.Default);
return builder.Build();
}
Für die Interaktion mit dem Badge beziehungsweise das Festlegen der intern anzuzeigenden Anzahl ist Dependency Injection erforderlich – eine Beispiel-Implementierung sieht wie folgt aus:
public partial class MainPage :
ContentPage
{
private readonly IBadge badge;
public MainPage(IBadge badge) {
InitializeComponent();
this.badge = badge;
}
public void SetCount(uint value) {
badge.SetCount(value);
}
}
Zur Inbetriebnahme wird eine Instanz der Klasse IBadgeProvider benötigt, die sich um das Exponieren der Werte kümmert. Eine Beispiel-Implementierung für Samsung findet sich unter [5]. Zudem sind Anpassungen an der Manifest-Datei und am Einsprungpunkt der Applikation erforderlich. Da Microsoft selbst in der Dokumentation auf die Komplexität dieses Features hinweist (Bild 9), sollte man Vorsicht walten lassen – implementieren Sie dieses API also nur, wenn Sie unbedingt müssen.
Das Entwicklerteam warnt vor seiner eigenen Funktion (Bild 9)
Autor
Eine Datei per DrawingView speichern
Ein Nebeneffekt der stringenter werdenden Sicherheitsanforderungen im Bereich der Handcomputer ist, dass der Zugriff auf das Dateisystem von Telefon und Co. bei den meisten Betriebssystemen nicht zulässig ist. Möchte man eine Datei in ein für den Benutzer zugängliches Verzeichnis speichern, artet dies in Arbeit aus.Mit der FileSaver-Klasse stellt das MAUI Community Toolkit einen Workaround zur Verfügung, der diese lästige Aufgabe zu erleichtern sucht. Für einen Test wird ein neues Projekt erzeugt – die Konfiguration erfolgt gemäß den weiter oben besprochenen Anweisungen.Da das Speichern arbiträrer Testtexte nur wenig interessant ist, soll zur Illustration der Möglichkeiten das Steuerelement DrawingView eingebunden werden, das Microsoft eigentlich für das Erfassen von Unterschriften vorgesehen hat. Im Beispielprogramm wird damit eine Art Notizblock realisiert, in dem sich der Benutzer mit Stift, Finger oder Maus austoben darf. Vorteilhaft ist, dass Microsofts Entwicklerteam einen bequemen Weg zum Übernehmen der gezeichneten Grafiken zur Verfügung stellt.Nach dem Einbinden der NuGet-Pakete ist es wichtig, zur Manifestdatei zu wechseln und die folgenden Erlaubnisse (Permissions) einzufügen. Wer außer Android und Windows auch andere Betriebssysteme ansprechen möchte, findet die nötigen Modifikationen – wie immer – in der Dokumentation des Community Toolkits:
<uses-permission android:name=
"android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:
name="android.permission.WRITE_EXTERNAL_STORAGE" />
Im nächsten Schritt wird eines der in der MAUI-Bibliothek enthaltenen Steuerelemente aktiviert. Dazu wechseln Sie zur XAML-Datei, die zunächst die von weiter oben bekannten Namespace-Erweiterungen aufnimmt. Nach dem Anpassen der Namespace-Deklarationen ergänzen Sie das Formular um die Deklaration einer neuen DrawingView:
<ContentPage ...
xmlns:toolkit=
"http://schemas.microsoft.com/
dotnet/2022/maui/toolkit"
x:Class="NMGMauiTKDemo2.MainPage">
<VerticalStackLayout>
<toolkit:DrawingView
Lines="{Binding MyLines}"
LineColor="Red"
LineWidth="5"
DrawingLineCompleted=
"DrawingView_DrawingLineCompleted"
BackgroundColor="BlueViolet"
MinimumWidthRequest="90"
MinimumHeightRequest="300"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
<Button x:Name="CmdSave" Text="Save"
HorizontalOptions="End"
IsEnabled="False" />
</VerticalStackLayout>
Hingewiesen sei darauf, dass das Entwicklerteam die Benennung der Eigenschaften verändert hat. Im Codebeispiel wird die Eigenschaft DrawingLineCompleted gerne noch unter dem alten Namen OnDrawingLineCompleted geführt – wer die für .NET 8.0 vorgesehene Version des Toolkits verwendet, muss die neue Benennung auswählen.Dass der Button zunächst abgeschaltet ist (IsEnabled = ”False”) ist insofern sinnvoll, als diese Funktion erst nach dem Einpflegen von Grafikinformationen in der DrawingView freigegeben werden soll. Hierzu reicht es aus, den Eventhandler nach folgendem Schema zu adaptieren:
private void DrawingView_DrawingLineCompleted(
object sender, CommunityToolkit.Maui.Core.
DrawingLineCompletedEventArgs e)
{
CmdSave.IsEnabled = true;
}
An dieser Stelle ist das Programm für eine erste Ausführung bereit. Problematisch ist im gegenwärtigen Zustand noch, dass das Schreiben von mehreren Buchstaben nicht funktioniert – Bild 10 zeigt, dass in der derzeitigen Konfiguration immer nur die zuletzt gezeichnete Linie in der DrawingView sichtbar ist.
Die DrawingView zeigt nur die zuletzt gezeichnete Linie (Bild 10)
Autor
Dieses Problem ist jedoch leicht zu beseitigen: Wir setzen einfach die Eigenschaft IsMultiLineModeEnabled auf True:
<toolkit:DrawingView
...
DrawingLineCompleted=
"DrawingView_DrawingLineCompleted"
BackgroundColor="BlueViolet"
IsMultiLineModeEnabled="True"
Im nächsten Schritt geht es darum, den Eventhandler anzupassen, der nach dem Anklicken des Save-Buttons ausgeführt wird:
private async void CmdSave_Clicked(...)
{
var cts = new CancellationTokenSource();
var stream = await DrawingView.GetImageStream(
DrawView.Lines, new Size(DrawView.Height,
DrawView.Width), Colors.Gray.AsPaint(), cts.Token);
Die erste Aktion des Codes ist das Umwandeln der in der DrawingView angelegten Bildinformationen in einen Stream. Zu beachten ist, dass die Dokumentation in diesem Bereich veraltet ist – es ist unbedingt erforderlich, Höhe und Breite über ein Size-Objekt anzuliefern. Der Colors-Parameter kümmert sich um die Hintergrundfarbe.Zu beachten ist außerdem, dass die in der Klasse vorliegenden Informationen als „Linienzüge“ betrachtet werden und die auf dem Bildschirm angezeigten Inhalte nicht als Bitmap zur Verfügung stehen. Stattdessen ist immer die Methode GetImageStream erforderlich.Im nächsten Schritt folgt der von Microsoft bereitgestellte Code, der sich um das Speichern der Ergebnisse im Dateisystem und die Analyse der aufgetretenen Ereignisse kümmert:
var fileSaverResult =
await FileSaver.Default.SaveAsync(
"", "test.bmp", stream, cts.Token);
if (fileSaverResult.IsSuccessful)
{
await Toast.Make(
$"The file was saved successfully to location:
{fileSaverResult.FilePath}").Show(cts.Token);
}
else
{
await Toast.Make($"The file was not saved successfully
with error: {fileSaverResult.Exception.Message}")
.Show(cts.Token);
}
Zu beachten ist, dass sich der FileSaver auch um das Herausschreiben der Informationen kümmert. Vor dem Aufruf der Methode SaveAsync ist es erforderlich, die im Dateisystem abzulegenden Informationen in Form eines .NET-Streams bereitzuhalten.Bevor sich das Beispielprogramm ausführen lässt, muss dem Steuerelement im XAML-Code noch ein Name zugewiesen werden, falls das noch nicht geschehen ist:
<toolkit:DrawingView
...
x:Name="DrawView" />
Danach lässt sich das Programmbeispiel unter Windows ausführen. Es erscheint der bekannte Dialog, der den Benutzer zum Auswählen eines Speicherorts auffordert. Das manuelle Öffnen der Datei im Preview-System führt dann zum in Bild 11 gezeigten Ergebnis.
Die Bildschirmeingabe (oben) und der unter Windows gelesene Datei-Inhalt (rechts) (Bild 11)
Autor
Interessanter ist die Frage, wie sich das Programm unter Android verhält. Visual Studio blendet im Bezug auf die Methode SaveAsync eine Warnung ein, die als Mindest-API-Level 26 avisiert – die zu Beginn ausgesprochene Feststellung, dass das Toolkit Android ab Version 5 unterstützt, ist also nur unter Vorbehalt gültig. Immerhin präsentiert ein unter Android 14 laufender Emulator nach dem Anklicken das in Bild 12 abgedruckte Ergebnis.
Android 14: Das MAUI Community Toolkit erleichtert das Speichern von Dateien erheblich (Bild 12)
Autor
Ordnerauswahl
Während sich die FileSaver-Klasse um das Ablegen von Elementen im Dateisystem kümmert, steht mit dem FolderPicker eine Klasse zum Öffnen von Verzeichnissen zur Verfügung. Ihre Nutzung setzt auf den Handcomputerbetriebssystemen ebenfalls Modifikationen im Bereich der Permission-Struktur voraus, die hier allerdings nicht besprochen werden. Zur Aktivierung des neuen Helferleins ist es erforderlich, einen weiteren Button in der XAML-Datei anzulegen. Da sein Verhalten nicht von der DrawingView abhängig ist, ist es nicht notwendig, das Attribut zur Deaktivierung zu verwenden:
<Button x:Name="CmdLoad" Text="Load"
HorizontalOptions="End"
Clicked="CmdLoad_Clicked" />
Analog zur weiter oben implementierten Speicherung ist es auch hier notwendig, einen asynchronen Eventhandler mit dem Button zu verbinden:
private async void CmdLoad_Clicked(...)
{
var cts =
new CancellationTokenSource();
var result = await
FolderPicker.Default.PickAsync(
cts.Token);
if (result.IsSuccessful) {
await Toast.Make(
$"The folder was picked:
Name - {result.Folder.Name},
Path - {result.Folder.Path}",
ToastDuration.Long).Show(
cts.Token);
}
else
{
await Toast.Make(
$"The folder was not picked with error:
{result.Exception.Message}").Show(cts.Token);
}
}
Unter Windows führt das Anklicken des Buttons zum Erscheinen des Dialogs, in dem der Benutzer einen beliebigen Ordner auswählen darf. Unter Android ist das Systemverhalten insofern interessant, als sich nicht alle Ordner auch ansprechen lassen. Das Betriebssystem weist darauf allerdings hin, siehe Bild 13 und Bild 14.
Ist ein Ordner nicht ansprechbar, zeigt Android eine Warnung an (Bild 13)
Autor
In ansprechbaren Ordnern verhält sich der FolderPicker wie ein CommonDialog (Bild 14)
Autor
Und jetzt mit Avatar
Zu guter Letzt soll in diesem Artikel noch ein hilfreiches Steuerelement folgen: Mit AvatarView steht ein Widget zur Verfügung, das auf die Anzeige von Avatar-Informationen spezialisiert ist:
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
<StackLayout>
<toolkit:AvatarView Text="TH"
BackgroundColor="Blue" />
</StackLayout>
Das Ergebnis unserer Bestrebungen ist dann das Erscheinen des in Bild 15 gezeigten Programmverhaltens. Nützlich ist die Möglichkeit, die im Avatar-Steuerelement anzuzeigenden Informationen aus einem URL zu beziehen. Hierzu genügt es, die ImageSource nach folgendem Schema festzulegen:
Avatar: Die Initialen des Anwenders erscheinen mit rundem Hintergrund (Bild 15)
Autor
<toolkit:AvatarView ImageSource=
"https://aka.ms/campus.jpg"
Text="IS"
/> Die Toolkit-Beispielapplikation
Das MAUI Community Tookit in einem einzelnen Artikel vorstellen zu wollen ist illusorisch. In der Vergangenheit begegneten die Entwickler des Toolkits dieser Problematik durch Beispiel-Apps, die sie in den App Stores der jeweiligen Plattformen vertrieben. Dies ist insofern unkomfortabel, als Änderungen im Toolkit-Code das erneute Hochladen der App erfordern. Besitzer aktueller Versionen von Visual Studio können dieses Problem allerdings bequem umgehen – nach dem Start der Welcome Experience wählen Sie in der Rubrik Los geht’s die Option Repository klonen aus, um den Assistenten zum „Rehydrieren“ von in einer Versionsverwaltung abgelegtem Code zu aktivieren.Im Fall des Beispielcodes lautet der korrekte URL https://github.com/CommunityToolkit/Maui.git – nach der Eingabe parametriert Visual Studio den Projektspeicherort automatisch.Wichtig: Für die Nutzung der GitHub-Rehydrationsfunktion sind ausschließlich URLs nach dem Schema https://github.com/CommunityToolkit/Maui.git zulässig, also mit der Endung .git ausgestattete URLs. Wer einen Pfad benutzt wie etwa https://github.com/CommunityToolkit/Maui/tree/main, wird von Visual Studio mit einer Fehlermeldung abgespeist.Hat alles geklappt, fordert der Projektmappen-Explorer zur Auswahl der gewünschten Solution auf, wie in Bild 16 zu sehen ist. Für unsere Anforderungen lautet die korrekte Auswahl Sample.sln – danach wird das Projekt geladen und lässt sich ausführen.
Visual Studio 2022 kommt nicht ins Straucheln, wenn ein Repository mehrere Solutions enthält (Bild 16)
Autor
Bei der Rehydrierung von in GitHub enthaltenen Projekten kommt es mitunter zu Fehlern, die auf das gescheiterte Auflösen der verwendeten .NET-Version hinweisen. Weitere Informationen zur Behebung dieses Fehlers finden Sie unter [6]. Normalerweise ist das Programm danach zur Ausführung bereit und erlaubt das Experimentieren mit den diversen Komponenten.
Fazit
Mit dem MAUI Community Toolkit bietet die Entwicklergemeinde verschiedene Komponenten an, die bei der Arbeit mit MAUI-Projekten hilfreich sind. Obwohl dieser Artikel nur einen vergleichsweise kleinen Teil der Möglichkeiten vorstellen konnte, gilt, dass der Werkzeugkasten nicht auf MVVM beschränkt ist – wer nur diese Funktion nutzen würde, lässt wertvolle Features ungenutzt.Fussnoten
- .NET MAUI, http://www.dotnetpro.de/SL2410MAUICommKit1
- GitHub, .NET MAUI Community Toolkit, http://www.dotnetpro.de/SL2410MAUICommKit2
- MS Learn, .NET MAUI Community Toolkit, http://www.dotnetpro.de/SL2410MAUICommKit3
- Snackbar plattformspezifisch einrichten, http://www.dotnetpro.de/SL2410MAUICommKit4
- Samsung Badge-Provider, http://www.dotnetpro.de/SL2410MAUICommKit5
- Unable to resolve the .NET SDK Version, http://www.dotnetpro.de/SL2410MAUICommKit6
