Silverlight 4 User Interface: Date and Time Input, Tables, and Ratings

(For more resources on Microsoft, see here.)

Designing date picker interface

Dealing with dates is far from simple. Different cultures, a globalized world, and fast information exchange require simple and error-prone ways to keep date formats correct and adjusted to locale and other user preferences.

Silverlight and its Toolkit are now equipped with the Date Picker control, enabling you to easily pick and get date formats.

This recipe shows you how to implement and design this kind of interface.

Getting ready

Start your Expression Blend 4 and then select New project... From the dialog that appears select Silverlight and then Silverlight Application, make sure that Language is set to C# and Version is 4.0. At the end hit OK.

How to do it...

  1. After you have created your new project, under the Objects and Timeline pane you will see UserControl and LayoutRoot. LayoutRoot is a Grid control hosted in UserControl.
  2. Go to the Asset library and locate the DatePicker control. Draw two DatePicker controls and add two TextBlock controls above them with Text properties set to Start date: and End date:, respectively. Basically, you need to create a simple UI that looks like this:

  3. As this is really a simple recipe without any real coding, let's just go and hit F5 and explore the current, out-of-the-box supported features.
  4. If you click on the calendar icon close to the Start date DatePicker you will see that a drop-down calendar control appears, allowing you to select the date from the calendar interface. You can see that the current date is selected and that by clicking on the header part of the calendar you can easily navigate between months or even years. This all allows for a really fast date selection mechanism.
  5. Also, after you select the date, note that it will be displayed in the text field part and it will be formatted according to the local computer settings. The next picture shows you example where user has it's settings set to Croatian( Croatia). In this specific setting, dates are being formatted in the following way: (Date / Month / Year)

  6. The same date for the users with Culture settings set to English (United States) looks like this:

  7. Of course, the DatePicker control allows for some modifications. Select the DatePicker control and under the Properties pane set the SelectedDateFormat to Long. Your date representation will now look somewhat like this:

  8. From the developer's point of view, having different date formats and representations might look cumbersome and difficult when it comes to handling this information. However, no matter how your date is represented it's easy to get all the required information and manipulate them.
  9. For example, the following lines of code are responsible for selecting the day, month, and year and it's completely irrelevant which culture settings you might have.

    txtDay.Text = dtpStart.SelectedDate.Value.Day.ToString();
    txtMonth.Text = dtpStart.SelectedDate.Value.Month.ToString();
    txtYear.Text = dtpStart.SelectedDate.Value.Year.ToString();

  10. The result might look like this:

  11. Also note that there are a number of different methods available for manipulating the date elements. For example, you can use the AddMonths method and add any number of months to the current selection. This might be useful in scenarios where, for example, end date is always calculated as starting date plus one month. Simple code for that would look like this:

    txtMonth.Text = dtpStart.SelectedDate.Value.AddMonths(1).Month.

How it works...

The DatePicker control is one of those rich controls providing you with a broad spectrum of functionalities and out-of-the-box supported features.

We've added the DatePicker controls and it was easy to interact with them. Just by clicking on the calendar icon users have gained simple and familiar interface for them to select any given date. The current date (today) is clearly marked and navigation through months, years, and even decades is supported.

Support for globalization and different time formats is also available. DatePicker will automatically recognize the culture settings on your computer and apply them.

Also, by changing the SelectedDateFormat to Long you've been able to see that the date format can also be selected.

After that, several lines of simple C# code explains how you can get values for the day, month, or year and even perform some manipulations on them that can be used in real life projects.

However, this pattern lacks some more sophisticated support for continuous date range selection. This scenario is explained in the recipe dealing with the Calendar control and related user interface elements.

There's more...

As I said at the beginning of this recipe, dates come in many different forms depending on the cultures or event on the specific user settings. A good user interface will automatically adjust itself and allow users to input date in the format that is appropriate for the specific needs and depending on the specific culture.

However, the simplest and probably the most error prone method is to present the users with the simple and very familiar calendar control. No matter their cultural background, it is safe to assume that everyone is familiar with the calendar metaphor and can easily select the year, month, and a date when presented with one.

Date picker in Silverlight comes with a control that looks like a simple text box enabling you to type in the date in a specific format, but it also features the calendar control activated by clicking on the calendar icon. Then, the calendar drops down enabling the users to select a specific date.

The rationale behind this pattern is in the calendar metaphor, one that is practically universal and easily understandable.

Some guidelines

General guidelines regarding the implementation of this specific UX pattern are fairly simple. Mark the current date on the calendar and by default display the current months. Of course, be sure to allow users to select different dates. However, you might want to limit their ability to select dates in the past depending on your particular functionality being implemented in the application itself.

This specific control implementation in Silverlight is well done. There are arrows enabling you to jump backwards and forwards for months and selecting the specific date closes the calendar part and the date is then represented and shown in the text box. The specific date format being displayed depends on your locale settings and properties set for the specific control, as explained in the recipe.

Please note that confident and experienced users might wish to enter dates directly into the text box part, especially if dates occur far in the past or future, so clicking through the calendar might be somewhat ineffective.

Also, take into account that this specific pattern is best used with mouse-oriented users. Navigating through the calendar, though it is supported, is not quite the easiest and fastest way to get around with this control.

One thing to consider is regarding the locale of your users and the display of the information on the calendar part. More on that can be found in the following recipe regarding the usage and implementation of the calendar interface itself.

(For more resources on Microsoft, see here.)

Using and implementing the calendar interface

This pattern is closely related to the previously described one, but this specific implementation in this recipe goes a step further, enabling the users to select a single date or even a range between two dates. It is simply implemented with the Silverlight's Calendar control.

This recipe will explain how to select a single date, how to implement contiguous date selection, and even how to deal with disjointed data selection.

Getting ready

Start your Expression Blend 4 and then select New project... From the dialog that appears select Silverlight and then Silverlight Application, make sure that Language is set to C# and Version is 4.0. At the end hit OK.

How to do it...

  1. After you have created your new project under the Objects and Timeline pane you will see UserControl and LayoutRoot. LayoutRoot is a Grid control hosted in UserControl.
  2. Go to the Asset library and locate the Calendar control. Draw it on top of your artboard. Add the two TextBlock controls right below the Calendar. We will use them to show the selected date in one of them. Basically, you should be aiming for a simple UI looking like this:

  3. Let's add the following code under the SelectedDatesChanged event of the Calendar control:

    txtSelectedDate.Text = calStart.SelectedDate.ToString();

  4. With the textBlock control previously named txtSelectedDate, after you hit F5 and select any date on the Calendar control, that value should appear right below the Calendar as shown:

  5. In the same way as it was possible in the recipe dealing with the DatePicker control (designing date picker interface), you can easily select Day, Month, or Year.
  6. However, Calendar control comes with a rich set of other functionalities for when you need to handle more date-centered tasks. For example, several selection modes are available.
  7. With the Calendar control selected, locate the SelectionMode property under the Property pane. First, set it to SingleRange and hit F5 to start the application. Click and drag to select a single date range.

  8. Then, go back to the application and set the SelectionMode property to MultipleRange. Hit F5 and now use the CTRL+click to select dates on the Calendar. Note that this selection does not need to be continuous, allowing you to select any possible date pattern.

  9. Also, sometimes you will need to allow users to select not the exact date, but rather to start their selection at the level of months, years, or even decades. You can set those options by changing the values of the DisplayMode property. Available values are Month (it's the default value), Year, and Decade. The following screenshot shows a case where the Decade value is used:

  10. Sometimes you will want to restrain users from selecting the specific dates. For example, if users are trying to book a flight on specific date when there are no flights available, it's a good idea to let them know that the specific date cannot be selected.
  11. Following lines of code will set the January 10th 2010 as a date which cannot be selected.

    calStart.BlackoutDates.Add(new CalendarDateRange(new DateTime

  12. In that case, the Calendar control will look like this, and it won't be possible to select January 10, 2010 as a date:

  13. Of course, it is possible to set the date range for those "blackout" dates. For example, to set the whole week from January 10 to January 16 to be blacked out, you will use the following code:

    calStart.BlackoutDates.Add(new CalendarDateRange(new DateTime
    (2010,1,10),(new DateTime (2010,1,16))));

    And in that case, the Calendar control will look like this:

How it works...

As you can tell just by following the recipe, Calendar controls are very versatile and feature rich. This is also where the main difference between DatePicker and Calendar control is. If you need to simply select a date then you will use DatePicker, but if you are looking for different selection mechanisms, being able to set some dates as not selectable, and a richer experience overall, then you should go for Calendar control.

In this recipe it was explained how you can easily get the selected date using the SelectedDate.ToString(); method.

After that, we played with the SelectionMode property and explored the default, SingleDate, allowing you to select just a single date from the Calendar. Then, we explored SingleRange, allowing you to select a date range but in a continuous manner. The last, but most flexible option was with the MultipleRangle property value, allowing you to select any data pattern by utilizing the well known CTRL+click approach.

Apart from the selection modes, the next step was to explore different DisplayMode property values. As you can probably tell by the name of the property itself it is responsible for the different ways the Calendar control appears, whether it is the default Month, Year, or Decade property value.

Last but not least, especially from the user experience point of view, is the ability to render specific dates or even date ranges as being not available for selection. That can be achieved by utilizing the BlackoutDates property. Please note that this property is also available for the DatePicker control itself and can be used in pretty much the same way as it was described here in this recipe.

There's more...

This pattern is generally used in cases where you want to allow users to select dates from the calendar interface without forcing them to enter the date in the textual format. Furthermore, by utilizing the calendar metaphor users will be able to select more than just a single date and in this recipe it was explained how to select a date range in two forms—contiguous date selection and disjointed date selection.

Though entering the information in its textual form might sometimes be faster, it is significantly more error prone.

When to use this pattern and some general guidelines

Since calendars are well known to almost all users, they also feel confident using them. Therefore, utilizing this specific UX pattern is suitable for scenarios which are not really simple or too trivial.

A general case for usage is connected with the need to enter a range across dates—either in contiguous or disjointed selection mode.

A fairly simple and yet well known case is one where you want to enable your users to book a hotel. This pattern is capable of supporting a number of different scenarios—allowing user to select arrival and departure dates on the single calendar, or to use the two different calendars, the first one for the arrival and the second one for the departure date. However, in the second case, the Date Picker control (as described in previous recipe) might be a better solution. In the long run, Date Picker is a very close relative of the pattern described in this recipe.

Remember, you want to make sure your users feel comfortable, safe, and confident with the user interface. They want to be sure that they have checked right dates and range. Alternatives like text input might be sometimes efficient and faster but you are risking errors. For example, a date like 12/3/2010 might mean December 3rd or March 12th depending on the current locale. With the calendar control and pattern there are no worries regarding such cases. You select the date in the same way as when you are looking at the calendar.

Let's refer to our hotel room booking case. If you are using two calendars (or as suggested for this case, date pickers) be sure that after the users selects the first date (arrival) you set the date in the second part (departure date) on the next day after the arrival. That way the user will be able to easily modify the departure date and since most of the users will be staying in the hotel for a reasonable period of time, making a same-month selection is considered to be a "good default" value. Also, disabling the ability to navigate in the past and select dates from the past as an arrival or departure date is a good idea. As well as it is to check and see if user has selected departure date to occur before arrival date. Make sure that you inform your users about those scenarios or, better yet add some coding logic and prevent illogical choices right from the start. But even in that case, explain to users what has happened; they like to know what's going on and they hate it when they feel constrained. So you need to take care about that as well. Too much help and "safe measures" can actually lead to users' frustration though your sincere intention was to help them. As a rule of thumb you can rely on the fact that if your application is going to be used on an everyday basis by the same or experienced users you can probably be more flexible. And in the case that your users are novice users or ones who only use the solution quite rarely, then imposing more failsafe mechanisms is probably a good idea.

Again, conduct a usability test and even before you do that get to know your users, their needs, habits, and experiences. It's the ultimate resource when designing and implementing user interfaces of any kind.

Of course, this pattern can be used for the past events as well. For example, if you are designing an email client and you want to filter all your e-mails received between two dates in the past you will also utilize this pattern. Be sure, in that case, to enable the date selection for the past in your Calendar control.

Designing time input interface

In its nature this pattern is almost the same as the Date Picker and Calendar pattern and virtually everything in those recipes can be applied in this recipe.

In fact, time input controls and interface are in most cases combined with the two previously mentioned patterns, and provide common date and time input interfaces.

Getting ready

Start your Expression Blend 4 and then select New project... From the dialog that appears select Silverlight and then Silverlight Application, make sure that Language is set to C# and Version is 4.0. At the end hit OK.

How to do it...

  1. After you have created your new project, under the Objects and Timeline pane you will see UserControl and LayoutRoot. LayoutRoot is a Grid control hosted in UserControl.
  2. Go to the Asset library and locate the TimePicker control. Add two TimePicker controls and several TextBlock controls. Set their Text properties to look exactly as in the following screenshot:

  3. Set the Name of the first TimePicker (Arrival) to tmrArrival and the second one to tmrDeparture. Also, set the names for the TextBlock controls under Actual culture and Forced culture to txtActual and txtForced.
  4. With the tmrDeparture selected set the Culture property to, let's say English (United States) or to any other available culture other than your own computer settings. The idea here is to show how TimePicker controls are being affected by the differences in cultures.
  5. Now select the LayoutRoot and go to the Events pane. Add a new event handler for the Loaded event. You can do that just by double-clicking the empty field next to the Loaded event label. New event handler code and a placeholder will be generated.
  6. It should look like this after you add all the required code:

    private void UserControl_Loaded(object sender,
    System.Windows.RoutedEventArgs e)
    txtActual.Text = tmrArrival.ActualCulture.EnglishName;
    txtForced.Text = tmrDeparture.Culture.EnglishName;

  7. If you now hit F5 you will be able to interact with your interface. Set different timings in both TimePickers and you will be able to see how differently they are being rendered, depending on the culture settings.

  8. There are several out-of-the-box supported functionalities. You can go through them by reading the How it works... section.

How it works...

Since most of the desired features are implemented and supported within the DatePicker control itself, it's also simple to understand how this recipe works.

We've created a simple UI that allows users to select two dates—one for arrival and the other for departure. Also, we've (intentionally) selected two different cultures so we can investigate different date formatting abilities and globalization support.

First, the TimePicker control is time formatted according to current culture (one that is based on users' settings) and second one was "forced" by setting the Culture property.

The code snippet shown in the recipe is doing just one thing—when your application loads it is populating specific TextBlock controls with the names of selected cultures.

Apart from these, there are a number of different supported features, and here is the brief overview for some of the most important ones.

Features rundown

If you want to select the current time then just click on the empty TimePicker field and you will see a small pop-up box appear allowing you to select the current time.

Apart from selecting the time value from the drop down list (after you click on a clock icon), you can just type in the time in free form, let's say: 1234 will be rendered as 12:34. If you type a value like 923a then it will be recognized as 9:23 A.M. if your culture is set to one that supports AM / PM notation. A little pop-up box will even follow your entries as you type and try to guess what you are typing in:

Cycling through different values is also really simple. Just position your mouse cursor on hours and then click the up-down buttons and you will cycle through values. The same holds true for minutes, seconds, and AM/PM marks.

Talking about the seconds there are a number of different time formats supported. You can set them by setting up the Format property under the TimeInput section. Try setting it to hh:mm:ss to display seconds as well.

There's more...

This pattern is generally used in cases where you want to allow users to enter time from the predefined interface without forcing them to enter it in the textual format.

Time formats suffer the same problems as specific date formats. Different cultures have different time input formats. Therefore, by utilizing the TimePicker control you will enable users to select dates from a predefined list of available dates.

Some guidelines

Offer the users time formats based on their current location. For example if your users are from the USA then usage of the A.M. and P.M. elements is necessary while users from, let's say, Croatia will differentiate 7:00 A.M. and P.M. by displaying them as 7:00 (in the morning) or 19:00 (in the evenings).

Silverlight offers great support for different cultures and time format styles so you should use those and enhance your user's experience.

Regarding the time selection be sure to allow users to select different times from the drop down list as well as you should be able to allow them to manually type in the time. However, as it was the case with the date selection you might want to limit their ability to select time periods in the past. Again, this will depend on your particular functionality being implemented in the application itself.

Be sure to allow users to quickly enter the current time. Recipe shows you how to do that.

Also, once the users have entered or selected a specific time, be sure to allow them to change and adjust their selection. Common practice follows the fairly well-known interaction model where users position their mouse cursor on the hour's part, click, and then by using up and down buttons they can cycle through hours. The same holds true for the minutes—users can click on the minute's part and cycle through them.

You should think about the amount of hours or minutes being changed by a single click on those buttons. Sometimes you want to limit all minute selections to be in brackets of five minutes—00, 05, 10, 15, and so on—while sometimes you want to make sure that your users can select any time like 12:34:56.

As it was the case with the DatePicker, experienced users will generally appreciate the ability and freedom to enter the time selections manually. That functionally is supported out-of-thebox, but will need to take care with some validations and prevent users from entering bogus data. However, if your user wants to enter 12:34:56, then they can just go into the TimePicker control and type 123456 and depending on the locale / culture settings this data will be automatically parsed and formatted in the right way. (At least for the most part to be honest, and that's the reason you should be careful about entering the time and date since those parts of the application can be critical. You definitely don't want your users to be angry and frustrated for booking their hotel stay or flight at wrong time and date because of your poor interface).

(For more resources on Microsoft, see here.)

Implementing star-based rating

With the Web 2.0 advent, but even before that, users wanted to have a simple and easy way to leave their feedback on a website. Movie or vine review, article or DVD users like to rate and grade content.

A typical star-based rating implementation looks like this one from the CNET's Download website:

A general guideline for implementing this specific UX pattern is the social aspect of the website. Basically, if you are dealing with a consumer goods website or more importantly, if a site has a social and sharing aspect to it then implementation of this pattern is justified and good choice.

Getting ready

Start your Expression Blend 4 and then select New project... From the dialog that appears select Silverlight and then Silverlight Application, make sure that Language is set to C# and Version is 4.0. At the end hit OK.

How to do it...

  1. After you have created your new project, under the Objects and Timeline pane you will see UserControl and LayoutRoot. LayoutRoot is a Grid control hosted in UserControl.
  2. Go to the Asset library and locate the Rating control. This control is the central part of this recipe though number of other controls is also being used. Those are primarily TextBlock controls and one Rectangle control.
  3. As always, you can see the full example in the code but the basic idea is to build a simple user interface looking like this:
  4. As you can see, we are mimicking a typical case where a user can rate a specific item such as a book, a DVD, or something else. A user is invited to click on the stars and rate the item.
  5. It is recommended that by default, the rating value is always set to 0. Also, the TextBlock control containing the information about the average rating and number of votes should be (in a real life case) updated to reflect the actual value and rating.
  6. Select the Rating control and under the Properties pane look at the following properties and set them as follows:

    Background: set it to White (RGB: 255/255/255)

    Foreground: set it to some tone of Yellow, let's say RGB: 255/197/0

    SelectionMode: set it to Continuous

    Value: set it to 0

    ItemCount: set it to 5

  7. If you now hit F5 and position your mouse cursor over the Rating control you will notice that stars are change their colors and reflect the current user's choice. You can click on the star and later can change your choice.
  8. In order to read and set the values for average ratings you'll need to programmatically deal with the property Value.
  9. A good idea is to update the value every time user changes the Rating control's Value property. You can read or set that property in C# like this:

    rtnRating.Value = 0.5;

This will set the value to 50 percent. Meaning, if you have five stars visible (you set that number via the ItemCount property) then only 50 percent of them will be marked 2.5. Allowed values are from 0 to 1, where 0 is 0 percent and 1 is 100 percent.

How it works...

This is a really simple recipe and the Rating control is pretty straightforward itself. Also, concrete guidelines and advices for implementation are listed and well explained under the There's more section.

However, let's explore some more interesting parts.

The Rating control supports two basic modes of functioning determined by the value of the SelectionMode property. In this recipe SelectionMode has been set to Continuous enabling users to select any given value for 1 to 5 (or some other value set by ItemCount). However, if you want to select a single value then you can set the SelectionMode property to Individual. In that case, your control in action would look something like this:

Note that even in this case, the Value property has been set to 1 (100 percent) but this value is within the context of a "single star" since we are in the "individual" mode now.

Also, though it's not part of this article, by editing the Rating control's control template you would be able to change star shapes to different objects.

There's more...

Often users need a way to leave a quick and simple feedback or their opinion on a specific item or an object. While you can always implement a rich form interface and allow them to write their review, a very popular solution is to implement the "star-rating" UX pattern.

This pattern, as described in this recipe, allows users to rate a specific item without breaking their current flow of actions or confusing them.

This pattern is very popular these days all around the Web, and it is most commonly used in combination with product reviews and similar content. Also, one of the nice things about this pattern is its light appearance and simple user interaction model.

Some guidelines for design and implementation

The star rating pattern generally involves stars but other icons and graphics elements are also used sometimes. Be sure that they are clickable and that they always change their color on rollover. That serves the purpose to display and clearly points out that users are able to click on those elements.

When users arrive for the first time on the website, the default state should be that all stars are "blank". Good practice, according to numerous sources, is to include an invitation such as text stating something like Click to rate!, or something similar in the tone and meaning.

While users are moving the mouse cursor above the stars they should be automatically updated and change their rating status, most likely through a color change indicating the current user's choice. Also, you might consider providing users with the contextual descriptions for specific rate, let's say from Bad to Excellent or Great when all stars have been filled-in.

The interaction part of this design is of average rating. Every time a user rates an item, that grad should be added to the previously added ones and averaged over the number of all grades received. This value (average rating) should be displayed near the rating stars, but somewhat separate from them.

A good practice is to allow users to be able to change their rating later if they decide to do so. However, that might be a bit more complex and involve user authentication, saving and remembering user's rates and other elements.

Designing list views with alternating row colors

Research shows that, when presented with large amounts of data displayed in rows, users find it difficult to visually concentrate and connect all the information pieces in a given row.

The solution is fairly simple—alternate the background color of rows in your controls and make it easier for users to locate and differentiate each row.

A number of websites are already using this simple and yet so useful pattern. Here is the example from the Google Finance website:

You can see that the rows have alternate colors making it easy to follow pieces of information presented in this table.

However, Google Finance is inconsistent with respect to the alternating coloring, so finding tables looking like the next one is common as well:

But note that even in this case there are grey lines delimiting rows, making it easier to differentiate between rows.

Getting ready

Start your Expression Blend 4 and then select New project... From the dialog that appears select Silverlight and then Silverlight Application, make sure that Language is set to C# and Version is 4.0. At the end hit OK.

How to do it...

  1. After you have created your new project, under the Objects and Timeline pane you will see UserControl and LayoutRoot. LayoutRoot is a Grid control hosted in UserControl.
  2. Go to the Asset library and locate the DataGrid control. Draw it on top of your artboard.
  3. We need some data so we can populate our DataGrid control. Starting from Expression Blend 3, you can use the automatic data generation feature and populate the controls with the date and use it directly within the application.
  4. Go to the Data tab. If it is not visible in the current configuration then go to the Window menu and turn on the Data pane. Click on the first icon reading Add Sample Data Source and from the drop down menu select Define New Sample Data…

  5. A new dialog box will open asking you for the Data source name. Just leave it to its default value and be sure that Enable sample data when application is running option is checked. Hit OK when you are done.
  6. Now, you should be able to see several items under the Data pane. Click on the Collection and drag it over with your mouse and release it when you are positioned above the DataGrid control.

  7. Your DataGrid control will now be populated with some sample data elements. You can always edit this data by clicking on the Edit sample values next to the Collection item under the Data pane.
  8. As you will see, DataGrid features the alternating row coloring scheme by default, but let's see how you can change those values and make them suit your user interface better.
  9. Select the DataGrid control and under the Properties pane go to the Brushes section. Note the AlternatingRowBackgroud item. Change its color to red (RGB: 228 / 42 / 42). Also, be sure that the Alpha value (A) is set to 100%.
  10. The next step is to define the RowBackground color. Click on it and set its value to blue (RGB: 0/90/180) and also set the Alpha value to 100%. You should now be able to see your DataGrid with rows colored in blue and red:
  11. Of course, you will not leave these colors to be red and blue; it was only for demonstration purposes. You will find more practical guidelines under the There's more section later in this recipe.

How it works...

DataGrid is a common control in Silverlight, and it's extremely rich in terms of both functionality and ability to be customized. It is used mostly in cases where you need to present data in a table-like interface. DataGrid is a great candidate for this recipe and UX pattern.

After you've added the DataGrid control to the artboard the next step is to generate sample data in order to populate the DataGrid control. Of course, you are able to add real, live data source, XML file, for example. But from Expression Blend version 3 you can use the sample data generator and populate the number of different controls with the sample data.

Of course, you can edit and customize this data in many different ways, but for the purposes of this recipe we've just created a simple data source and connected it to the DataGrid control.

New rows have been generated automatically and filled with data. The step is to modify Brushes. Setting the RowBackground and AlternatingRowBackground values for those two Brushes is the key part of this recipe since those two Brushes, as their names suggest, are responsible for the coloring alternation.

Refer to the next section for more information about specific guidelines and how to set and make good color choices for row colors.

There's more...

When presented with the information in rows, people usually have problems visually connecting those. A simple and very effective solution in this case is to use different colors for neighboring rows, a so-called alternating coloring pattern.

There are several cases when implementation of this pattern makes most sense.

In order to make the most of it, consider using it in situations where users will be presented with the table containing enough rows to make the usage of the entire table at once uncomfortable. It's hard to give an exact number of rows since this depends on typography and information type, but I'd generally suggest that if you are going over 10 rows you should consider alternating coloring.

Also, this pattern makes most sense if you are dealing with three or more columns in the table. And some resources are citing that this pattern is actually good if you want to remove the visual clutter that appears if you are using border lines for each row to visually separate them. Again, I'd argue that this depends on the actual implementations of the border lines, their color, thickness, and many other attributes.

Roots from the real life situations

Do you remember where you have seen alternating row coloring in the real-life? Pretty much in the same as file folders from the office cabinets have found their way into the graphical user interfaces, alternating row coloring followed the same path.

Green bar reports are really iconic and have been around since the earliest days of the computer industry. Perforated on both sides with the light green and white rows they are alive and well as an UX pattern described in this recipe.

Green bar reports and today's alternating coloring pattern share the same purpose—making it easy for users to look, follow, and use tables and the data present within them.

A few design guidelines

As it was pointed out earlier in this recipe, you should not implement this pattern if you are dealing with a small number of rows. In this case alternating coloring might have just the opposite, distracting effect, as my own usability research has shown.

Also, purely from designer's point of view it is a bad idea to combine grid and column lines with alternating coloring. This is exactly what some table predefined designs within Microsoft Office Word or Excel 2007 come with and it certainly creates tremendous visual clutter.

Use the proper colors and you will achieve great results with respect to the row differentiation. General colors advice would be to stick with the nonintrusive colors (red and blue are a really bad combination; yellow and purple is probably even worse).

Good practice is to make one of the colors exactly the same as your UI background—in most cases that would be white. Stick with the pairs of low-saturation colors that still contrast well. Blue and white, beige and white, light green and white, or two combos of gray shades might work very well. Be sure to make the text on the top of both dark enough so its readability is not affected by the color choice.


In the above article we have covered:

  • Designing date picker interface
  • Using and implementing the calendar interface
  • Designing time input interface
  • Implementing star-based rating
  • Designing list views with alternating row colors

Further resources on this subject:

You've been reading an excerpt of:

Silverlight 4 User Interface Cookbook

Explore Title