Creating rich User eXperiences (UX)

We can click on one of the headers and the grid will sort the data in ascending order. Then, we can click again to sort the data into descending order.

When we drag the slider located at the bottom, the font size for the grid will change, as shown in the following screenshot:

As previously explained, we can also take advantage of the themes included in Silverlight's Toolkit to offer the user a more exciting UI. Follow these steps to apply a theme to the main UserControl for the Silverlight UI:

1. Select Start | All Programs | Microsoft Silverlight 4 Toolkit | Binaries and Windows will open the folder that contains the Silverlight Toolkit binaries. By default, they are located at C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Bin in 64-bit Windows versions. Its parent folder contains the Themes sub-folder, C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Themes. In 32-bit Windows versions, the default folders are C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Bin and C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Themes.
2. Add a reference to System.Windows.Controls.Theming.Toolkit.dll. Remember that it is located in the aforementioned Bin sub-folder.
3. Add a reference to the DLL for the desired theme in the Themes sub-folder. For example, if you want to apply the ShinyBlue theme, add System.Windows.Controls.Theming.ShinyBlue, located in the aforementioned Themes sub-folder.
4. Add the following line to include the namespace that defines the theme in the UserControl defined in MainPage.xaml:

   xmlns:shinyBlue= "clr-namespace:System.Windows.Controls.Theming; assembly=System.Windows.Controls.Theming.ShinyBlue"
   

5. Add the following line before the definition of the main Grid, LayoutRoot:

   <shinyBlue:ShinyBlueTheme>
   

6. Add the following line after the definition of the main Grid, LayoutRoot:

   </shinyBlue:ShinyBlueTheme>
   

This way, the ShinyBlue theme will be applied to the main Grid, LayoutRoot and all its child controls. It wasn't necessary to make great changes to offer a more attractive rich user experience. Let's see the revised look in the following screenshot: