Creating applications in Expression Blend
What we've done so far falls short of some of the things you may have already seen and done in Silverlight. Hand editing XAML, assisted by Intellisense, works just fine to a point, but to create anything complex requires another tool to assist with turning our vision into code.
Intellisense is a feature of Visual Studio and Blend that auto-completes text when you start typing a keyword, method, or variable name.
Expression Blend may scare off developers at first with its radically different interface, but if you look more closely, you'll see that Blend has a lot in common with Visual Studio. For starters, both tools use the same Solution and Project file format. That means it's 100% compatible and enables tighter integration between developers and designers. You could even have the same project open in both Visual Studio and in Blend at the same time. Just be prepared to see the File Modified dialog box like the one below when switching between the two applications:
If you've worked with designers on a project before, they typically mock up an interface in a graphics program and ship it off to the development team. Many times, a simple graphic embellishment can cause us developers to develop heartburn. Anyone who's ever had to implement a rounded corner in HTML knows the special kind of frustration that it brings along. Here's the good news: those days are over with Silverlight.
A crash course in Expression Blend
In the following screenshot, our CakeNavigationButton project is loaded into Expression Blend. Blend can be a bit daunting at first for developers that are used to Visual Studio as Blend's interface is dense with a lot of subtle cues. Solutions and projects are opened in Blend in the same manner as you would in Visual Studio.
Just like in Visual Studio, you can customize Expression Blend's interface to suit your preference. You can move tabs around, dock, and undock them to create a workspace that works best for you as the following screenshot demonstrates:
If you look at the CakeNavigationButton project, on the left hand side of the application window, you have the toolbar, which is substantially different from the toolbox in Visual Studio.
The toolbar in Blend more closely resembles the toolbar in graphics editing software such as Adobe Photoshop or Adobe Illustrator. If you move the mouse over each button, you will see a tooltip that tells you what that button does, as well as the button's keyboard shortcut. In the upper-left corner, you'll notice a tab labeled Projects. This is functionally equivalent to the Solution Explorer in Visual Studio. The asterisk next to MainPage.XAML indicates that the file has not been saved. Examine the next screenshot to see Blend's equivalent to Visual Studio's Solution Explorer:
If we look at the following screenshot, we find the Document tab control and the design surface, which Blend calls the art board. On the upper-right of the art board, there are three small buttons to control the switch between Design view, XAML view, or Split view.
On the lower edge of the art board, there are controls to modify the view of the design surface. You can zoom in to take a closer look, turn on snap grid visibility, and turn on or off the snapping to snap lines.
If we then move to the upper-right corner of the next screen, we will see the Properties tab, which is a much more evolved version of the Properties tab in Visual Studio. As you can see in this screenshot, the color picker has a lot more to offer. There's also a search feature that narrows down the items in the tab based on the property name you type in.
At the lower left side of the next screen, there is the Objects and Timeline view, which shows the object hierarchy of the open document. Since we have the MainPage.XAML of our CakeNavigationButtons project, the view has StackPanel with six Buttons all inside a grid named LayoutRoot inside of a UserControl. Clicking on an item in this view selects the item on the art board and vice versa.
Expression Blend is an intricate and rich application.
Time for action – styles revisited
Earlier in this chapter, we created and referenced a style directly in the XAML in Visual Studio. Let's modify the style we made in Blend to see how to do it graphically. To do this, we will need to:
- Open up the CakeNavigationButtons solution in Expression Blend.
- In the upper right corner, there are three tabs (Properties, Resources, and Data).
- On the Resources tab, expand the tree node marked [UserControl] and click on the button highlighted below to edit the [Button default] resource.
- Your art board should look something like this:
- Click on the Properties tab and scroll down to the Text section:
- Change the FontSize to 14 and click on the B and the I buttons to toggle on Bold and Italic.
- Type cursor into the Search box. Notice how the Properties tab displays only the Cursor property.
- Next, change the value in the drop down list to Hand:
- Type margin into the search box and put 5 into each of the text boxes as shown in the following screenshot:
- Look over to the left hand side of the screen; you'll see a tab named Objects and Timeline. Click on the button with the up arrow that I've highlighted in the following screenshot. This will get you out of Style editing mode and back into the main level of our application:
- Choose Run Project from the Project menu or hit F5 to run the project.
- Notice what's changed. There is now a space around each button, the font's appearance has changed and the cursor changes to a hand when you mouse over each of the buttons. Your application will now look similar to the following screenshot:
- The buttons have a red tint to them, but there is still some way to go.
What just happened?
We have just edited a style in Expression Blend and the software did all the heavy lifting for us. If you take a peek at the XAML markup, you will see that the Style has been expanded to include a few more Setter nodes. Each one corresponds to the changes that we made:
<Setter Property="FontSize" Value="14"/>
<Setter Property="Background" Value="Red"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontStyle" Value="Italic"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Margin" Value="5,5,5,5"/>
You most certainly could have created this XAML by hand, but as you've just seen, it's often faster to use Blend for this. In many real world scenarios, you will have to get your hands dirty in the XAML from time to time to tweak a value.
Have a go hero
So, we have a style that defines the way we would like our buttons to look. What if we wanted to override certain properties? For example, if you wanted the font size on the Home button to be different than the others, you could specify a smaller or larger value. Once again, you can do this in Blend via the Properties tab or in the XAML using the following code:
<Button Content="Home" FontSize="9" />
By using this code, you will be presented with this screenshot:
Alternatively, you could define another style; one that specifies a smaller font size. We've seen that done in XAML, but not in Blend yet.
Let's do that now. Make sure that the UserControl element is selected, then click on the Object menu, and then Edit Style|Create Empty... You will then see the following dialog box:
Next, change the Name to smallerTextStyle then click OK. Use the Properties tab to change the font size to 9. Feel free to change some other properties too.
When you are finished, click the up button on the Objects and Timeline tab to exit style editing mode. Once you are back in the main view, select the Home button. Type style into the search box on the Properties tab (you will find it on the right-hand side of Blend's window). Under Miscellaneous, you will see a Style property with a little square next to it as in the screenshot below. In Blend, this means that there are more properties for you to edit. Click the square to bring up the Advanced Property Options context menu.
Once you click on the square, the following context menu appears. Choose Local Resource|smallerTextStyle from the sub-menu just as you see it in the following screenshot:
Run the solution again or look at the art board to see how the button has changed. You can experiment with assigning this style to some of the other buttons, editing the existing styles, or creating new styles. On buttons where the smallerTextStyle is applied, the button text will be smaller. On buttons where the default style is applied, the button text will be larger.
In this article, we learnt about Expression Blend.
If you have read this article you may be interested to view :
- Navigation Widgets and Styles in Microsoft Silverlight 4
- Control templates, Visual State Manager, and Event Handlers in Silverlight 4
- Animation in Silverlight 4
- Creating a WCF Service, Business Object and Data Submission with Silverlight 4
- Creating Data Forms in Silverlight 4
- Data Validation in Silverlight 4