.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
david stephan
Gaurav Pal

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Create and Apply Theme Silverlight Application

Posted By:Diptimaya Patra       Posted Date: March 21, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Create and Apply Theme Silverlight Application. Themes are nothing but some predefined styles for each and every control. In this article we are going to see how to create and use the Themes.


Themes are nothing but some predefined styles for each and every control. For example you want a Blue Theme for your Silverlight Application that is for all of your controls inside the application. Of course you can do your own templates for your own controls but in Silverlight 3, themes come by default. It makes your Silverlight Application look good in some few steps.

So in this article we are going to see how to use the Themes.

Crating Silverlight Project

Fire up Visual Studio 2008 and create a Silverlight Navigation Application. Name it as ThemesInSL3.


Open the Solution in Expression Blend 3.

In the Asset library if you look into it you will find several themes under the category Categories-> Theming.


Here is the idea about our application. As you know I have created a Silverlight Navigation Application, the reason I have used is to display all the themes in different page. If you implement all the themes in a single page the xap file will become too large and the Silverlight plug in will not be able to display your content. It will throw a java script error.

So I have decided to design a set of controls in home page without themes on, and other pages the respective themes will be applied.

For the requirement of the Application I have designed the application as follows:


Now we all some controls into the home page and we will replicate all those controls in all our Theme Pages.

As we discussed earlier, I have replicated the above design in all the Theme Pages.


Now, how can we use the themes for a particular set of controls?

The themes control takes only one control to be inside it, whether it is a button control or a grid control. So you might have got the idea of putting the Grid inside the Theme. Yes, you are right.

Now select the theme for the page and add into the grid, then remove the content property of the theme and drag the Grid inside it. You can do it in design view and in xaml view as well.

The following xaml will help you following it.

As we discussed, the above xaml displays the Grid inside the theme.

Now one more thing when you add a theme to the page an assembly is automatically added to the reference and if you go ahead and check your Navigation: Page section you will find it.


Now our application is ready to go, press F5 to run the application and browse through the pages to find out different themes. I am providing different screenshot for your reference.


Theme: Bubble Creme


Theme: Bureau Black


Theme: Bureau Blue


Theme: Expression Dark


Theme: Expression Light


Theme: Rainier Orange


Theme: Rainier Purple


Theme: Shiny Blue


Theme: Shiny Red


Theme: Twilight Blue


Theme: Whistler Blue

My personal favourite are the Shiny Red and Rainier Orange themes, go ahead and choose best for your application.

Enjoy Coding.

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend