Gary's Blog

In part 1 of this two part post we looked at how to change the theme of the templates that make up an XAF ASP.Net application and how to change the look and feel of the application by swapping one template for another. In this post we are now going to take a look at how the ASP.NET controls' existing theme can be used in an XAF application and how to customize the application's Templates to match the controls' theme.

XAF uses our ASP.NET controls to construct a web application’s UI. These controls ship with a number of pre-defined themes. These themes can be found in your <Program Files>\Developer Express .NET vX.X\Sources\DevExpress.Web.ASPxAutoFormats\ folder. But did you know that you can use these themes in your XAF applications? No? Well you can, and here’s how.

The first thing you have to do is create a subfolder in the YourSolution.Web\App_Themes folder. The theme will take its name from this folder so name it something sensible ;-)

Next, copy all the .skin files from the DevExpress.Web.ASPxAutoFormats\<Theme Name> folder to the application's App_Themes\<Theme Name> folder. The .skin files define the controls' visual settings, then you need to copy all the subfolders from DevExpress.Web.ASPxAutoFormats\<Theme Name>\App_Themes\<Theme Name> folder to App_Themes\<Theme Name> folder. These subfolders contain resources required by the .skin files.

Now, at this point, our XAF theme will affect the ASP.NET controls used in the application. However, XAF uses additional controls that derive from the standard ASP.NET controls. So, to completely define the controls' appearance in the application, we need to define the visual settings of the derived controls.

XAF v2008 vol 3 uses the following derived controls:

• ASPxButtonEx derived from ASPxButton.

• XafASPxButtonEdit derived from ASPxButtonEdit.

• ASPxComboBoxEx derived from ASPxComboBox.

• ASPxGridControl derived from ASPxGridView.

• ASPxSchedulerControl derived from ASPxScheduler.

• ASPxPageControlEx and NavigationTabsActionContainer derived from ASPxPageControl.

The number of derived controls used by the application depends on the modules in use. In the simplest case, you won't need to define the visual settings of all the existing derived controls.

The derived controls differ from their parents only by their behavior. Visually, they are identical to their parents. So, you need to create .skin files for the derived controls, using the visual settings from the parents' .skin files. To do this, create the .skin file for a derived control by copying the parent's file. In the newly created file, change the properties that specify the control's name, its namespace and assembly.

In the following example we will create a .skin file for the ASPxButtonEx control that derives from the ASPxButton control. Suppose the ASPxButton.skin file looks like this:

<%@ Register="" TagPrefix="dxe" Namespace="DevExpress.Web.ASPxEditors" Assembly="DevExpress.Web.ASPxEditors.v8.3" %>
  <dxe:ASPxButton runat="server"
  CssFilePath="~/App_Themes/Plastic Blue/{0}/styles.css" CssPostfix="PlasticBlue">
  </dxe:ASPxButton>

Create the ASPxButton_xaf.skin file. Copy the first line from the ASPxButton.skin file and change the Namespace and Assembly properties to the correct ones. Since the ASPxButtonEx control resides in the DevExpress.ExpressApp.Web.Editors.ASPx namespace of the DevExpress.ExpressApp.Web.v8.3 assembly, the first line will look like this:

<%@ Register="" TagPrefix="dxe" Namespace="DevExpress.ExpressApp.Web.Editors.ASPx" Assembly="DevExpress.ExpressApp.Web.v8.3" %>

In the second and fourth lines the control's name must be changed from ASPxButton to ASPxButtonEx:

<dxe:ASPxButtonEx runat="server"
</dxe:ASPxButtonEx>

The third line doesn't require any changes. So, the complete ASPxButtonEx_xaf.skin file looks like this:

<%@ Register="" TagPrefix="dxe" Namespace="DevExpress.ExpressApp.Web.Editors.ASPx" Assembly="DevExpress.ExpressApp.Web.v8.3" %>
  <dxe:ASPxButtonEx runat="server"
  CssFilePath="~/App_Themes/Plastic Blue/{0}/styles.css" CssPostfix="PlasticBlue">
  </dxe:ASPxButtonEx>

After you create the .skin files for all the derived controls, the created theme will affect all the controls used by XAF. To completely define the application's appearance, you will need to customize the ASP.NET pages used by the XAF application. These pages are automatically included in the ASP.NET application project and are:

1. Default.aspx - defines the main window.
2. Dialog.aspx - defines a popup window.
3. Error.aspx - defines a error window.
4. Login.aspx - defines a logon window.
5. NestedFrameControl.ascx - defines a nested frame (e.g. used to display a nested List View in a Detail View).

To leave these templates as they are, but simply apply our new theme then we have to add the Xaf subfolder to the new theme folder. The default pages use images and style sheets from the XAF subfolder that are contained in each supplied theme (see App_Themes\<Theme Name>\Xaf). So, add the XAF subfolder to the newly created theme folder. Then, Repaint the required elements. The XSF subfolder must contain the same images and style sheets as the predefined theme folders. So, repaint these elements so that they look consistent with the entire theme, and add them to your XAF subfolder.

On the other hand, if you want to redesign the default pages, and be sure that the predefined custom themes can be applied to them, do the following:

• Redesign the pages contained in your ASP.NET application project.
• Place the images and style sheets that the new pages use to the required App_Themes\<Theme Name> folders in your project. Note that these images and style sheets may be different, in different themes, so as not to break the theme's consistency.

After you've customized the pages, whether using the first or second approach, you will be able to change the themes located in your application project easily, simply using the configuration file.