How to: Change an Application Logo and Info

• Feb 24, 2022
• 4 minutes to read

This topic describes how to change the default logo and text displayed in a WinForms application’s About window, in the top-left and bottom-right corners of an ASP.NET application’s main page, and in a Mobile application’s AboutInfo Detail View. In WinForms, ASP.NET and Mobile 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 WinForms applications, the About window is invoked using the AboutInfoController.AboutInfoAction Action and contains the AboutInfo object’s Detail View (AboutInfo_DetailView). In ASP.NET applications, the AboutInfoControl is used to display the info. In Mobile applications, you can access the AboutInfo object’s Detail View (AboutInfo_DetailView) from the About navigation item.

Specify the Application Info

In the Model Editor, you can specify information about the application name, description, vendor, copyright and version formatting using the following properties or the root Application node:

Use an Embedded Resource Logo Image

Tip

A complete sample project is available in the DevExpress Code Examples database at https://supportcenter.devexpress.com/ticket/details/e4721/how-to-change-the-application-logo.

• To use a custom logo, add it as an embedded resource. The steps below illustrate how to do this.

  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 module assembly name and folder name. For example, to add a CustomLogo.png image to the Images folder of the MySolution.Module project, rename the image file MySolution.Module.Images.CustomLogo.png.

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

• Now you can assign the added image name to the IModelApplication.Logo property. Rebuild the solution and invoke the Model Editor. Focus the root Application node and click the Logo property’s ellipsis button. In the invoked Image Picker dialog, choose your logo.

  

  You can also type the image name manually instead of choosing it in the Image Picker. When specifying the image name, omit the file extension (and prefix, if you use VB.NET).

  Note

  • In WinForms applications, the default logo is specified in the application Model Differences, so changes made in this step has no effect. To use the logo specified in the module Model Differences, open the Model.xafml file from the application project, navigate the Application node and delete the Logo property value.
  • In Mobile applications, an image specified in the Logo property is also used as the application’s icon and is displayed on its splash screen.

• To check that the logo has been changed in the WinForms application, run it and invoke the About window.

  

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

• Run the ASP.NET application to ensure that the custom logo is applied.

  

• Run the Mobile application and tap the About navigation item to ensure that the logo image has been changed.

  

Use a Logo Image File from Web Application Folder

You can use a content file instead of a module’s embedded resource in ASP.NET applications. 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 the 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, and then subscribe to the BaseXafPage.CustomizeTemplateContent event.
2. Cast the CustomizeTemplateContentEventArgs.TemplateContent parameter or BaseXafPage.TemplateContent property to the IHeaderImageControlContainer interface to access the template content.

3. The template content exposes the ThemedImageControl using the HeaderImageControl property. Specify an image using the DefaultThemeImageLocation and ImageName properties of this control.

   This code 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 logo is loaded from the CustomLogo.svg file in the ASP.NET application project’s Images folder (for instance, MySolution.Web\Images\CustomLogo.svg).

   Important

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

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