Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Collapse]Concepts
  [Expand]Application Solution Components
  [Expand]Business Model Design
  [Expand]Application Model
  [Collapse]UI Construction
    UI Element Overview
    Windows and Frames
   [Expand]Templates
    Action Containers
   [Expand]Views
   [Expand]View Items
    List Editors
    Add and Override Images
    Text Notifications
    ASP.NET Web Application Appearance
    Application Personalization
    Using a Custom Control that is not Integrated by Default
  [Expand]Extend Functionality
  [Expand]Data Manipulation and Business Logic
  [Expand]Security System
  [Expand]Localization
  [Expand]System Module
  [Expand]Extra Modules
  [Expand]Debugging and Error Handling
  [Expand]Filtering
  [Expand]Application Life Cycle
 [Expand]Design-Time Features
 [Expand]Functional Testing
 [Expand]Deployment
 [Expand]Task-Based Help
 [Expand]Frequently Asked Questions
 [Expand]API Reference
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

ASP.NET Web Application Appearance

ASP.NET XAF application appearance is defined by a set of Templates - the pages that support the XAF internal infrastructure. Templates define the Action Containers layout and a View location within the page. XAF supplies two sets of built-in templates - new (used by default) and classic. This topic describes how to switch between these templates, and how to customize each of them.

Expanded New Web UI

The default web application style is demonstrated in the image below. It is optimized for both hand-held touch devices and desktop browsers.

The UI layout adapts itself to the browser width or device orientation changes.

Note that you cannot switch between themes by using the ChooseTheme Action at runtime or by modifying the theme element of the devExpress section in Web.config at design time. The following approaches describe how you can customize the new web UI.

  • Using Global Theme Parameters

    The simplest way to set font and base color in the ASP.NET application theme as a whole is specify them in the Web.config configuration file in the web application solution as shown below.

    Refer to the Changing Theme Base Color and Font Settings topic for additional information.

  • Use the Application Model

    You can define alternate UI settings (e.g., Detail View layout) for tablet devices. By default, Solution Wizard creates the Model.Tablet.xafml file, but if you do not have this file, do the following.

    • Create the Model.Tablet.xafml file in the ASP.NET application project using the Text File project item template (right click the project in the Solution Explorer and choose Add | Text File).
    • Open this file in an XML editor and add the following code (the Model Editor cannot open the file if it is empty).
    • Double-click Model.Tablet.xafml to start the Model Editor.

    Model Differences specified in Model.Tablet.xafml will be considered instead of Model.xafml if the browser's user-agent string indicates a tablet device (e.g., iPad).

    Note

    The device type is determined by the DeviceDetector class. To customize this class behavior, inherit from it and override the GetDeviceCategory method. Then, pass an instance of your custom device detector to the DeviceDetector.Instance static property in the Global class constructor.

    The following table lists the Application Model properties that influence the new web theme only. To learn more about customizing the UI in the Application Model, refer to the UI Customization section of the tutorial.

    Property Node Description
    IModelApplicationWeb.CurrentUserDisplayMode Application (the root node) Specifies how the current user information is displayed in the top right corner of the application page.
    IModelRootNavigationItemsWeb.ShowNavigationOnStart NavigationItems Specifies whether or not the navigation panel is expanded when the application is started.
    IModelRootNavigationItemsWeb.ShowImages NavigationItems Specifies whether or not the navigation item images are shown.
    IModelActionWeb.AdaptivePriority ActionDesign | Actions | <Action> Specifies the Action's priority with regards to the adaptive and responsive layout. Actions with a lower AdaptivePriority value remain visible when the browser window shrinks, while Actions with a higher priority become hidden.
    IModelColumnWeb.AdaptivePriority Views | <ListView> | Columns | <Column> Specifies the column's priority with regards to the adaptive and responsive layout. Columns with a lower AdaptivePriority value remain visible when the browser window shrinks, while columns with a higher value become hidden. Has effect when the ASPxGridListEditor.IsAdaptive property is set to true.
    IModelViewLayoutElementWeb.IsCardGroup Views | <DetailView> | Layout | ... | <LayoutGroup> Specifies whether or not the layout group is displayed as a card.
    IModelLayoutGroupWeb.IsCollapsibleCardGroup Views | <DetailView> | Layout | ... | <LayoutGroup> Specifies whether or not the layout card group can be collapsed.
    IModelLayoutGroupWeb.IsCardGroupCollapsed Views | <DetailView> | Layout | ... | <LayoutGroup> Specifies whether or not the layout card group is collapsed by default.
    IModelViewLayoutElementWeb.CustomCSSClassName Views | <DetailView> | Layout | ... | <LayoutElement> Specifies a custom CSS class to be used for the current layout element.

    For instance, the IModelActionWeb.AdaptivePriority property is changed as follows.

    • Invoke the Model Editor for the desktop application project. Navigate to the ActionDesign | Actions | ResetViewSettings and set the AdaptivePriority property to "1001".
    • Run the ASP.NET application.
    • The ResetViewSettings Action become hidden, because other Actions have the default priority value of 1000. The hidden ResetViewSettings Action can be accessed by the "..." button.

  • Use Templates

    You can include template content source files into your application project, modify this content and switch to it instead.

    The following steps explain how to create and modify the LogonTemplateContent template.

    • Right-click your ASP.NET application project and choose Add | New Item. In the invoked Add New Item dialog, select the DevExpress XAF category and the DevExpress 17.1 XAF ASP.NET Logon Template Content V2 item. Specify a name or leave the default "LogonTemplateContent1" name unchanged and press Add.
    • Open the ASCX file and change the font style for the ErrorInfoControl.
    • 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.
    • To see the result, run the ASP.NET application and try to logon with invalid credentials.
    • Note

      By default, DefaultVerticalTemplateContent has no size limit. Comment out the template's ClearSizeLimit method call in the Global.asax.cs (Global.asax.vb) file to set a workspace width limit to 1200px. This method has effect on the built-in template only. If you use a custom vertical template, call the ClearSizeLimit method of this custom template instead.

      To learn more about template content customization, see How to: Customize an ASP.NET Template.

  • WebApplicationStyleManager Class

    By default, in an XAF ASP.NET application with the new web style, the navigation groups and grid columns are shown in UPPER CASE. You can change this using the WebApplicationStyleManager.EnableUpperCase property.

    Alternatively, you can use the following properties to disable upper case for a grid column, layout group and navigation group captions, individually.

  • Using the ASP.NET Theme Tools

    It is possible to customize your XAF application with New Web IU using the ASP.NET Theme Tools, such as ASP.NET Theme Deployer and ASP.NET Theme Builder. Refer to the How to: Use Custom Themes in ASP.NET Applications to learn how to customize a built-in XafTheme theme.

Expanded Classic Web UI

By default, the new web UI is used in XAF ASP.NET applications, but you can switch to the classic style. Edit the Global.asax.cs (Global.asax.vb) file. Comment the WebApplication.SwitchToNewStyle method call in the Session_Start method.

You can customize the classic web UI using the following approaches.

  • Use Themes

    Just like DevExpress ASP.NET components, XAF supports themes and has more than a dozen available out of the box. When an ASP.NET XAF application project is created, it references the DevExpress.Web.ASPxThemes.17.1.dll assembly. This assembly embeds all the resources that are required for applying a DevExpress theme to the entire web application automatically. By default, the Office2010Blue theme is used because of the following settings in your Web.config file.

    Note

    When using ASP.NET 4, note that XAF does not support ClientIDMode.Static ClientID generation mode. So, the following declaration is incorrect.

    <themes enableThemesAssembly="true" theme="Office2010Blue" clientIDMode="Static"/>
    

    End-users can also switch between deployed themes using the ChooseTheme Action implemented in the ChooseThemeController.

    A selected theme is persisted in user browser cookies. So, the theme will be applied every time a user runs the application.

    Note

    To learn how to use custom themes, refer to the How to: Use Custom Themes in ASP.NET Applications topic.

  • Templates

    There are two main window Templates - DefaultTemplateContent and DefaultVerticalTemplateContent. The DefaultVerticalTemplateContent Template is the main window's standard Template with the vertical navigation bar. It consumes more space than DefaultTemplateContent, but more navigation items can fit.

    The DefaultTemplateContent Template is an optional template that has horizontally aligned navigation tabs that conserve the main window's space.

    To use the DefaultTemplateContent Template for the main window instead of DefaultVerticalTemplateContent, set the static WebApplication.PreferredApplicationWindowTemplateType property to TemplateType.Horizontal in the ASP.NET application's Session_Start event handler (you can find this handler code in the Global.asax.cs/Global.asax.vb file).

    Note

    To learn how to customize a template, refer to the How to: Customize an ASP.NET Template topic.

Expanded Web Browser Configuration

XAF supports browsers that are supported by DevExpress web controls.

The following are important notes concerning web browser configuration issues that can affect the correct functioning of ASP.NET XAF applications.

  1. Most web browsers allow you to zoom in and out of displayed pages. ASP.NET XAF applications do not support this feature. Make sure that your web browser zoom level is set at 100% to ensure a correct View layout.
  2. If your application will be accessed using Internet Explorer (IE) running in a compatibility mode, you need to explicitly specify this by invoking the static ASPxWebControl.SetIECompatibilityMode method. You can call this method, for example, in a page's PreInit event handler to adjust controls before they are initialized and rendered. In this instance, ASP.NET controls used by the page will generate a markup designed specifically for compatibility mode.

Expanded See Also

How would you rate this topic?​​​​​​​