Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Application Icon, Logo & About Info

  • 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 Web Forms and ASP.NET Core Blazor applications display this information at the top-left and bottom-left corners of the main page.

LogoImage

logo and about image webforms

logo and about image ASP.NET Core Blazor

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 an ASP.NET Core Blazor application, specify the image name in the header-logo CSS class. For more information, refer to the following help topic: 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)

#ASP.NET Core 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:

splashform splashscreen

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

splashform overlay form

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

#ASP.NET Core Blazor Applications

XAF-powered ASP.NET Core Blazor applications display the following Splash Screen on startup:

Blazor Splash Screen

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:

Custom ASP.NET Core Blazor 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 ASP.NET Core 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 ASP.NET Core Blazor application"' 
                    param-ImagePath='"images/CustomSplashScreenImage.svg"'
                    param-ContentType="typeof(MySolution.Blazor.Server.Component)" />
        <!-- ... -->
    </body>
    </html>
    

Custom ASP.NET Core Blazor Splash Screen Component

The example below customizes Splash Screen properties dynamically in code:

C#
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Components;
using DevExpress.ExpressApp.Blazor.Services;
using Microsoft.AspNetCore.Components;
//..
public class CustomSplashScreen : SplashScreen {
    [Inject] private IXafApplicationProvider XafApplicationProvider { get; set; }
    private string caption;
    protected override void OnInitialized() {
        base.OnInitialized();
        XafApplication Application = XafApplicationProvider.GetApplication();
        caption = Application.Model.Company;
    }
    protected override void OnParametersSet() {
        base.OnParametersSet();
        Caption = caption;
    }
}

After that, place this descendant in the MySolution.Blazor.Server\Pages_Host.cshtml file:

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

You can also show the loading panel/indicator in XAF Blazor applications. For more information on possible approaches, refer to the following topic: Loading Panels / Splash Forms (ASP.NET Core Blazor).