Adding Design and Polish
At this point, the application is functionally complete, but you certainly couldn't call it beautiful, well designed, or polished. But it's easy to enhance by adding some simple design elements. This example uses a dark color scheme similar to the design chosen by Blend itself, and also by Vista, Office 2007, and other applications. Feel free to substitute a color scheme that is more to your liking.
 | |
| Figure 7. Subtle Gradient: The sample application uses a subtle linear gradient applied to the window background, from black to a color that is just slightly off-black. |
First, change the window background to black (or another color of your choice). However, con't set it to a solid black because that usually looks artificial and "computer graphic-y." Instead, set the background to a simple linear gradient that starts out pure black in the top-left corner and is just
slightly off-black in the bottom-right corner. Creating subtle gradients is a simple trick that often results in a more polished look. In nature, nothing is just a single color. When you look at a wall, for instance, due to lighting in the room, its color will vary slightly over different parts of the wall, even though the wall itself is painted in just a single color. A wall with exactly the same color everywhere would look unnatural to the human eye. Therefore, creating a subtle gradient looks very natural and "right." This trick works only on a subconscious level. If users actually notice the gradient, the trick falls apart. Therefore, keep the two gradient colors close, and use colors from the same color family. A gradient from a dark red to a dark green is never subtle.
Figure 7 shows the property settings for a black to slightly off-black gradient.
Another simple trick with gradients is to avoid making them run exactly vertical or exactly horizontal (unless you want to simulate a material that has just such a property, as in the glass example below). You can use the "Brush Transform" tool from the Blend Toolbox to easily change the angle of the gradient. Select the root layout grid (you'll apply this effect to the grid, not the window, although in this example you could have chosen one or the other with equal success) and pick the Brush Transform tool, which shows a big arrow in the design window. Simply drag the start of the arrow to the top-left corner of the grid/window, and the end of it to the bottom-right corner.
You can now launch the application to see the resulting effect. However, you will quickly notice that not much of the effect is visible, because the list boxes use up almost the entire window. To see more of the effect, set the background brushes of both lists to be only 10 percent opaque. This will make the individual items hard to read for now, but I'll show you how to address that later. Now, run the application to see the initial design. It still isn't very fancy, but it's definitely a start towards creating a unique experience.
Next, you can redesign each list item so it has a more advanced look. You'll also see how to take the first step towards achieving separation of UI implementation from UI design, by putting the design into a separate file, also known as a
resource dictionary. This change lets developers work with the actual window while designers work with the dictionary without stepping on each other's toes. As an added benefit of this design, you can switch the applied design on-the-fly, creating new skins.
To initiate the process, right-click on the first list, and from the context menu, pick Edit Other Templates → Edit Generated Items (ItemTemplate) → Edit a Copy…. Enter a descriptive name for the template (such as
TeamListItemTemplate) and choose the option to define the template inside a resource dictionary. Because you haven't created a dictionary yet, click the New… button, specify a filename for the dictionary (such as
BlackSkin.xaml) and then choose to store the template in that dictionary.
Blend automatically puts you in template editing mode as a result of the preceding steps. Select the grid (the root layout element of the template) and set its width to
150 pixels, and the height to
185 pixels. This explicitly defines the height of each item in the team list, and provides some extra space for each list item—and a look that's distinctly different from conventional Windows list box items. Because each list item is itself a grid, you have great freedom in designing each item. Continuing with the "black skin" approach used so far, I chose to implement a black "glassy" look for each item. Glass effects are currently all the rage, and can be produced easily without much artistic talent, as you'll see.
| Author's Note: Author's Note: I chose this example theme because it is currently in fashion. Many applications—including Windows Vista and Microsoft Office 2007—use this style, and it's relatively easy to create. In future installments of this article series, you'll see other themes and techniques as well. |
Add a rectangle shape to the grid. Set its margins to four pixels on each side. Change the
RadiusX and
RadiusY properties to 10 pixels each to create a rounded rectangle. (Note that you can also do this through the visual design surface by dragging the corner radius adorners). Then pick the stroke brush and set it to
No brush, because you don't need an outline for the rectangle. You do, however, want a background brush, so create a brush that flows from solid black at the top to slightly off-black at the bottom. (The gradient direction is exactly vertical in this case.)
Add a second rectangle to the very top of the item's grid. Make the height
25 pixels and the right, top, and left margin
5 pixels. Make the corner radius 10 pixels on each dimension as well. Again, you don't need an outline brush, so set it to
No brush. Now, for the first glass effect, create a vertical background brush with a gradient from solid-white to solid-white. However, set the
Alpha channel value of the top color to 15 percent, making it almost entirely transparent. Then set the
Alpha value of the bottom color to
0%, making it completely transparent. Next, add another gradient by clicking a pixel or two to the left of the center of the gradient line in the property grid. Make it white as well, with an alpha setting of 25 percent (a little less transparent, thus making the white more visible). Add another gradient stop a pixel to the right, set it to white, and set its alpha value to
10%. This creates quite a sharp edge between the two gradient stops, which have to be close together. (One characteristic of glass is that it has sharp edges and reflections.)
Right-click the text block in the object tree and choose "Order → Bring to Front" to show the text label as the topmost object. Then, in the property grid, change its vertical alignment to
Top, change the Height to 21 pixels, set the font to 14-point bold. The foreground color has to be solid white, and the text alignment (in the paragraph tab of the
Text category in the property sheet) should be set to
Center. You also need a margin around the object, so set the right and left margin to four pixels and the top margin to eight pixels.
Figure 8 shows the template in design mode. To see the result (displayed in
Figure 9), run the application.
 | |
| Figure 8. Team Item Data Template: The figure shows the data template for a team item in design mode. Note the gradient settings for the background brush. |
|
 | |
| Figure 9. Running Application: Here's a preliminary version of the application at runtime using the data template. |
|
|
Previous Page
