#7 | Icons und Symbole leicht gemacht
Im letzten Artikel deutete ich an, dass es unter .NET MAUI noch weitere Möglichkeiten gibt Icons und Symbole in eine App einzubinden. In meinen Augen die beste Variante neben IconFonts und deren Glyphs ist das NuGet-Package MauiIcons von Aathif Mahir.
Eine weitere Abhängigkeit?
Als ein iOS-Entwickler wie ich am Tage bin, muss man bei MAUI akzeptieren viel mehr externe Abhängigkeiten und Pakete für auf den ersten Blick alltägliche Aufgaben zu installieren als man es aus dem Swift-Ökosystem gewohnt ist.
Man darf hierbei eines nicht vergessen: MAUI ist multiplatform. Somit muss das Framework Bilder, Icons und Co. für alle Zielplattformen bereitstellen. Diese komplexe Logik wird meist in externe Abhängigkeiten ausgelagert — wie in unserem Fall dem einfachen Zugriff auf Icons.
1. Installation
Aathif hat MauiIcons in etliche Pakete aufgeteilt um auf eine modulare Weiße nur die benötigten Daten einzubinden welche nötig sind. Neben dem Core -Paket stehen folgende NuGet-Packages stehen mit dem jeweiligen AathifMahir.Maui.MauiIcon-Prefix zur Verfügung:
- *.Core — Grundpaket welches immer installiert wird
- *.Cupertino.* —SFSymbols Icons
- *.Material.* — Material Design Icons
- *.Fluent.* — Windows Icons
- *.FontAwesome.* — FontAwesome (Web) Icons
Nach dem Hinzufügen der Pakete muss im der Application-Klasse der Builder um MauiIcons erweitert werden.
// Use MauiIcons packages
builder.UseCupertinoMauiIcons()
.UseMaterialMauiIcons()
.UseMaterialOutlinedMauiIcons()
.UseFontAwesomeMauiIcons()
.UseFontAwesomeBrandMauiIcons()
.UseFontAwesomeSolidMauiIcons()
.UseFluentMauiIcons();Hierbei muss natürlich nur das .Use* Statement aufgerufen werden für die Art von Symbole welche die App benötigt.
Somit steht nun der Verwendung der Library in der MAUI-App nichts mehr im Wege.
2. Verwendung
Wie immer können Komponenten in MAUI in *.xaml aber auch in der jeweiligen C# Code-Behind-Datei in *.cs verwendet werden.
XAML
Nach der Einbindung des Namespaces von MauiIcons können die Kompenten und Funktionen aus dem Paket verwendet werden. Hierbei ist zu beachten, dass egal welches Icon-Package verwendet wird, der Namespace ist immer der gleiche.
xmlns:mi="http://www.aathifmahir.com/dotnet/2022/maui/icons"Anschließend können die Icons in verschiedenen MAUI-Elementen eingebunden werden — wie auch die im letzten Artikel erwähnten IconFonts.
<!-- Als Bild -->
<Image Aspect="Center"
Source="{mi:Cupertino Icon=ArchiveboxFill}"/>
<!-- Als "Text" -->
<Label Text="{mi:Cupertino Icon=ArchiveboxFill}"/>In meinen Augen einer der größten Vorteile für Entwickler ist die Typsicherheit. Zu mindestens JetBrains Rider zeigt eine Autovervollständigung für zur Verfügung stehenden Namen der Icons.
Wer mehr als nur simple Bildchen benötigt kann mittels der MauiIcon -Komponente mehr Funktionalität in die App bringen.
Diese erlaubt es beispielsweise mittels der Attributfamilie IconSuffix* unter anderem ein Text nachgestellt zum Icon zu stellen, dieses einzufärben und weitere Eigenschaften einzustellen.
<mi:MauiIcon Icon="{mi:FontAwesomeBrand Icon=Github}"
VerticalOptions="Center"
IconSuffixTextColor="Purple"
IconSuffix="Fork me"
IconSuffixFontSize="24" />Einfache “In”-Animationen sind ebenso möglich. Hierzu stehen die Typen “Fade”, “Rotate” und “Scale” zur Verfügung.
<mi:MauiIcon Icon="{mi:Cupertino Airplane}"
EntranceAnimationType="Rotate"/>Die Komponente besitzt noch keine Eigenschaften um auch eine “Out”-Animation zu starten oder diese endlos ablaufen zu lassen.
Mit etwas komplexeren XAML-Syntax lassen sich auch Icons je nach Plattform setzen. Dies ist dann entscheidend wenn man als Entwickler ein möglichst “Systemnahes”-Aussehen der App erreichen möchte.
<Image>
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource"
Default="{mi:Material Icon=Flight, TypeArgument={x:Type ImageSource}}">
<On Platform="iOS"
Value="{mi:Cupertino Icon=Airplane, TypeArgument={x:Type ImageSource}}"/>
</OnPlatform>
</Image.Source>
</Image>Eine komplette Liste an allen XAML-Möglichkeiten und Features der Komponente lohnt ein Blick in die Readme des Projektes.
Falls es zu Problemen in Bezug auf die MauiIcon Komponente kommt, schlägt die Readme des Autors folgende Lösung vor welche bei sofort funktionierte. Habt in der zur XAML-Page gehörenden Code-Behind-Datei eine leere Variablendeklaration welche die Komponente initialisiert.
public MainPage()
{
InitializeComponent();
_ = new MauiIcon();
}Es bleibt zu hoffen, dass das MAUI Issue #7503 auf Github bald behoben wird.
CodeBehind und C#
Alle Funktionen welche aus XAML bekannt sind, sind auch im reinen C# möglich.
new MauiIcon()
.Icon(CupertinoIcons.Airplane)
.IconColor(Colors.Cyan)
.IconSuffix("Flying");Vor allem der Syntax rund um Plattform-spezifische Werte der Komponenten finde ich in C# wesentlich leserlicher als wie oben beschrieben in XAML.
new MauiIcon()
.Icon(MaterialIcons.Flight)
.OnPlatforms(new List<string>{"Android"})
new MauiIcon()
.Icon(CupertinoIcons.Airplane)
.OnPlatforms(new List<string>{"iOS"})Dies ist jedoch sehr subjektiv und sollte für keine eine prägende Passage dieses Artikel bieten.
3. Fazit
Ich bin sehr überrascht das es eine solch einfach zu benutzte Library existiert und hierfür noch recht unbekannt ist wenn man GitHub Stars als Metrik heran nimmt.
Eine Sache welche ich verstehe, schätze jedoch gleichzeitig auch nicht wirklich mag ist die Benennung von Icons.
Theoretisch habe ich erwartet das diese ähnlich wie MAUI plattform-agnostisch ist. Sprich ein Flugzeug ist immer ein “Airplane”.
MauiIcons hingegen hält sich zu 100% an die offizielle Benamung wie diese die Icon-Libraries vorgeben. So heißt es “Airplane”, “Flight” oder auch beispielsweise “Airplane20”.
Auf dem zweiten Blick bin ich darüber recht froh, denn so wissen Gestalter und andere Entwickler immer genau um welche Art von Icon es sich handelt.
Kurz um: Ich bin froh auf dieses NuGet Package gestoßen zu sein und werde dieses in zukünftigen Posts auch als “Grundlage” für andere Features einsetzen.
Beachtet: Ich spiele nur DevRel. Bitte für wirkliche Hilfegesuche und fachlich mehrwertbringende Artikel andere Content Creator bevorzugen.
