Designing inspiring looking and easy-to-use applications is difficult. There are many elements to consider when creating application UIs, especially using tools and technologies such as Microsoft Expression Blend and XAML. One of the features of many new applications is a compelling and cool UI design. Requirements as simple as color choices, animations, controls to use, graphic elements, and many other elements make us rethink our design concepts and move from a traditional developer-focused gray UI to a more modern and pleasing UI with color, animation, 3D and more types of features.
Many people think that only right-brained folks who went to art school and dress only in black (or have other nonstandard dress attributes) can create new and cool UIs. Well, let's dispel that stereotype. The old saying is that you can't teach an old dog new tricks—interesting, but not true! For instance, every 12 to 18 months in our industry we get kicked into learning something new, so we're continually learning.
Now, let's step out of our developer mold for a minute. Most developers use their left brain to work with code as they build applications. Our left brains handle the logic of our code and process numerous business rules just fine. But if we want to select colors and start creating some cool design stuff, our brains need to flip into the right-brain mode. This is where the really interesting issues start for us non-artists.
Learning to Draw
My good friend Billy Hollis helped point me in the right direction by suggesting I read a great book by Dr. Betty Edwards, Drawing on the Right Side of the Brain. To learn more about drawing and the entire drawing process, see Dr. Edwards' website.
Drawing on the Right Side of the Brain is a phenomenal book, and Dr. Edwards is an incredible writer and instructor. Six months ago I couldn't draw at all, but now I can at least sketch things out. One of the first things Dr. Edwards has you do is draw a picture of your nondominant hand. (Figure 1 shows my drawing.) This exercise teaches you to let yourself go and flip into your nonverbal right brain. When I drew my left hand, I was still early in the book (page 16) and didn't know what to expect. But sure enough, during the drawing my brain shifted from left to right! From then on, I was able to learn more and more about drawing.
I was at page 147 in the book when I started this article, because my research had taken me elsewhere for a short period of time (learning colors, for instance). But now I find myself drawing a lot when I'm just sitting around. For instance, Figure 2 shows a picture I drew one night while watching TV. That lamp and mirror are in my den at home. I realize that my drawing isn't art gallery quality, but it's amazing to me because just a few months ago I would have drawn something that didn't look anything like a lamp. Now I regularly doodle pictures of everyday things when I'm idly waiting somewhere (e.g., at a restaurant). I also look at the world differently now—which is pretty wild after reading only two thirds of a book!
Something that's interesting about learning to draw is how to do perspectives, such as a box or a room in 3D. I always figured artists were born with this ability. Nope! Dr. Edwards explains how to use a pencil and a custom little view port device (i.e., a sheet of plastic you can look through and draw on) to measure sizes and even angles so that you can make them look real. Many great artists had to learn this way.
But what does any of this have to do with software development? I'll explain in a bit, after I discuss color selection.
Color Selection
It's really easy to just say, "I want to build a Silverlight app," and pick a template. Then you get a white form and put some controls on it—mostly gray ones.
But how do we twist our brains around colors? Well, since I never once took an art class in school, I struggled with this one too. Back to Dr. Betty Edwards again and another book: Color by Betty Edwards: A Course in Mastering the Art of Mixing Colors. This book taught me some magic.
One of the things I learned is that you can draw a triangle on a color wheel (invented by Sir Isaac Newton), pick the colors under each of the three points, and have three nicely contrasting colors. The Color Worqx website illustrates how to do this. Although the technique is simple, it isn't for me; I need to spend a bit of time with colors in an application to get a scheme down, then use the awesome tools in Blend (for example) to mix and match them.
One of my clients sent me a link to the Contrast-A website; this site is extremely useful. You can use the dynamic color wheel to select a range of colors. Once you've picked a range, such as a blue gradient like the one on the left in Figure 3, you can then move the color selector in that gradient to select the specific color you want. The website includes a text sample area that shows you samples of the two colors you selected. Brilliant! You can snap the two colors, complete with their hexadecimal numbers, to a palette and print the information for later reference. The site also lets you analyze your colors as they'd be seen by someone who is color challenged.
I recently found a little tool called ColorSchemer Studio that lets you quickly create schemes and even has a gallery you can browse, select from, and modify. I downloaded the 15-day trial, and now I'm hooked!
Now let's see what we can do with some UI features.
2 + 2 = 11
Your left brain is probably saying, "What the heck does he mean by 2 + 2 = 11?" Well, my right brain sent the message to my left brain, so I wrote an equation that's unintelligible by my left brain! In fact, that's what you get when you start putting together drawing, color design, and other things you can do with XAML applications.
Before we have to tweak our brains too much, let's build a new Silverlight project and see what we can do. Instead of creating a new application and trying to figure out what I want to use for colors, I decided to take at look at some themes Microsoft already created for us. Microsoft created three new Silverlight 4 application themes that you can add to Blend 4.0 and Visual Studio 2010. You can download these files from the Silverlight Application Themes page. After you download the themes, follow the instructions in the README_FIRSTThemeUpdate.txt file to install them into Blend and Visual Studio 2010.
Now let's use the themes in Blend 4.0 to jumpstart our applications. Select File, New Project; then select the Themes folder in the Project types tree. You should see the dialog box that Figure 4 shows.
Once I selected the theme, I was presented with a new application with many custom styles defined. Figure 5 shows the new MainPage.xaml. I used the Accent Color Theme, which is pretty neat because it has tons of resources, such as styles and brushes, defined for you. Select a control and click the Resources tab in the property window to see the various resources that are defined, such as color brushes. You can select from the matching colors instead of having to start out with all the colors.
There are a couple of things I don't like about the downloadable themes. First, the themes all generate the main page with the Navigation layout. It's easy to replace, but I don't like assumptions like this. Second, although I now do 100 percent of my real development in C#, it's aggravating that the templates seem (at least in Blend 4.0) to be only in C# and not in Visual Basic (VB). You can easily change it to VB, but Microsoft should have done this out of the box.
Most of the applications I create are business applications, so I don't use the navigation framework. To work with the theme, I just renamed MainPage.xaml and its code-behind file, then opened the code-behind file and changed the class name. Next, I created a new user control of type User Control with ViewModel. (View models are beyond the scope of this article, but I'll cover them in a future article, as well as on my blog.)
The theme template also created a Views subfolder under the project and loaded it with a number of sample .xaml files. I renamed this folder to ViewsFromTheme because I want to put my own controls into a Views folder but for now I want to hang on to these samples.
Now that we have a basic application with a main page and our resources, we can start building stuff. After I created the MainPageView, I added a StackPanel for content (named ContentStackPanel). Next I added the MainContentView user control. As I began to build the page, I added a TextBlock for a label for a field called Name. It was simple to add the control, then set its style to ControlLabelStyle from the theme files. Then I added a TextBox to hold the data and selected its style. Surprisingly, there were only a couple of styles for a TextBox; one was NumericUpDownTextBox and another was AutoCompleteTextBox. I would think there would be more TextBox styles, but at least they're easy to create.
Now let's move back to the MainPageView and add some buttons to navigate through the application. First I added a StackPanel with its orientation set to Horizontal, then I added a button as a child. I was surprised to see that there were only two styles for the Button control defined, and neither seem to be very useful for my applications. But in this case I could use the HyperLinkButton, and the Styles.xaml resource has a PageHyperlinkButtonStyle that works. At this point, the power of Blend 4.0 for working with XAML tasks is really handy. After I added the first and second HyperLinkButtons to the links StackPanel and set the style of each to PageHyperlinkButtonStyle, the two buttons were jammed up together. Instead of setting the Margin on the second button and then each additional button, I changed the style in Blend 4.0 like this:
- Click the Resources tab to the right of the Properties tab.
- Find the style to edit (PageHyperlinkButtonStyle in this case) and click the Edit button or select Edit from the context menu. The style should open in the graphical editor.
- Click the Properties tab. You should see the properties for the HyperLinkButton.
- Whatever properties you change now are changed in the style definition for you.
- Save the file.
Now we can go back to our page and it should reflect the new style changes. Figure 6 shows the UI at this point, with a simple title, a couple of buttons, and the first user control loaded. To load the control, it's simple to add the control to the ContentStackPanels children.
This is where you can start adding a little more pizazz to your application, to make it much better for the user. There are a lot of ways to use XAML animation features in your applications to add features that either attract users or make the application easier to use. In this case, I decided to use a little animation to fade in the content transitions. Adding a fade-in or other slight animation on transitioning to another control makes the application gingerly attract the user to the change in the application state. The animation essentially catches the user's eye as the ContentStackPanel goes from an opacity of 0 to 1 in about 1 second.
Figure 7 contains the code to handle the animation. The four lines after the constructor define the two content controls and then the objects we need for our animation.
Next, the UserControl_Loaded event sets up the animation features such as the from and to values and the time span (1 second). It also sets the storyboard parameters and defaults the ContentStackPanel opacity to 0.
The LoadContent method does the rest of the magic by clearing the ContentStackPanel children and then loading the correct control. Notice how this method stops and then starts the storyboard. Since the method can be run any number of times, you must stop the storyboard first because on any but the first try to start it would fail if you didn't. Now each button just calls LoadContent and tells it which control to load.
Let's go back to Blend. For this application, I need a custom plus sign for some content. I could grab one of the standard bitmap images, but what happens if I decide to make my own XAML element?
Remember the discussion on drawing at the beginning of the article? Well, we can make our own graphics in Microsoft Expression Studio. Figure 8 shows an image that I made by creating a small rectangle in Blend, copying it, pasting it, and setting its transform property to rotate it 90 degrees. Now, let's say I wanted to get rid of the center part of this custom plus sign. I could select both the rectangles and use the Extract Overlap feature in Blend via the Object, Combine, Extract Overlap menu. I'd be left with a new XAML element that looks like this:
<Path Data="M32.5,47.5 L47.5,47.5 L47.5,79.5 L32.5,79.5 z M47.5,32.5 L79.5,32.5 L79.5,47.5 L47.5,47.5 z M0.5,32.5 L32.5,32.5 L32.5,47.5 L0.5,47.5 z M32.5,0.5 L47.5,0.5 L47.5,32.5 L32.5,32.5 z" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="80" Margin="224,112,0,0" RenderTransformOrigin="0.499999988079071,0.5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="80" d:LayoutRounding="Auto">
<Path.RenderTransform>
<CompositeTransform Rotation="90"/>
</Path.RenderTransform>
</Path>
That was pretty easy. You could also build the custom plus sign out of four different rectangles, which would allow you to change the behavior of each element for different actions. For instance, when the plus sign is clicked you could make it grow or animate the various elements. You can't do this with the composite XMAL code we just created. Which approach you take really depends on your needs. Because the new image is totally under your control, you can also change its color and attributes.
Exercise Your Right Brain
In this article I introduced you to just a few topics related to UI construction. If you're not a trained artist, I encourage you to get copies of Dr. Betty Edwards' books and go through all the exercises. Then really dig into the things you can do with XAML. Also, if you work with traditional website designers, remember that most of them are trained in and used to working with 2D websites and working with limited tools that aren't nearly as powerful as XAML.
Ken Spencer ([email protected]) is a longtime Microsoft Regional Director, and he consults as an architect on large application-development projects.
