Monday, August 31, 2009

56 vector arrows in XAML

by Laurent Bugnion via Silverlight on 8/31/2009 11:05:43 PM

I found this collection of vector arrows through Robby Ingebretsen. The designer Sander Baumann created 56 different arrows in vector format (Adobe Illustrator).

I converted these arrows in XAML. The arrows are available in the different formats (right click and choose “Save Target As”):

• DrawingBrush (WPF only): You can use the arrow icon as a brush to “paint” an element, typically a Rectangle. If the painted element is resized, the DrawingBrush will also resize seamlessly thanks to its vector nature.
• Paths (Silverlight and WPF): In some cases, it is more convenient to use a Path instead of a DrawingBrush.

I also have an Expression Design file available for download.

To use these arrows in Expression Blend, follow the steps:

DrawingBrush (WPF only)

• Download the resource dictionary containing the brushes (right click and choose “Save Target As”).

Note: Silverlight does not support DrawingBrush yet, so this is only available for WPF.

• In Expression Blend, create a new WPF application.
• Right click on the project in the “Projects” panel and select “link to existing item”.

• In the Resources panel, you can see all the arrows.

• Using the Resources panel, move the arrow you want to use to a local resource dictionary. For example, you can drag the arrow on App.xaml to move it to the global resources.

After you moved the arrows you want to use, you can discard the original resource dictionary:

• In the Projects panel, right click on the linked resource dictionary and select “Remove from Project”.
• In the Resources panel, expand the App.xaml.
• Right click on the line saying “Linked to" segd-arrow-symbols…” and select Delete.

To use the brush, follow the steps:

• Create a new element (for example a Rectangle).
• In the Properties panel for the new Rectangle, set the Fill property to the Local Resource corresponding to the arrow you just copied.

Paths

The arrows are also available as paths, for WPF and for Silverlight. Follow the steps:

• Download the WPF Canvas file or the Silverlight Canvas file (right click and choose “Save Target As”).
• In Expression Blend, create a new WPF or Silverlight application.
• Right click on the project in the “Projects” panel and select “link to existing item”. Select the WPF file for a WPF application, or the Silverlight file for a Silverlight application.
• Double click on the linked file to open it.

• Select the arrow you want to copy, and copy/paste it to your document.
• Once you copied all the arrows you want, you can discard the linked file by right clicking and selecting “Remove from Project”.

Note: For Paths, you may want to enclose them into a Viewbox to allow easy zooming. If you resize a Path, there might be some distortion happening. If you use a Viewbox as the path’s container, the Viewbox will zoom seamlessly.

You can use the WPF Viewbox natively. In Silverlight, you must install the Silverlight toolkit to use a Viewbox.

A note to the designers

What took me the longest in the whole conversion process was to organize the elements into separate layers. Like most designers, the original author is probably not familiar with the new usage that we do of vector graphics. New tools, new export processes and new workflows have made the graphics designer into a full member of the development team. Vectors and brushes are not just drawings anymore, they are now assets, source code, that are built into the application, put under source control, compiled and run.

My most important recommendation to the designers is: Try to organize your elements neatly. The following helps tremendously:

• Put your elements into layers. Create one layer per exported asset. Sometimes it is hard to know what will be exported, but in this case, it is really simple: One layer per arrow.

Note: It doesn’t mean that the arrows cannot be composed of multiple elements. Some of the arrows above are made of multiple paths. It is fine. The best way in that case is to put all the paths into a group, and the group into its own layer.

• Name the layers meaningfully. It is really helpful when we then export the assets, because the name of the layer will be used as the name of the exported asset (brush or Path). In the case above, I simply named the arrows Arrow01, 02, 03…