Import Art from Photoshop and Make into Silverlight Controls

One of my favorite features of Silverlight is the ability to completely redefine the visual elements of a control. By editing templates and visual states you can reuse the functionality of controls without having to write any custom classes or logic.

In this tutorial, we’ll take graphics created in Adobe Photoshop and Illustrator, import them into Expression Blend and then quickly turn the visual assets into interactive Silverlight controls.
Download the Assets for this tutorial

Import a Photoshop file into Expression Blend

If you open the “cmanlogin_unmerged.psd” file, included with the tutorial assets, you will see an image similar to the thumbnail shown here.

Here we have a thin hairless caveman which will be used as the login screen for a website. Notice the two rounded rectangles which represent a focused and unfocused textbox for username and password entry. Also check out the cave man’s spear, which we’ll turn into a working torch after the textboxes are ready.

Let’s begin. The following steps are based on Expression Blend 4 and Silverlight 4.

  1. Open Blend and create a new “Silverlight Application” and name it “ImportArtSample”.
  2. From the menu at the top select the File -> Import Adobe Photoshop File option.
  3. In the dialog, navigate to “cmanlogin_unmerged.psd” file, included with the tutorial assets and click Open.
  4. Once opened the Import Preview dialog should look like the picture below. Examine the preview and you will notice the following bits of information:

    1. Preview of the composed image – no need to have Photoshop on the machine doing the import work.
    2. Select a Text layer and at the bottom of the dialog you will see the options to Import the layer as editable content (TextBlock control) or a flattened bitmap (Image control).
    3. Select a Shape layer and at the bottom of the dialog you will see the options to Import the layer as editable content (Path control) or a flattened bitmap (Image control).
    4. The “fx” icon denotes that Blend is able to reproduce the Drop Shadow effect in Silverlight and will not “flatten” the Layer Style.
    5. The only option for raster layers is to be imported as Image controls.
    6. The “i” icon lets you know that the “Multiply” Blend Mode from Photoshop is not supported in Silverlight, so you should merge those layers before importing to get the same effect.
  5. On the Import Preview dialog, hit Cancel. We need to fix the Blend mode issue first. In Photoshop merge the “shadows” and “caveman” layers and save the file or use the “cmanlogin.psd” file included with the tutorial assets for the next step.
  6. From the menu at the top select the File -> Import Adobe Photoshop File option and navigate to the merged “cmanlogin.psd” file, and click Open.
  7. Uncheck “Layer 1”, since we do not need the background layer and click OK.
  8. In the Objects panel, expand the cmanlogin Canvas to explore the results of the Import:

    1. First glance at the Artboard – the results look exactly the same as the layers in Photoshop.
    2. The imported elements are contained within a Canvas control named cmanlogin after the imported file name. The Canvas provides absolute xy positioning like Photoshop allowing for a high-fidelity import in regards to positioning.
    3. The caveman Image control is used to display the raster “caveman” layer. You can find the PNG file in the Projects panel under the “cmanlogin_Images” folder.
    4. The password Path is the yellow rounded rectangle shape. Notice the DropShadow Effect applied in place of the layer effect.
    5. Both text layers have been imported as TextBlocks with the custom font at the correct size. Additionally if you check out the ScaleX and ScaleY properties of the ROCK_ TextBlock you find it has maintained its horizontal and vertical stretching.
  9. Now let’s stretch out the elements to take up the full space. Click and drag the ROCK_ TextBlock to align horizontally with the Brought_the TextBlock. Notice that a clip has been applied to the cmanlogin Canvas hiding elements outside of its bounds:
  10. The clip is used to hide any elements that may have been imported and positioned off screen. We don’t need to hide anything, so let’s remove the clip. Select the cmanlogin and in the Properties panel type “clip” into the Search box.
  11. Click the Advanced options square and select the Reset option. Clear the search filter by clicking the “X” in the search box.
  12. You should now see the rest the text in the ROCK_ TextBlock. (You may need to reposition the TextBlock slightly to get the drawing surface to update.)
  13. Next reposition the yellow password Path set it is above the username Path make larger to fill up the space available.

Make Into Control

Now that the elements have been imported, let’s turn them into working Silverlight controls.

First we’ll make a new TextBox Style which will give the TextBox control class new visual elements to use for display and interaction. This is done by using specific Part names for controls and specifically named Visual States. The TextBox control class will then use these named elements when displaying text, reacting to a mouse over or any other functional aspect possibly displayed in the UI.

  1. Right-click the yellow password Path and select the Make Into Control option. In the dialog, Blend will display all of the Silverlight controls that are able to be templated for you to choose from. Enter “text” into the Search box and select “TextBox”. Keep the defaults and hit OK.
  2. You have now entered the Template Editing Zone. In the Objects panel, [UserControl] has been replaced with TextBoxStyle1 (TextBox Template). This lets you know you are editing a reusable Resource, not an instance of a control. The Objects panel is displaying the tree of elements used for this template.
  3. To start with we have the password Path available as a background element, but we need a place to put the text. In the Toolbar, click and hold on the Grid tool until the container menu comes up, then select the ScrollViewer. Now double-click the ScrollViewer to add an instance to the Grid.
  4. With the ScrollViewer selected, in the Properties Panel (make sure to remove the “clip” search filter if it’s still there) Set the Margin to 8,0,8,0. In Silverlight the order goes “Left, Top, Right, Bottom” unlike CSS which is “Top, Right, Bottom, Left”.
  5. Set the HorizontalAlignment to “Stretch”, Width to “Auto” and the BorderBrush to “No brush”.
  6. Right-click the ScrollViewer and select Make Into Part of TextBox -> ContentElement. And the default text appears, right away:
  7. With the Part in place to display the text, let’s modify the Visual States to share when the TextBox has focus. Open the States Panel and you will find the Visual States created by Blend for you based on the TextBox class.
  8. First let’s create the default look of the TextBox. With the Base state selected, change the Fill property of the password Path to the gray color of the username Path. Change the Opacity of the DropShadowEffect’s Opacity to 0%.
  9. Now select the Focused state and change the password Path Fill property to a bright Yellow and set the DropShadowEffect Opacity to 80%.
  10. Hit F5 to Run the Project and test your new TextBox style. Click the TextBox to give it focus and you’ll see it change to yellow with a dropshadow. Then start typing. Pretty cool, right?

Reuse the new Style

Ok so now that we’ve defined a TextBox Style as a reusable Resource, let’s reuse it.

  1. First make sure you are no longer in template editing mode, you can do this by clicking the Return to Scope icon in the Objects panel.
  2. Select the username Path and delete it.
  3. In the Toolbar, click and hold on the TextBlock tool until the text menu comes up, then select the TextBox. Then draw a new TextBox below the styled TextBox:
  4. Now right-click the new TextBox and select the Edit Template -> Apply Resource -> TextBoxStyle1 option.
  5. Since the size of the TextBox was not hard-coded into the template they may not look exactly the same. You can type in matching Width and Heights for the TextBoxes or you can also select them both and use the top menu Object -> Make Same -> Size option.
  6. Hit F5 to Run the Project and test the pair of TextBoxes in action. Switching the focus between the two TextBoxes really shows the control’s Visual States in action.

Import from Illustrator

If this were a tutorial about creating a login screen, our next step would probably be to add a button to validate the user’s credentials. Instead since this is a tutorial on importing artwork and control templates in Silverlight, we’re going to turn the caveman’s walking stick into a torch.

  1. From the menu at the top select the File -> Import Adobe Illustrator File option.
  2. In the dialog, navigate to “cmanlogin_flames.ai” file, included with the tutorial assets and click Open.
  3. In the Objects panel, expand the cmanlogin_flames Canvas to explore the results of the Import:

    1. The imported elements are contained within a Canvas control named after the imported file name, just like the Photoshop import.
    2. Each Illustrator Layer is separated into its on Canvas.
    3. Vector elements are imported as Paths.
  4. Let’s get rid of the unnecessary Layer_2 Canvas, by right-clicking on it and selecting the Ungroup option.
  5. Select both of the Paths and reposition them closer to the upper left corner of the cmanlogin_flames Canvas.
  6. Resize the cmanlogin_flames Canvas to fit the Paths. The original 800×600 size came from the Artboard size in the Illustrator document.

Reuse Functionality

The last time we made some artwork into a control, we really just provided a custom background (rounded rectangle) and a custom Visual State (bright yellow with dropshadow). That’s not too much of a stretch, so this time we’ll reuse the checked functionality of a CheckBox to create a caveman torch that clicks on and off. We’ll add custom transitions as well so we get a flicker of the flame when it turns on and off.

  1. Reposition the cmanlogin_flames Canvas so the flames look like they are emanating from the torch. You may want to reposition the cmanlogin Canvas a bit so the flames don’t go off the top of the screen.
  2. Right-click the cmanlogin_flames Canvas and select the Make Into Control option.
  3. In the dialog, select the CheckBox control and hit OK.
  4. In template editing mode, delete the ContentPresenter. Our torch doesn’t need to display any text.
  5. In the States panel with the Base state selected, set the Opacity of the cmanlogin_flames Canvas to 0%
  6. Select the Checked state and set the cmanlogin_flames Canvas Opacity to 100%. Change the Default transition of the CheckStates EasingFunction to CircleIn and the duration to 0.5 seconds.
  7. Click the Transition Preview button in the upper right of the States panel and toggle between the Unchecked and Checked states to get a preview the transition at design-time. No need to Run the project, which is nice.
  8. We’ll use the default transition as the way to “turn on” the flame, but we want the flame to flicker so let’s create a custom transition. On the Checked state, click the Add Transition button and select the Checked -> Unchecked option.
  9. Set the custom transition to a BounceOut EasingFunction and to a 1 second duration.
  10. Run the project and click the end of the torch to turn it on. Click again to turn it off. Wasn’t that easy?

Conclusion

Control templates in Silverlight are very powerful and customizable. Expression Blend makes the process of creating and editing templates much easier and the addition of the import from Adobe tools is the knockout punch. As you may have figured out by now, this process could only be made better by providing a two-way relationship between the asset design tool and Blend. The good news is this was demoed at MIX10 in the form of an
FXG Import from Illustrator. Once this add-in is released we’ll be in even better shape as Silverlight UI designer and developers, and I’ll be making another tutorial.

This entry was posted in Client Technologies, Tutorials and tagged , , , , , , , . Bookmark the permalink.

5 Responses to Import Art from Photoshop and Make into Silverlight Controls

  1. Pingback: DotNetShoutout

  2. Pingback: Dew Drop – July 1, 2010 | Alvin Ashcraft's Morning Dew

  3. codenux says:

    Awesome tutorial. Well done , and congratz on your transition.

  4. Pingback: Import Art from Photoshop and Make into Silverlight Controls « Vincent Leung .NET Tech Clips

  5. eric says:

    One of the most useful designer related tutes I’ve found yet. Thanks.

Leave a Reply