Importing graphic assets from other design tools is an important feature in Expression Blend. High-fidelity conversions are key to simplifying the workflow from Graphic Design to Interactive Design.
In this tutorial, we will selectively import layers from an Adobe Photoshop file into Blend. And using the templating capability of Silverlight, create new templates that can bused to convert elements into functional controls.
Open Blend and go to File -> New Project. Select Silverlight 3 Application + Website as your project type and name the project ImportPhotoshop. After hitting OK, the new Project will be created for you and MainPage will be open on the Artboard.
Download and save the BestLogin.psd file. Then in Blend, click File -> Import Adobe Photoshop File and select "BestLogin.psd". The Import dialog will open displaying a preview of the import along with a configurable listing of layers. We only want the login form elements so uncheck the Background layer and then hit OK to start the process.
After the import runs, you will see the contents of the selected Photoshop layers presented on the Artboard as Silverlight controls. Viewing the controls in the Objects panel you will also notice that they have been placed within in a Canvas. This allows for the absolute positioning of the contents of the Photoshop to be maintained. Let’s take a look at the other properties that have been converted.
Select the “Welcome to the best login ever” text and you will notice that the import process detected this content was a Text layer in Photoshop and has imported it as a TextBlock element. You will also notice the Font Family, Bold modifier and the scaling have been brought over as well. Selecting “username:” and “password:” will show that they have been imported as TextBlocks, too.
Select the rounded yellow rectangle and you will notice that the import process recognized this is a shape layer in Photoshop and converted it to a Path element. Additionally the Drop Shadow layer style was recognized and converted to a DropShadowEffect. The lightbulb image has been brought over as a rasterized image and is displayed in an Image control. Changing the Background of LayoutRoot to red will show you the transparency of the image was maintained too.
Importing the artwork has provided a great start towards building our application. We’ve brought in the design elements and now we’re going to make them interactive controls. Silverlight controls are based on the idea of being “lookless”. The original control developer defines functionality and a base template or “look” of the control. We can take that control and completely redefine the template without losing any of the existing functionality. Now let’s create our own templates for the TextBox and CheckBox.
The assets from the Photoshop file shows two States for the TextBox design. The yellow Path with a drop shadow indicates the TextBox has focus and the gray Path is the Base State of the control. Let’s implement the design of the States using the TextBox control class. Right-click the yellow Path and click Make Into Control. On the dialog, select the TextBox control and hit OK. If you need help finding the TextBox, filter the list simply by typing the control name in the Search box.
After hitting OK on the Make Control dialog, we enter Template Editing mode indicated by the breadcrumb menu at the top of the Artboard and the Template tree in the Objects Panel. To gain the functionality of the TextBox class such as text editing and selection we will add a control to work as one of the expected Parts. From the Assets Panel or the Toolbar select the ScrollViewer tool and one to the Grid. Set the BorderBrush to No Brush, Width to Auto, HorizontalAligment to Stretch and Margin to 8,8,8,8. Right-click the ScrollViewer and select Make Into Part of TextBox -> ContentElement.
With the Part defined we have a working TextBox and now we can define the visual differences between the Base and Focused States. Select the Path and copy the Fill color to your clipboard. Now click the Color EyeDropper tool and click on the gray rounded rectangle Path to copy that color. Set the Opacity of the DropShadowEffect to 0. Open the States Panel and select the Focused State. Notice the red outline to indicate that any changes you make now, will happen when the control changes to this State. Change the DropShadowEffect Opacity to 75% and the Fill of the Path to the color saved on your clipboard (#FFFFFDDA).
Hit F5 to Run the Project and see your custom designed TextBox in action. Click the TextBox and you will see the background color change and the drop shadow appear as the control switches to the Focused State. Now press a few keys on the keyboard and you will change the text just like any other TextBox.
By creating your own template you have defined a new Style in your application. Styles are similar to CSS classes, but they define a composition of controls along with visual properties. Let’s reuse the custom Style you’ve created to style another TextBox. Exit the Template editing mode by clicking [TextBox] in the bread crumb or TextBoxStyle1 in the Objects Panel. Delete the imported gray Path and add a new TextBox to the BestLogin Canvas. Right-click on the TextBox and select Edit Template -> Apply Resource -> TextBoxStyle1. Now when you Run the Project you will see two custom TextBoxes using your custom Style.
Metaphorically and figuratively, let’s get the light bulb to come in your head on this concept of “lookless” controls. In the last few steps, we created a custom Style for a TextBox, but we did not stray too far from the original look of the control. To emphasize the idea of reusing functionality, let’s turn the light bulb image “on” by leveraging the Checked and Unchecked States of the CheckBox control.
Right-click the Image control named lightbulb and select Make Into Control. On dialog slect the CheckBox control and hit OK. Move the [ContentPresenter] control to the right, in Template editing mode, so it’s not over the bulb. Select the Pen Tool (P) and draw a Path tracing the Path around the bulb. Change the Fill of the drawn Path to a bright color with an Alpha of 70% so you can see through it.
Set the Opacity of the Path to 0 to indicate the Base State as the “off” position. Open the States Panel and Select the Checked State. Now in State recording mode, set the Opacity of the Path to 100%. Run the Project and click the lightbulb themed CheckBox to turn it “on” or mark it as Checked. Click it again to turn it “off” and set it back to UnChecked.