3 Quick Ways To Customize New Web UI For ASP.NET Web App Appearance

ASP.NET XAF app appearance is generally defined through a set of templates. These templates are pages that offer support for XAF internal infrastructure. By using these templates, you can define Action Containers layout and a View location in the page. The built-in templates for new web user interface are supplied by XAF. In this article, you will learn how to switch between the templates and the process of customizing them.

New Web User Interface:
The default web app style is usually optimized for handheld touch devices as well as desktop browsers. The user interface layout adapts itself according to the browser’s width or device orientation changes. In order to customize the new web user interface, you can hire a .NET developer or consider following approaches:

#1 — Use Global Theme Parameters:
The easiest way to set font and base color in your ASP.NET web application theme is to specify them within the Web.config configuration file in the web app solution as shown below:


<themes enableThemesAssembly=”true” styleSheetTheme=”” customThemeAssemblies=”ThemeAssembly” theme=”XafTheme” baseColor=”#00FF00" font=”24px ‘Calibri’” />

<! — … →


#2 — Use the app model:

You can define alternate user interface settings, for e.g. Detail View Layout, for tablets. Solution Wizard creates Model.Tablet.xafml file by default. In case you do not have this file, do the following:

  • Create a Model.Tablet.xafml file within your ASP.NET application with the help of the Text File project item template (right-click the project in Solution Explorer and select Add | Text File).
  • Now open this file in an XML editor to add the following code. Note that the Model Editor cannot open the file if it’s empty.

<?xml version=”1.0" encoding=”utf-8"?>


  • To start the Model Editor, double-click Model.Tablet.xafml
  • The Model Differences mentioned in the Model.Tablet.xafml will be considered in place of Model.xafml if the user-agent string of the browser indicates a tablet device.
  • Invoke the Model Editor for desktop app project and navigate to ActionDesign | Actions | ResetViewSettings. Set the AdaptivePriority property as ‘1001’.
  • Now run the ASP.NET app. The ResetViewSettings Action is hidden as other Actions have default priority value of 1000. You can access the hidden ResetViewSettings Action by clicking the “…” button.

#3 — Use templates:

It is possible to include template content source files within your application, alter the content and switch to it instead. Here a few steps that will help you create and alter the LogonTemplateContent template.

  • Right-click the ASP.NET app project and select Add | New Item. In the Add New Item dialog that is invoked, choose DevExpress XAF category and DevExpress 16.2 XAF ASP.NET Logon Template Content V2 item. You can either leave the default “LogonTemplateContent1” name unchanged or specify a name and press Add.
  • Access the ASCX file to change the font style for ErrorInfoControl.

<xaf:XafUpdatePanel ID=”UPEI” runat=”server” CssClass=”LogonContentWidth”>

<xaf:ErrorInfoControl ID=”ErrorInfo” Style=”margin: 10px 0px 10px 0px” runat=”server” Font-Bold=”True” />

  • If you want to use the modified content instead of default content, click on Global.asax.cs (Global.asax.vb) file and alter the Session_Start event handler. Now specify a path to the custom User Control as shown below.


protected void Session_Start(Object sender, EventArgs e) {

// …

WebApplication.Instance.Settings.LogonTemplateContentPath =





  • To view the result, run your ASP.NET app and try to log on using invalid credentials.

Hope this tutorial helps you customize the new web UI in your ASP.NET web application.

If you have any feedback, suggestions or questions, please write to us using the comments below.

Like what you read? Give Technoaddict a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.