Skip to main content
All docs
V24.1

How to: Assign Custom Images to Business Classes

  • 2 minutes to read

This article describes how to associate a business class with a custom image. This image appears next to the corresponding item in the Navigation control.

Note

For the purposes of this article, you can use the MainDemo application installed as a part of the XAF package. The default location of the application is %PUBLIC%\Documents\DevExpress Demos 24.1\Components\XAF.

The instructions below explain how to associate a custom image with the Employee class.

  1. Create the Images folder in the application module. Save the image below to this folder in PNG format and name it Employee:

    Custom image for Employee class

    The file name should follow image name guidelines. Refer to the following article for additional information: Add and Replace Icons.

  2. In the Solution Explorer, select the MainDemo.Module project and click the Show All Files toolbar button.

  3. Select the image in the Images subfolder, right-click the selection, and choose the Include In Project option. This image is now included in the project compilation.

    Include custom image in the project

  4. In the Solution Explorer, right-click the image again and select the Properties option. Set the Build Action option to Embedded Resource.

    Employee image properties

  5. Invoke the Model Editor. Navigate to the BOModel | MainDemo.Module.BusinessObjects | Employee node and set its ImageName property to Employee.

    Employee node properties

    Note

    • When you select the ImageName property, an ellipsis button appears to the right of the property value. Click this button to invoke the Image Picker dialog and browse all available images.
    • You can use the ImageNameAttribute to specify the image in code.
  6. Optional. In the WinForms project of the MainDemo application, the Navigation control does not display images. To display the images, open the Application Model of the WinForms application project, navigate to the NavigationItems node, and set the ShowImages property to True.

    WinForms Model Application NavigationItems node

  7. Run the application. The Employee navigation item now displays the custom image:

    ASP.NET Core Blazor Application
    Employee with custom image - ASP.NET Core Blazor
    WinForms Application
    Employee with custom image - WinForms