ERGOSIGN Blog

13.01.2010

Design und Integration von vektorbasierten XAML-Icons

Aufgrund der zunehmenden Verbreitung von WPF-Applikationen wollen wir uns bei ERGOSIGN in diesem Beitrag dem Thema skalierbarer Vektor-Icons innerhalb von WPF-Anwendungen widmen.

Was ist der Vorteil von skalierbaren Vektor-Icons?

Bei der Entwicklung von Anwendungen wird oft eine Vielzahl von Grafiken und Icons verwendet. Besonders vorteilhaft ist es, wenn eine einzige Icon-Bibliothek für alle Anwendungsfälle wie Toolbars, Splash Screens, Tree Views, Buttons usw. verwendet werden kann.

ERGOSIGN XAML Icons

Dies kann entweder durch das Windows-spezifische ICO-Format geschehen, welches mehrere Icongrößen in einer Datei ablegt oder – noch eleganter – durch die Integration von frei skalierbaren Vektor-Icons.

Die Integration von Vektor-Icons in WPF-Anwendungen erfolgt im XAML-Format. 

Eine einzelne Icondatei kann hierdurch gleichzeitig in mehreren Größen verwendet werden, da XAML-Vektor-Icons ohne Verluste innerhalb von WPF skaliert werden kann.

Wie werden XAML-Icons erstellt?

Vektor-Icons werden bei ERGOSIGN mit Adobe Illustrator erstellt. Anschließend können diese im Expression Blend Designer nachbearbeitet und in XAML-Code umgewandelt werden.

Dieses Vorgehen ermöglicht zum einen die Benutzung unserer gewohnten Design-Instrumente und somit die Aufrechterhaltung unseres Qualitätsanspruches. Zum anderen können die Icons so auch problemlos als druckfähige EPS-Dateien exportiert werden.

Wie werden in XAML gelieferte Icons in ein WPF-Projekt integriert?

Die Integration einer XAML-Icon-Bibliothek gestaltet sich denkbar einfach. Alle XAML-Icons werden in einer einzelnen XAML-Ressource-Datei geliefert, die in das bestehende WPF-Projekt eingebunden werden kann.

ERGOSIGN XAML Icons

Anschließend stehen die einzelnen Icons als Rectangle Ressources zur Verfügung und können nahtlos in Toolbars, Tree Views, Buttons oder jedes andere Control integriert werden.

Im Fall von Expression Blend kann das Icon dafür einfach auf das entsprechende Control gezogen werden. Um ein Icon per Code einzufügen, muss lediglich folgende Zeile integriert werden

<Rectangle Fill={DynamicResource Iconname} />

Um das Ganze selbst zu testen, können Sie sich unsere XAML-Testicons hier herunterladen.

Wenn Sie für Ihr Projekt vektorbasierte XAML-Icons erstellen lassen möchten, nehmen Sie doch einfach mit uns Kontakt auf.

von Feli