Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

January 20, 2010

Silverlight: Themes

Filed under: C#,Silverlight,VB.NET @ 1:02 pm

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:

image

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:

image

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:

image

Want it more white, try the Whistler Blue Theme:

image

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:

image

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:

image

Pick a theme for your application and see what a difference it can make in your visual design.

Enjoy!

5 Comments

  1.   GaryC — January 21, 2010 @ 5:36 pm    Reply

    I’ve been having difficulty creating a new theme. Any suggestions?

  2.   DeborahK — January 21, 2010 @ 7:34 pm    Reply

    Hi GaryC –

    I have not yet tried to create my own. At first thought, I think I would copy an existing one close to what I want and then edit it instead of trying to build one from scratch.

    Hope this helps.

  3.   Joe — January 24, 2010 @ 7:12 am    Reply

    “I think I would copy an existing one close to what I want and then edit it instead of trying to build one from scratch.”

    Hi Deborah,

    If you could document the steps, pieces, parts, etc. on how you created your own theme from scratch, that would make an excellent blog entry.

    Some of us “non-artistic” types could use a good tutorial!

    Cheers.

  4.   DeborahK — January 24, 2010 @ 4:45 pm    Reply

    Hi Joe –

    The themes used in this post are all the ones that come with the Silverlight Toolkit. I have not created one of my own. I’m not sure I would attempt to build one from scratch.

  5.   Eduardo — January 26, 2010 @ 6:03 am    Reply

    Great tip, thanks…

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs