Creating Silverlight control templates from Illustrator

In the previous post I showed off a Silverlight nine grid, this one explains how to leverage it to create control templates from Illustrator comps of controls.

(I wrote this a while back but am not super happy about the workflow. I decided to post it anyways in the hope that it might be a helpful to someone).

I’m starting with a basic button that Billy Chow (a graphic designer on the Blend team) put together- it just has the basic states of a button.

Illustrator source file

First step is to import the Illustrator file into Expression Blend and do some grouping and organization on the file.

When working with paths in Silverlight I always like to turn off Layout Rounding- this can cause rounding errors which come back as visual cropping and such later on. To do this, just select the root of the imported object and turn off the UseLayoutRounding property- it’s under advanced layout.

Next select the groups of paths that compose each of the states, group them each into a grid and name the grid with the state name:

First state grouped and named:

And while you’re at it, delete all of the TextBlocks that are the content of the Buttons- we’ll have the text come from the Button itself later.

 

Next select all of the state groups and set their Left and Top properties to 0 so they are all on top of each other.

 

Group them into a Grid (control-G)

Then put that Grid into a NineGrid control to handle the scaling:

Tweak the bounds of the NineGrid to get the right scaling regions- for this sample I used 6 pixels on the left and right, 5 top and bottom.

Next, right-click the NineGrid, choose ‘Make Into Control…’, choose Button, then OK.

Setting up the states

At this point we have a scalable, reusable Button template. Next step is making the visuals update with the state changes.

Let’s rearrange the state groups so that we have some visual priority- making the mouse states appear over the focus states:

Next select all of the state groups except Normal and set their visibilities to Collapsed.

Then go through each of the states in the States pane and set each of the corresponding part’s visibility to Visible for the state:

· In the MouseOver state set Hover to Visible

· In the Pressed state set Click to Visible

· In the Focused state set Focus to Visible

Build & run the application!