XAML-Kolumne: WPF & Font Awsome

XAML-Tipp: WPF – Kostenlose Icon-Sammlung mit Font Awesome
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: „WPF: Kostenlose Icon-Sammlung mit Font Awesome“.

Font Awesome ist eine kostenlose Icon-Sammlung für Webdesigner. Ursprünglich ist das Open-Source-Projekt für die Nutzung von Twitter Bootstrap entwickelt worden. Es beinhaltet zahlreiche nützliche Steuerelemente für Formulare, Buttons, Tabellen, Grid-Layouts, Navigationen und vieles mehr. Font Awesome lässt sich allerdings auch ohne Bootstrap einsetzen. Aktuell gibt es über 600 Icons, und das Projekt wird laufend weiterentwickelt. Doch was hat dieses Webtoolkit mit WPF zu tun? Die gute Nachricht ist, es gibt ein weiteres Open-Source-Projekt mit Font-Awesome-WPF, sodass bequem über 600 Icons in WPF bereitgestellt werden, die auch noch vektorbasiert und einfach einzusetzen sind.

WPF: Icons über Font Awesome einbinden

Das Toolkit wird über NuGet unter FontAwesome.WPF.Signed bereitgestellt. Nach der Installation können Icons über FontAwesome-Steuerelemente oder eine Attached Property eingebunden werden. Das Steuerelement FontAwesome selbst basiert auf dem TextBlock-Steuerelement und zeigt das Icon vektorbasiert an. In Listing 1 wird es mit einem Flaggenicon demonstriert. Beim ImageAwesome-Steuerelement kann ein Icon auch als Bitmap gerendert werden. Mit der Attached Property Awesome.Content lässt sich ein Icon für Buttons ideal einsetzen. Die folgenden Codezeilen zeigen den Einsatz, das Ergebnis ist in Abbildung 1 zu sehen.

<Button fa:Awesome.Content="Flag" TextElement.FontFamily="pack://application:,,,/FontAwesome.WPF;component/#FontAwesome" Width="200" Height="50"/>

Eine Liste aller Icons findet man auf der Projektwebseite von Font Awesome.

 
<Window x:Class="FontAwesomeWPF.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:local="clr-namespace:FontAwesomeWPF"
  xmlns:fa="http://schemas.fontawesome.io/icons/"
  mc:Ignorable="d"
  Title="MainWindow" Height="350" Width="525">
    <Grid>
      <fa:FontAwesome Icon="Flag" />
    </Grid>
</Window>
Abb. 1: Button mit einem Flaggenicon von Font Awesome

Abb. 1: Button mit einem Flaggenicon von Font Awesome

Elegante und performante Web-APIs und MVC-Anwendungen mit ASP.NET Core 2.0

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

JavaScript Days 2017

Architektur mit JavaScript

mit Golo Roden (the native web)

JavaScript Testing in der Praxis

mit Dominik Ehrenberg (crosscan) und Sebastian Springer (MaibornWolff)

Aufmacherbild: Vector Pop art bright WOW via Shutterstock / Urheberrecht: Aquarell

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -