Check out the difference between a naked ASP.NET project and the same project using a Developer Express theme:
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. Copy DevExpress Themes To Project Folder
There are several great pre-built themes that ship with our ASP.NET controls like the Office 2003 themes. First add a new type of ASP.NET folder to your solution, the App_Themes folder. Then copy the subfolders(themes) from the following folder to your local App_Themes folder in your web project:
- C:\Program Files\Developer Express .NET v8.1\Demos\ASPxGridView\CS\ASPxGridViewDemos\App_Themes
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
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 |
 |
 |
| |
|
| Youthful |
Black Glass |
 |
 |
Improve your UI by adding these Developer Express themes. Then leave a comment below about how much your users love this feature.