Icons or other visuals with XAML instead of bitmaps

You want to use vector images in your Silverlight project instead of bitmaps? In this tutorial I’ll show you how.

Buttons with vector images

Start Expression Blend and place a button on the Grid.

When u use a *.PNG icon, you can drag this on the button. But we are going to draw a little magnifying glass icon with Expression Blend. Rightclick the button in the Objects and Timeline tab and choose: Edit Additional Templates | Edit generated Content | Create Empty…

Choose a name and hit OK

A DataTemplate resource has been created in the UserControl.Resources collection. Draw an ellipse and a rectangle to create the search icon (or be more creative :-)

And that’s it! Apply this datatemplate to the ContentTemplate of other buttons to re-use the vector drawing:

This resource was created in the UserControl (MainPage.xaml). It’s a better idea to create the resource in a separate resource file like Visuals.xaml but that depends on your preferences.