ERGOSIGN Blog

13.01.2010

Design and Integration of vector-based XAML Icons

Due to the increasing popularity of WPF applications we at ERGOSIGN would like to provide you with some insights on scalable vector-icons within WPF applications.

What’s the advantage of scalable vector-icons?

In the development of modern software a plethora of visuals and icons is used. The ideal solution would be that one icon library feeds all potential applications such as tool bars, splash screens, tree views, buttons etc.

ERGOSIGN XAML Icons

One way to reach this effect is by using the proprietary Windows format ICO, that bundles multiple icons sizes within one file. The more elegant solution however is the usage of scalable vector-icons.

The implementation of such vector-icons into WPF applications happens in the XAML format: 

One single icon file can be used simultaneously in multiple sizes since XAML icons can be scaled lossless due to their vector-based nature.

How to design XAML icons

ERGOSIGN designs vector icons in Adobe Illustrator. Subsequently, they can be refined in Expression Blend Designer and transformed into XAML code.

This procedure enables us to keep using our familiar design tools of choice and thus to avoid any compromises regarding quality. Furthermore, the icons can also be exported as printable EPS-files without any problem.

How to integrate XAML icons into WPF

The integration of a XAML icon library into WPF is quite simple. All XAML icons are delivered as a single XAML resource file that can be imported into any existing WPF project.

ERGOSIGN XAML Icons After import, all icons are at your disposal as rectangle resources that can easily be used in tool bars, tree views, buttons or any other control.

In the case of Expression Blend all you have to do is to drag the icon on the respective control. If you prefer to do it via code, just use the following snippet:

<Rectangle Fill={DynamicResource Iconname} />

You can easily try it yourself by downloading our XAML test icons here.

If you need professionally designed vector-based icons in XAML, just contact us here.

by Feli