With Web.UI 2010, ComponentArt has introduced the ability to quickly apply a pre-built stylized design to UI controls in the form of Themes. This allows developers to concentrate on the functional behavior of the control, as design concerns are essentially moved into CSS. This has the added benefit of cleaning up the control definition code.
To use Themes with one of the pre-built styles included with the Web.UI installation package:
1. Set AutoTheming to true on the control.
ASP.NET AJAX:
<ComponentArt:Menu
AutoTheming="true"
...
ASP.NET MVC:
<%= Html.ComponentArt().Menu()
.AutoTheming(true)
...
The control will now render out CSS classnames on its elements, as well as generate any client templates and/or ItemLooks used by the Theme.
2. Supply the CSS classname definitions. The Web.UI installation package includes several pre-built themes. To use one add a link to the "theme.css" file, with the associated image files in the same directory as the stylesheet.
<link href="/themes/arcticwhite/theme.css" type="text/css" rel="stylesheet" />
Inside this stylesheet are all of the expected classes necessary to define the appearance of the control.
The resultant Menu with the ArcticWhite theme applied:

All Web.UI ASP.NET AJAX/MVC controls on the page with AutoTheming enabled should now be drawn with the Theme applied, without requiring setting any additional properties. Note that changing the applied Theme is literally as easy as changing the stylesheet link to point to a different "theme.css" file.
3. (Optional) Add Theme-coordinated icons.
a. Specify an IconCssClass/IconUrl on items.
XML:
<SiteMap>
<item Text="File" >
<item Text="New..." IconCssClass="icon-file-new" />
<item Text="Open..." IconCssClass="icon-file-open" />
...
ASP.NET AJAX:
<ComponentArt:Menu ...>
<Items>
<ComponentArt:MenuItem Text="File">
<ComponentArt:MenuItem Text="New..." IconCssClass="icon-file-new" />
<ComponentArt:MenuItem Text="File" IconCssClass="icon-file-open" />
ASP.NET MVC:
<%= Html.ComponentArt().Menu()
...
.Items( o =>
{
o.Add().Text("File").Items( o2 =>
{
o2.Add().Text("New...").IconCssClass("icon-file-new");
o2.Add().Text("File").IconCssClass("icon-file-open");
The predefined IconCssClass names are enumerated in the "icon-map.png" file inside the /themes/ folder.
b. Add a link to the "icons.css" file, with the associated "icons.png" file in the same directory as the stylesheet. If there are disabled items, make sure that "icons-disabled.png" is also in the directory.
<link href="/themes/arcticwhite/icons.css" type="text/css" rel="stylesheet" />
The resultant Menu with some icons defined:
