The requested page is not available for the requested platform. You are viewing the content for Default platform.

How to: Customize an ASP.NET Template

By default, the template content of ASP.NET applications is provided by User Controls embedded into the DevExpress.ExpressApp.Web, and thus cannot be modified. However, you can include template content source files into your application project, modify this content and switch to it instead. This example demonstrates how to modify the DefaultVerticalTemplateContentNew template content.

Tip

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E4359.

Add an Editable Template

Open the existing XAF solution or create a new one. Invoke the Template Gallery for the ASP.NET application project, choose the XAF ASP.NET New UI Templates | Default Vertical Template Content project item and specify a name (e.g., "MyDefaultVerticalTemplateContent").

TemplateGalery_Web

Note

If you use Classic Web UI, select the XAF ASP.NET Classic UI Templates | Default Vertical Template Content item instead of XAF ASP.NET New UI Templates | Default Vertical Template Content.)

Important

Always add a custom template to a root folder of an ASP.NET application project. Otherwise, image URLs may be generated incorrectly.

The following files that implement the User Control will be added.

  • MyDefaultVerticalTemplateContent.ascx
  • MyDefaultVerticalTemplateContent.ascx.cs
  • MyDefaultVerticalTemplateContent.ascx.designer.cs

These files are selected in the image below, which was taken from the Solution Explorer window.

Templates_CustomizeWebTemplates_UserControlFiles

Open the ASCX file. Here, you can modify the content markup. For instance, you can change the Update Panel style - replace its "4a4a4a" color with "2c86d3".

Templates_CustomizeWebTemplates

Use the Modified Template Instead of Default

To use the modified content instead of default content, open the Global.asax.cs (Global.asax.vb) file and modify the Session_Start event handler. Specify a path to your custom User Control as shown below.

protected void Session_Start(Object sender, EventArgs e) {
    // ...
    WebApplication.Instance.Settings.DefaultVerticalTemplateContentPath =
        "MyDefaultVerticalTemplateContent.ascx";
    WebApplication.Instance.SwitchToNewStyle();
    WebApplication.Instance.Setup();
    WebApplication.Instance.Start();
}

The image below illustrates the modified View caption style in the running application.

Templates_CustomizeWebTemplates_Result

Note

If you want to override the default template scripts, handle the WebWindow.CustomRegisterTemplateDependentScripts event.

Add an Action Container to the Template

The NavigationHistoryActionContainer, which displays the navigation history (breadcrumbs), is not available in the new web UI. However, you can easily add it to your custom ASP.NET template using the following markup.

<xaf:XafUpdatePanel ID="XafUpdatePanel3" runat="server">
    <xaf:NavigationHistoryActionContainer runat="server" 
        ContainerId="ViewsHistoryNavigation" 
        id ="NavigationHistoryActionContainer" 
        Delimiter=" / " />
</xaf:XafUpdatePanel>

The Action Container should be placed within the XafUpdatePanel control. The result is demonstrated below.

Templates_CustomizeWebTemplates_BreadCrumbs

You can use the same approach to add any other built-in or custom Action Container to a desired location within a Template. Note that your custom Action Container instance should be added to the list returned by the Template's IFrameTemplate.GetContainers method.

See Also