Kolumne XAML Expertise: WPF und Windows-Apps

XAML-Tipp: Kostenlose Iconsammlung mit MahApps.Metro.IconPacks
Keine Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „XAML: Kostenlose Iconsammlung mit MahApps.Metro.IconPacks“.

Jan Karger hat die kostenlose Bibliothek MahApps.Metro.IconPacks mit zahlreichen Iconsammlungen veröffentlicht. Er ist auch aktiver Entwickler des UI-Frameworks MahApps.Metro (siehe: Windows Developer 4.16: Windows-10-Design für WPF-Anwendungen). Das zusätzliche IconPacks-Browsertool hilft beim Erstellen und Auffinden von Icons für WPF und Universal Windows Apps. Die Bibliothek selbst bietet Icons aus bekannten Iconsammlungen wie Material Design Icons (Google), Font Awesome, GitHub Octicons, Modern UI Icons und Entypo+.

XAML: Kostenlose Iconsammlung mit MahApps.Metro.IconPacks

Die Icons können auf unterschiedliche Weisen eingebunden werden. So kann man ein NuGet-Paket für eine explizite Iconsammlung installieren, wie zum Beispiel via MahApps.Metro.IconPacks.FontAwesome. Es ist ebenfalls möglich gleich alle vorhandenen Icons über MahApps.Metro.IconPacks einzubinden.

Zum Start für ein kleines Beispiel wird der IconPacks-Browser installiert. Als Icon soll ein Herz bei einem Button eingebunden werden. Dazu wird im Tool nach „Love“ gesucht. Beim Durchklicken der Tabs wird unter der Iconsammlung Octicons ein gewünschtes Icon gefunden (Abb. 1).

Abb. 3: Der kostenlose IconPacks-Browser zum Auffinden von Icons

Abb. 1: Der kostenlose IconPacks-Browser zum Auffinden von Icons

Innerhalb einer WPF-Anwendung muss jetzt via NuGet die jeweilige Iconbibliothek installiert werden, in diesem Beispiel heißt sie MahApps.Metro.IconPacks.Octicons. Anschließend wird ein einfacher Button im XAML deklariert. Im IconPacks-Browser wird dann beim gefunden Icon auf das Kopiersymbol geklickt. Das Tool hat nun den nötigen XAML-Code im Zwischenspeicher abgelegt, der beim Button er als Content eingefügt wird. In Listing 1 wird der komplette Code dazu gezeigt. Das war es auch schon. Beim Ausführen der WPF-Anwendung wird ein Button mit Herzicon angezeigt, wie in Abbildung 2 zu sehen ist.

<Window x:Class="IconPacksSample.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
  mc:Ignorable="d"
  Title="IconPacks Sample" Height="350" Width="525">
    <Grid>
      <Button Width="200" Height="40">
        <iconPacks:PackIconOcticons Kind="Heart" />
      </Button>
    </Grid>
</Window>
Abb. 4: WPF-Anwendung mit Button und Herzicon

Abb. 2: WPF-Anwendung mit Button und Herzicon

 

Windows Developer

Windows DeveloperDieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. Außerdem ist der Windows Developer weiterhin als Print-Magazin im Abonnement erhältlich.

BASTA! 2021

Keynote: Auf dem Weg zu „One .NET“ – das eine Framework, sie alle zu beherrschen

mit Dr. Holger Schwichtenberg (www.IT-Visions.de/MAXIMAGO GmbH)

C#-Workshop – was kommt Neues in .NET 5?

mit Rainer Stropek (timecockpit.com)

IT Security Summit 2020

Zero Trust – why are we having this conversation?

mit Victoria Almazova (Microsoft)

Digitaler Ersthelfer

mit Martin Wundram (DigiTrace GmbH)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -