Description:
How can I apply the Aqua AutoFormat to a DevExpress web control contained within a SharePoint page?
Answer:
A specific Aqua AutoFormat has been designed to fit the default style scheme of SharePoint portals. Applying the Aqua AutoFormat facilitates appearance customization of DevExpress web controls integrated into SharePoint pages.
This article demonstrates how the Aqua AutoFormat can be applied to a ASPxNavBar control, which is integrated into a page as the following article recommends:
Replacing a SharePoint master page's default Quick Launch menu with the ASPxNavBar
Commonly, to simplify the process, the AutoFormat can be initially applied to a ASPxNavBar control within a Visual Studio sample project, and then, the modified aspx code of the control and the required image and CSS files can be copied to the SharePoint application.
Perform the following detailed steps to accomplish the task.
- Using the Microsoft Office SharePoint Designer 2007, open the SharePoint page that contains the ASPxNavBar and copy the ASPxNavBar's markup.
- Create a sample Visual Studio project, drop an ASPxNavBar control onto the form, and replace the dropped control's markup with the markup copied from the SharePoint page.
- Within the Visual Studio project, open the ASPxNavBar's "Auto Format" dialog window (using the control smart tag's "Auto Format…" item, for instance) and apply the Aqua AutoFormat to the control.
As a result, the Aqua folder containing specific image and CSS files is created within the web project's App_Themes folder, and the ASPxNavBar's markup is modified so that particular properties are defined. - Copy the Aqua folder with its content from the Visual Studio web project's App_Theme folder and paste it to the SharePoint site's _themes service folder using the Microsoft Office SharePoint Designer 2007. You can find the _themes folder within the SharePoint site's root folder (create the _themes folder, if it doesn't yet exist).
- Copy the modified markup of the ASPxNavBar control from the Visual Studio web page and paste it back into the SharePoint page, replacing the previous markup of the ASPxNavBar.
- Within the inserted ASPxNavBar markup, find the occurrences of the "App_Themes" folder name and change them to "_themes" value. Below is the resulting markup of the ASPxNavBar control within the SharePoint page:
ASPx<dxnb:ASPxNavBar id="QuickLaunchNavBar" runat="server"
DataSourceID="QuickLaunchSiteMap"
CssFilePath="~/_themes/Aqua/{0}/styles.css"
CssPostfix="Aqua" GroupSpacing="1px"
ImageFolder="~/_themes/Aqua/{0}/"
Width="100%" >
<LoadingPanelImage Url="~/_themes/Aqua/Web/nbLoading.gif" />
<ItemStyle ImageSpacing="10px" />
<GroupContentStyle ItemSpacing="1px"></GroupContentStyle>
<CollapseImage Height="17px" Url="~/_themes/Aqua/Web/nbCollapse.png" Width="17px" />
<ExpandImage Height="17px" Url="~/_themes/Aqua/Web/nbExpand.png" Width="17px" />
</dxnb:ASPxNavBar>
- Save the page and view the SharePoint portal in browser, to see the results.
See Also:
Replacing a SharePoint master page's default Quick Launch menu with the ASPxNavBar
How to integrate a DevExpress web control into a SharePoint page