Cast your mind back to just before TecheEd US and you’ll remember that Oliver wrote a series of posts entitled “10 Exciting Things to Know About XAF”. The ninth posting was on styling ASP.Net applications. In that post Oliver mentioned that our story around styling wasn’t as we wanted it to be and there would be improvements in the future. Well, with version 8.3 that future is here.
Currently an XAF ASP.Net application is built using a number of templates, these templates define which ActionControllers are to be displayed and in which order, along with how the Controls on the View are to be arranged. There are two ways to influence the look and feel of an XAF ASP.net application, the first is to alter the theme of the supplied templates, and the second is to change these templates to suit your own needs. In this post we will examine both of these approaches.
XAF v2008 vol 3 ships with a single built-in theme. However, more themes will be supplied in future releases. You can also create themes based on the Developer Express ASP.NET controls' existing themes.
The themes for an XAF ASP.Net solution are located in the YourSolution.Web\App_Themes folder. Each subfolder contains a theme, which bares the same name as the subfolder. The current theme is specified by the pages.theme setting in the Web.config file and, by default, is set to the XafDefault theme:
<system.web>
<pages theme = "XafDefault" />
...
</system.web>
You can change this setting's value to any theme in the App_Themes folder.
The second means of styling your ASP.Net application is to change the templates upon which the application is built. XAF uses five Templates in the UI construction:
- Default.aspx - defines the main window.
- Dialog.aspx - defines a popup window.
- Error.aspx - defines an error window.
- Login.aspx - defines a logon window.
- NestedFrameControl.ascx - defines a nested frame (e.g. used to display a nested List View in a Detail View).
XAF v2008 vol 38.3 ships with two main window Templates - Default.aspx and DefaultVertical.aspx. The Default.aspx template, is the default template used to define the main window. In this template, the navigation tabs are aligned horizontally:
However, if you prefer your navigation tabs to be aligned vertically, then you can use the DefaultVertical.aspx template:
So, how do you swap the vertical template for the horizontal one? Actually its very simple and is achieved via renaming. Simply rename Default.aspx (to say DefaultHorizontal.aspx) then rename DefaultVertical.aspx to Default.aspx and you’re done!