Kolumne XAML Expertise: WPF und Windows-Apps

XAML-Tipp: Kostenlose Iconsammlung mit MahApps.Metro.IconPacks
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. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.

Schnell und überall: Datenzugriff mit Entity Framework Core 2.0

Dr. Holger Schwichtenberg (www.IT-Visions.de/5Minds IT-Solutions)

C# 7.0 – Neues im Detail

Christian Nagel (CN innovation)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -