Application Personalization

  • 3 minutes to read

Application Logo and Info

XAF-powered WinForms applications display an application logo and supplementary application information within an About window. XAF-powered ASP.NET Blazor applications display this information at the top-left and bottom-left corners of the main page.

LogoImage

You can specify the logo image and info texts in the Model Editor's Application root node. For more information, refer to the following help topic: How to: Change an Application Logo and Info.

You can specify info texts in the Model Editor's Application root node. This node also allows you to change a logo image in WinForms applications. To customize a logo image for a Blazor application, specify the image name in the header-logo CSS class. For more information, refer to the following help topic: How to: Change an Application Logo and Info.

Application Icon

WinForms Applications

XAF specifies a WinForms application icon in the Icon property within the Application page of the Project Designer. This approach is common for .NET Windows Forms applications (see How to: Specify an Application Icon). The icon is displayed in the compiled application at the top-left corner of the form, in the Windows Explorer, and the Windows taskbar. The default icon (ExpressApp.ico) is in the WinForms application project folder.

IconWin

See also: Application Page, Project Designer (C#) | Application Page, Project Designer (Visual Basic)

Blazor Applications

To change the application icon that is displayed in browser tabs, replace the MySolution.Blazor.Server\wwwroot\favicon.ico file with a custom image. This approach applies to all ASP.NET Core applications.

BlazorIcon

Splash Screen

WinForms Applications

XAF-powered WinForms applications display the following Splash Screen on startup:

splashformsplashscreen

Applications with the Security System also display the Overlay Form over the Logon Form.

splashformoverlayform

You can customize the startup behavior as described in the following help topics:

Blazor Applications

XAF-powered Blazor applications display the following Splash Screen on startup:

You can customize the default Splash Screen's caption and image in the MySolution.Blazor.Server\Pages\_Host.cshtml file. If you want to use a custom image, add it to the MySolution.Blazor.Server\wwwroot\images folder.

<!-- ... -->
<html lang="en">
<body>
    <!-- ... -->
    <component type="typeof(SplashScreen)" 
                   render-mode="Static" 
                   param-Caption='"My Blazor application"' 
                   param-ImagePath='"images/CustomSplashScreenImage.svg"' />
    <!-- ... -->
</body>
</html>

The following image shows the customized Splash Screen:

If you want to display a custom Splash Screen instead of the default screen, follow the steps below:

  1. Add a new Razor component to the Blazor application project. You can customize the built-in SplashScreenComponent or create your own. Note that the built-in Splash Screen uses the parameters specified in the _Host.cshtml file. The following code snippet shows how to customize SplashScreenComponent and access the param-ImagePath parameter:

    @using DevExpress.ExpressApp.Blazor.Components
    <SplashScreenComponent>
        <LoadingIndicator>
            <img class="rounded bg-primary text-white p-3" src="@ImagePath" />
        </LoadingIndicator>
    </SplashScreenComponent>
    @code {
        [CascadingParameter(Name = "ImagePath")] 
        protected string ImagePath { get; set; }
    }
    
  2. In the MySolution.Blazor.Server\Pages\_Host.cshtml file, set the Splash Screen's param-ContentType parameter to the type of the newly created component:

    <!-- ... -->
    <html lang="en">
    <body>
        <!-- ... -->
        <component type="typeof(SplashScreen)" 
                    render-mode="Static" 
                    param-Caption='"My Blazor application"' 
                    param-ImagePath='"images/CustomSplashScreenImage.svg"'
                    param-ContentType="typeof(MySolution.Blazor.Server.Component)" />
        <!-- ... -->
    </body>
    </html>