When Windows Presentation Framework (WPF) and Silverlight first came out, the announcements happily proclaimed that it was even easier to have your visual design team build really nice user interfaces that we, the developers, could then enhance with code. But what about the significant number of us that don't have a visual design team or even a single visual designer?
Even though we may not have had an art class since 6th grade, developers can create really nice looking Silverlight applications. And Silverlight Themes makes it easy.
NOTE: Silverlight themes are part of the Silverlight Toolkit that you can download from here.
Take this simple Silverlight page:
It looks OK. Kind of looks like a WinForms application. But it can get the job done. The user can click on Edit to edit the customer information. Or add, edit, or delete contacts for the customer. The user can also view an invoice summary or click the Open button to view the details of any invoice.
Now let's apply the Bureau Black Theme:
That looks more like a Silverlight application! Even though the functionality is exactly the same, applying a theme can make it look much nicer.
NOTE: In addition to applying the theme, some additional design features were applied to the dialogs shown in this post. For example, color and rounded corners on the page sections.
Don't like black. How about the Shiny Red Theme:
Want it more white, try the Whistler Blue Theme:
There are many more themes to choose from such as Expression Light and Rainier Purple.
Applying a theme to your page is easy. First, ensure that you have installed the Silverlight Toolkit as mentioned above. Then, if you are using Blend or Visual Studio, just drag and drop the desired theme from the toolbar to your page. This adds the appropriate references and namespaces to your code.
To theme the entire page, set the theme element around the entire page contents.
In XAML:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:bureauBlack="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.BureauBlack"
mc:Ignorable="d"
x:Class="SampleSimpleSL.CustomerManagementUC">
<bureauBlack:BureauBlackTheme>
<Grid x:Name="LayoutRoot">
. . . [Your code here]
</Grid>
</bureauBlack:BureauBlackTheme>
</UserControl>
NOTE: When you drag and drop the theme, the designer may add a bunch of attributes to the theme tag, such as a Content attribute. Remove these or the theme may not work properly.
Though you can't see it in the above screen shots, the themes also provide interactivity effects. For example, as you move the mouse over list box items, the items are highlighted. If you move the mouse over a button, the button color changes or highlights, and so on.
For example, here I had the mouse over the Edit button when I captured the screen:
Microsoft provided an interactive page to try out the themes. You can see the interactivity effects for each of the themes here. Select Theming | Theme Browser from the panel on the left. Then click on the desired theme across the top:
Pick a theme for your application and see what a difference it can make in your visual design.
Enjoy!