Change an Application Logo and About Information

• Dec 22, 2023
• 5 minutes to read

This topic describes how to change an application logo and description text. The following list details where these elements appear depending on the application platform.

• ASP.NET Web Forms and ASP.NET Core Blazor: the top-left and bottom-left corners of the application’s main page.

  

  

• Windows Forms: the application’s About window.

  

In Windows Forms and ASP.NET Web Forms applications, you can use an embedded resource image as a logo. You can also use an image file from a web application’s folder.

Note

In Windows Forms applications, you can use the AboutInfoController.AboutInfoAction Action to invoke the About window. It contains the AboutInfo object’s Detail View (AboutInfo_DetailView).

In ASP.NET Web Forms applications, you can use the AboutInfoControl to display information.

ASP.NET Core Blazor applications display the AboutInfoString property value on the Template.

Specify Application Information

In the Model Editor, you can use the following properties or the root Application node to specify application name, description, vendor, copyright, and version:

Use a Custom Logo Image

In ASP.NET Core Blazor Applications

XAF adjusts the specified logo image according to the current theme and renders it as monochromatic (black and white) by default.

Depending on your application behavior or corporate style, you can use one of the following techniques:

Colorful Logo

To preserve the colors of your custom logo, specify the background-image attribute.

1. Add the image you want to use to the MySolution.Blazor.Server\wwwroot\images folder.

2. Navigate to the YourSolutionName.Blazor.Server\wwwroot\css\site.css file and specify the image’s name in the header-logo CSS class.

   .header-logo {
       background-image: url(../images/CustomLogo.svg);
       width: 180px;
       height: 24px;
       /* ... */
       background-position: center;
       background-size: contain;
       background-repeat: no-repeat;
   }
   

   

Black and White Logo

If you do not want a colored custom logo and prefer that your current theme makes the logo image monochromatic (black and white), use the mask attribute.

Set the background-color property to currentColor to use the current color style. This applies to SVG images only.

1. Add the image you want to use to the MySolution.Blazor.Server\wwwroot\images folder.

2. Navigate to the YourSolutionName.Blazor.Server\wwwroot\css\site.css file and specify the image’s name in the header-logo CSS class.

   .header-logo {
       -webkit-mask: url('../images/CustomLogo.svg');
       mask: url('../images/CustomLogo.svg');
       width: 180px;
       height: 24px;
       /* ... */
       background-color: currentColor;
       -webkit-mask-position: center;
       mask-position: center;
       -webkit-mask-repeat: no-repeat;
       mask-repeat: no-repeat;
   }
   

   

In Windows Forms and ASP.NET Web Forms Applications

To use a custom logo, follow the steps below:

1. Save your custom logo to the Images folder in the module project (for example, MySolution.Module\Images\CustomLogo.png).

   Important

   If your solution language is VB.NET, prefix the file name with the folder name. For example, to add a CustomLogo.png image to the Images folder, rename the image file Images.CustomLogo.png.

2. In Solution Explorer, click the Show All Files toolbar button. In the Images sub-folder, right-click the image you added and choose Include In Project.
3. Switch to the Properties window. Set the Build Action option to Embedded Resource.

4. Rebuild the solution and invoke the Model Editor. Focus the root Application node and click the IModelApplication.Logo property’s ellipsis button. In the invoked Image Picker dialog, choose your logo.

   

   If you enter the image name manually, omit the file extension (and prefix if you use VB.NET).

   Note

   In Windows Forms applications, the default logo is specified in the user differences layer (individual user settings). To use the logo specified in the user differences, open the Model.xafml file from the application project, navigate to the Application node, and delete the Logo property value.

To ensure changes to the logo in a Windows Forms application, run the application and invoke the About window.

Refer to the Application Personalization topic for more information on the About window.

Run the ASP.NET Web Forms application to ensure that it displays the custom logo.

Use a Logo Image File from the Web Application Folder

In ASP.NET Web Forms applications, you can use a content file instead of the module’s embedded resource. To use a custom PNG image as a logo in a New Web UI, rename your file to Logo.png and copy it to the Images folder in the application project.

Follow the steps below to customize the logo image (use a custom file name, non-PNG format, adjust image size):

1. Open the Default.aspx.cs (Default.aspx.vb) file and add the Page_Init method to the Default class to handle the Page.Init event. Subscribe to the BaseXafPage.CustomizeTemplateContent event.
2. Cast the CustomizeTemplateContentEventArgs.TemplateContent parameter or BaseXafPage.TemplateContent property to the IHeaderImageControlContainer interface to access template content.

3. The template content exposes the ThemedImageControl using the HeaderImageControl property. Use the DefaultThemeImageLocation and ImageName properties of this control to specify the image.

   The following code snippet demonstrates how to use an SVG logo in the New Web UI:

   C#

   public partial class Default : BaseXafPage {
       // ...
       protected void Page_Init() {
           CustomizeTemplateContent += (s, e) => {
               IHeaderImageControlContainer content = TemplateContent as IHeaderImageControlContainer;
               if(content == null) return;
               content.HeaderImageControl.DefaultThemeImageLocation = "Images";
               content.HeaderImageControl.ImageName = "CustomLogo.svg";
               content.HeaderImageControl.Width = Unit.Pixel(30);
               content.HeaderImageControl.Height = Unit.Pixel(30);
           };
       }
   }
   

   VB.NET

   Partial Public Class [Default]
       Inherits BaseXafPage
       ' ...
       Protected Sub Page_Init()
           AddHandler CustomizeTemplateContent,
               Sub(sender As Object, e As CustomizeTemplateContentEventArgs)
                   Dim content As IHeaderImageControlContainer = TryCast(TemplateContent, IHeaderImageControlContainer)
                   If content Is Nothing Then Return
                   content.HeaderImageControl.DefaultThemeImageLocation = "Images"
                   content.HeaderImageControl.ImageName = "CustomLogo.svg"
                   content.HeaderImageControl.Width = Unit.Pixel(30)
                   content.HeaderImageControl.Height = Unit.Pixel(30)
               End Sub
       End Sub
   End Class
   

   As a result, the application uses the CustomLogo.svg file from the ASP.NET Web Forms application project’s Images folder (for example, MySolution.Web\Images\CustomLogo.svg).

   Important

   If your application has a logon form, make sure the the Web.config file contains the following lines:

   <location path="Images">
       <system.web>
         <authorization>
           <allow users="?"/>
         </authorization>
       </system.web>
     </location>