Default Implementation of CSS Sprites in DevExpress Themes

  • 2 minutes to read

All built-in DevExpress ASP.NET Themes utilize CSS image sprites. Each theme includes "sprite.png" and "sprite.gif" files with composite images (the latter is required for IE6 support, since this browser does not support transparent PNG files). Individual image settings are stored within 'sprite.css' files.

The following table illustrates image settings for the Aqua Theme. It displays the file structure, the content of the 'sprite.png' file and the content of the sprite.css file (truncated for demonstration purposes).

File Structure:

CSS-Sprites-Aqua-GridView.png

Note that not all images are combined in a sprite image. Animation (such as 'Loading.gif') and repeated background images are stored as standalone files.

File 'sprite.png':

   sprite-Aqua-GridView.png

File 'sprite.css':

... /* truncated */
.dxGridView_gvDragAndDropArrowDown_Aqua,
.dxGridView_gvDragAndDropArrowUp_Aqua,
...
.dxGridView_gvHeaderFilter_Aqua,
... 
{
    background-image: url('<%=WebResource("DevExpress.Web.ASPxThemes.App_Themes.Aqua.GridView.sprite.png")%');
    -background-image: url('<%=WebResource("DevExpress.Web.ASPxThemes.App_Themes.Aqua.GridView.sprite.gif")%>'); /* for IE6 */
    background-repeat: no-repeat;
    background-color: transparent;
}

...

.dxGridView_gvDragAndDropArrowDown_Aqua {
    background-position: 0px 0px;
    width: 11px;
    height: 9px;
}

.dxGridView_gvDragAndDropArrowUp_Aqua {
    background-position: 0px -17px;
    width: 11px;
    height: 9px;
}

...

.dxGridView_gvHeaderFilter_Aqua {
    background-position: 0px -36px;
    width: 19px;
    height: 19px;
}

... /* truncated */

Default sprite images and sprite CSS files are stored as resources within the ASPxThemes Assembly. This implementation provides optimal application performance, because CSS image sprites reduce the number of requests for images, and resource file compression (such as scripts and CSS files) minimizes traffic.