DevExpress ASP.NET Themes – Easy 3 Step Customization for Your Projects

ASP.NET Team Blog
15 July 2008

Check out the difference between a *** ASP.NET project and the same project using a Developer Express theme:

image image

Nice upgrade, isn't it? Here are the 3 simple steps to add Developer themes to your project: 

1. Add a Combo Box for Selecting the Theme

First you’ll need to decide on which page you want to put the theme selection combo box. You can put it on a master page so that it’s available on all derived pages. Or you can put it on a user customization page, like an options/settings page. Putting the the combo box at the top of the page will make it easier for the user to find and select the theme. You can see a sample of this in the ASP.NET demos. I recommend binding this combo box to an XML file that contain a list of the available themes.

2. Use DevExpress ASP.NET Theme Deployment Tool

There are several great pre-built themes that ship with our ASP.NET controls like the Office 2003 themes. Check out the ASPxThemeDeployer video to learn how to copy the DevExpress ASP.NET themes to your local web projects. Click the image to watch the video:

image

3. Add Code To Load/Save the Themes

In this last step, we’ll add some code to bind as well as handle the load/save of the themes to cookies. Add this code to your CodeBehind file which contains the combo box. This will load and save the selected theme into a cookie so the users don’t have to re-select their favorite theme every time. And to make it easier handle these cookies, include one of JavaScript utility files in a new folder called ‘scripts’:

  • C:\Program Files\Developer Express .NET v8.1\Demos\ASPxGridView\CS\ASPxGridViewDemos\Scripts\Utilities.js

Please note that with the DXperience v2010 vol 1 release, we've moved the local demos location to the User Documents area. For example, on my Windows7 install, the file is located here now:

  • C:\Users\Public\Documents\DevExpress 2010.1 Demos\Components\ASPxGridView\CS\ASPxGridViewDemos\Scripts\Utilities.js

This file contains some methods which we’ll call from the client-side to save the theme whenever the user selects a new theme:

<dxe:ASPxComboBox AutoPostBack="True" DataSourceID="xdsThemes" Width="150px" 
ID="cbSkins" runat="server" EnableViewState="False" 
ClientInstanceName="cbSkins" OnDataBound="cbSkins_DataBound">
<ClientSideEvents SelectedIndexChanged="
function(s, e) {   
	DXSaveCurrentThemeToCookies(s.GetSelectedItem().value);
}" />

Here's a complete sample project that shows the combo box for themes in action [Sample project: (C#) ChooseSkinDemo.zip | (VB) ChooseSkinDemoVB.zip].

Soft Orange Red Wine
image image
   
Youthful Black Glass
image image

Improve your UI by adding these Developer Express themes. Then leave a comment below about how much your users love this feature.

Geoff Davis
Geoff Davis

Nice touch Mehul, I'll definately check that out...

15 July, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Thanks Geoff, this feature is mostly for the users but it's always a nice touch to give them some fun features like customizing the UI.

15 July, 2008
Chris W Walsh
Chris W Walsh

good job Mehul, though the Themes in the ASPxGridViewDemos folder are not the Complete Themes for ALL of the DevExpress ASP.NET controls.  

There is a suggestion lying around somewhere for DevExpress to provide a "complete" folder for each different theme :)

15 July, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Thanks Chris. I'll look into that complete themes folder.

16 July, 2008
Christopher Todd
Christopher Todd

Yeah, this is nice. I didn't realize switching themes was this easy. I am with Chris Walsh about the complete theme/skin folder. I know that some skin files do not exist for controls like the ReportToolBar, etc. I'm going through now and switching my current project over to use the theme/skin technique so I will have a better idea of what skin isn't provided shortly.

Thanks,

Chris.

16 July, 2008
Christopher Todd
Christopher Todd

Actually, I just found all of the skin files that I was missing. They were located under the source folder. So, I don't see anything that isn't complete... yet.

16 July, 2008
Anonymous
Alex

Anyone have the code in VB?

17 July, 2008
Edgardo Zeno
Edgardo Zeno

I tried to apply thes skins to my web project and got this error.

Server Error in '/AllToolsBinarys' Application.

--------------------------------------------------------------------------------

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: Could not load file or assembly 'DevExpress.Web.ASPxEditors.v8.1' or one of its dependencies. The system cannot find the file specified.

Source Error:

Line 1:  <%@ Register TagPrefix="dxe" Namespace="DevExpress.Web.ASPxEditors" Assembly="DevExpress.Web.ASPxEditors.v8.1" %>

Line 2:  <dxe:ASPxButton runat="server"

Line 3:      CssFilePath="~/App_Themes/Alltoolswarehouse/{0}/styles.css" CssPostfix="Alltoolswarehouse">

Source File: /AllToolsBinarys/App_Themes/AllToolsWarehouse/ASPxButton.skin    Line: 1

Assembly Load Trace: The following information can be helpful to determine why the assembly 'DevExpress.Web.ASPxEditors.v8.1' could not be loaded.

WRN: Assembly binding logging is turned OFF.

To enable assembly bind failure logging, set the registry value [HKLM\Software\Microsoft\Fusion!EnableLog] (DWORD) to 1.

Note: There is some performance penalty associated with assembly bind failure logging.

To turn this feature off, remove the registry value [HKLM\Software\Microsoft\Fusion!EnableLog].

I am using dashcommerce as my platform.

any suggestions. Thanks.

--------------------------------------------------------------------------------

Version Information: Microsoft .NET Framework Version:2.0.50727.1433; ASP.NET Version:2.0.50727.1433

21 July, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hello Eduardo,

Sounds like you might be running an older version of DXperience. The code included uses v8.1.2 but you can change it using the the ProjectConverter tool included in our ".../Program Files/Developer Express..." folder.

21 July, 2008
Anonymous
Dennis

Hi Mehul,

Is there a code in VB?

Thanks.

23 July, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Alex/Dennis,

You can check out the VB version of the project here:

http://tinyurl.com/5g9e4q

23 July, 2008
Anonymous
Dennis

Thanks Mehul!

23 July, 2008
Anonymous
Amin

I am trying to add the theme combo box to a master page and getting this error when I compile it.

'MyProj.Shell.MasterPages.DefaultMaster' does not contain a definition for 'Theme' and no extension method 'Theme' accepting a first argument of type 'MyProj.Shell.MasterPages.DefaultMaster' could be found (are you missing a using directive or an assembly reference?)

6 August, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Chris,

About the complete themes folder, you may want to track this suggestion: www.devexpress.com/issue=S91705

7 August, 2008
Anonymous
Ric

Hi I am getting the below error when trying to use the DX Treelist on an ASP.NET project.

Thanks,

Error 1 The type or namespace name 'ASPxTreeList' does not exist in the namespace 'DevExpress.Web' (are you missing an assembly reference?) \ReportsAdminTool\Default.aspx.designer.cs 47 42 ReportsAdminTool

11 August, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Ric,

Do you have the Register command at the top of your aspx page? Something like this:

<%@ Register assembly="DevExpress.Web.ASPxTreeList.v8.2, Version=8.2.2.0, Culture=neutral, PublicKeyToken=9b171c9fd64da1d1" namespace="DevExpress.Web.ASPxTreeList" tagprefix="dxwtl" %>

11 August, 2008
Anonymous
Blog de Rodrigo Juarez sobre TI » Blog Archive » Cambio de temas ASP.Net y DevExpress

Pingback from  Blog de Rodrigo Juarez sobre TI  » Blog Archive   » Cambio de temas ASP.Net y DevExpress

25 September, 2008
Phillip Hawkins
Phillip Hawkins

Where's the default.aspx.designer.cs file?

3 October, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Phillip,

This is a web site and not a web application project so it doesn't have the designer file(s):

http://tinyurl.com/3t32vl

3 October, 2008
Anonymous
RP

Huge thanks.

BTW I have found I klot of Themes under the C:\Program Files\Developer Express .NET v8.2.6\Demos\ASPxperience\ASPxperienceDemos\App_Themes.

27 Themes!

3 December, 2008
Anonymous
The ASPx Blog - Mehul Harry's DevExpress Blog

There’s a new ASP.NET theme available called Aqua . And true to its name, the Aqua theme has a light

4 December, 2008
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hello Deepak,

Please contact our support team who can help you figure out the specific cause of the issue. Thanks.

9 February, 2009
Anonymous
The ASPx Blog - Mehul Harry's DevExpress Blog

Check out this 8 minute ASPxGridView change themes dynamically video . In the video, you'll learn

18 February, 2009
Anonymous
The ASPx Blog - Mehul Harry's DevExpress Blog

I’ve mentioned before about how the DXperience 2009 volume 2 release packs all the DevExpress ASP.NET

24 July, 2009
Anonymous
viv

Hi mehul

Please tell how to implement all this for a master page

where to put the code if i have a combobox in masterpage

8 September, 2009
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hello Viv,

Take a look at this:

www.devexpress.com/issue=Q214797

If that doesn't help then please contact our support team:

www.devexpress.com/.../CreateIssue.aspx

8 September, 2009
Marek Kajta
Marek Kajta

I have multiple master pages and was wondering how do you dynamically change the theme for the entire site upon user selection (dropdownlist).

Eg. I have MasterPage.master which is only used for the default.aspx page. I have admin.master for all subsequent pages. The dropdownlist for theme selection is on the masterpage.page page.

When I use your example it works well with the default.aspx, but doesn't work with the admin.page and all the subsequent pages.

When I try to put the code for changing the theme on the preinit of default.aspx, it only changes the theme of the default.aspx page and none of the others (which use a different master page).

I'm using DevExpress 9.1.x

Any help is appreciated.

15 October, 2009
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Marek,

I recommend uploading that sample to the support center and they can help you:

www.devexpress.com/.../CreateIssue.aspx

15 October, 2009
Anonymous
grignolino

This blog contains really good stuff.Thanks for sharing this interesting blog.

19 January, 2010
Darko Delic
Darko Delic

Hi!

I'm using version 10.1.5 and there's no Utilities.js included. When I try to include Utilites.js from any earlier version I get a bunch of errors starting with '__aspxIE' is undefined, which is a boolean used but never declared in Utilities.js

Is there a workaround for newer versions?

Best regards

10 September, 2010
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Darko,

With the DXperience v2010 vol 1 release, we've moved the local demos location to the User Documents area. For example, on my Windows7 install, the file is located here now:

C:\Users\Public\Documents\DevExpress 2010.1 Demos\Components\ASPxGridView\CS\ASPxGridViewDemos\Scripts

13 September, 2010
Preetham Reddy
Preetham Reddy

Hi,

Do you have MacOS theme?

10 November, 2010
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hello Preetham,

Nothing specific like a MacOS type of theme. I recommend creating a suggestion:

www.devexpress.com/.../CreateIssue.aspx

10 November, 2010
Irwing De Luna
Irwing De Luna

Hi Mehul.

I'm using version 2010.2 and the theme selector is changed, it's more cool! but i can't implement correctly in my Default.aspx page.

Help me please.

23 February, 2011
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@Irwing,

Please contact our support team at this link so they can help you:

www.devexpress.com/.../CreateIssue.aspx

Thanks.

23 February, 2011
Anupam Jana
Anupam Jana

Hello Mehul,

I am customizing DevExp Grid by providing some more features.

Class defination is like that

namespace Envision.Controls.Toolkit.DevEX

{

   public delegate void GridEventHandler(object sender, EventArgs e);

   [ToolboxData("<{0}:EnfsDevEXGrid runat=server></{0}:EnfsDevEXGrid>")]

   public class EnfsDevEXGrid : ASPxGridView

   {.....}

}

And I am using this EnfsDevEXGrid in other page. That page is using theme, but EnfsDevEXGrid is not implementing theme.

Please let me know what the issue is.

Thanks,

Anupam

13 June, 2012
Lanette (DevExpress Support)
Lanette (DevExpress Support)

Hello,

To implement dynamic theme switching in the latest versions of our controls, use the approach we illustrated in our How to change themes on the fly example.

Feel free to submit a ticket in our Support Center if you need assistance with this approach.

Thank you.

 

9 August, 2019

Please login or register to post comments.