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]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Expand]Concepts
 [Expand]Design-Time Features
 [Expand]Deployment
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]Actions
  [Expand]Navigation
  [Expand]Views
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Templates
  [Expand]Filtering
  [Expand]Reporting
  [Expand]Dashboards
  [Expand]Scheduler and Notifications
  [Expand]Maps
  [Expand]Security
  [Expand]Workflow
  [Expand]Localization
  [Expand]Testing
  [Collapse]Miscellaneous UI Customizations
    How to: Add a Button to a Detail View Using Custom View Item
    How to: Add an XAF Mobile Custom Module
    How to: Adjust the Size and Style of Pop-up Dialogs (ASP.NET)
    How to: Adjust the Windows' Size and Style
    How to: Change an Application Logo and Info
    How to: Create a Custom Control Detail Item
    How to: Customize a Window Caption
    How to: Customize ASP.NET Layout Elements Using Custom CSS Classes
    How to: Customize Export Options of the Printing System
    How to: Customize the Conditional Appearance Module Behavior
    How to: Customize Window Status Messages (WinForms)
    How to: Enable High DPI Support in a WinForms Application
    How to: Implement a Custom Messaging Class
    How to: Include an Action to a Detail View Layout
    How to: Raise XAF Callbacks from Client-Side Events and Process these Callbacks on Server
    How to: Set Images and Captions for Enumeration Values
    How to: Show a Custom Window with an Embedded XAF View
    How to: Show a Custom Windows Form
    How to: Use a Custom Plugin in a Mobile Application
    How to: Use a Custom Splash Screen
    How to: Use a DevExtreme Chart in a Mobile Application
    How to: Use Custom Themes in ASP.NET Applications
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
This documentation page describes implementations made in our v17.2 release cycle. To learn about functionality shipping with v18.1, navigate to our updated help file experience at docs.devexpress.com. Learn More

How to: Change an Application Logo and Info

This topic describes how to change the default logo image and text displayed in the About window of a WinForms application, in the top-left and bottom-right corners of an ASP.NET application's main page, and in the AboutInfo Detail View in a Mobile application. 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 web application 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 created by default.

Expanded 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:

Expanded Use an Embedded Resource Logo Image

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E4721.

  • 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 located in the module project (e.g., MySolution.Module\Images\CustomLogo.png). The recommended format is PNG.

      Note

      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 ellipsis button located to the right of the Logo property. In the invoked Image Gallery dialog, choose your logo.

    You can also type the image name manually, instead of choosing it in the Image Gallery. 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 ASP.NET applications with the New Web UI, the Logo.png file from the Web application's Images folder is used instead of the image set to the IModelApplication.Logo property. To use the image specified in the Model Editor, delete or rename this Logo.png file.
    • 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.

    For more details on the About window, refer to the Application Personalization topic.

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

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

Expanded Use a Logo Image File from Web Application Folder

In an ASP.NET application, you can also use a content file instead of a module's embedded resource. The following are two approaches to change a custom logo in new and classic web UI.

  • New Web UI

    Rename your custom logo Logo.png and copy it to the Images folder located in the application project. If your application has a logon form, make sure the following lines are present in the Web.config file (e.g. MySolution.Web\Web.config).

    As a result, the application logo will be loaded from the Logo.png file.

  • Classic Web UI

    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 DefaultTemplateContent type 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.

    The code below demonstrates these steps.

    As a result, the application logo will be loaded from the CustomLogo.png file located in the Images folder of the ASP.NET application project (e.g., MySolution.Web\Images\CustomLogo.png).

Expanded See Also

Is this topic helpful?​​​​​​​