Skip to main content
All docs
V24.1

Assign a Standard Image

  • 2 minutes to read

This lesson explains how to associate an entity class with a standard image from the DevExpress.Images assembly. This image illustrates the entity class in the following sections of the UI:

  • Navigation control
  • Detail View
  • List View

The instructions below describe how to assign images to the entity classes in the Model Editor.

Step-by-Step Instructions

  1. In the MySolution.Module project, open the Model.DesignedDiffs.xafml file in the Model Editor.

  2. Navigate to the BOModel | MySolution.Module.BusinessObjects | Employee node. In the Appearance section of the node’s properties, locate the ImageName property and set its value to BO_Employee.

    Tip

    Focus the ImageName property field and click an ellipsis button that appears to the right of the property value to invoke the Image Picker dialog and browse all available images.

    After you change this value, XAF automatically recalculates the values of the following properties:

    Node Property Description
    BOModel | MySolution.Module.BusinessObjects | Employee DefaultDetailViewImage Specifies the name of the image displayed in the default Detail View of the Employee class.
    BOModel | MySolution.Module.BusinessObjects | Employee DefaultListViewImage Specifies the name of the image displayed in the default List View of the Employee class.
    NavigationItems | Items | Default | Items | Employees ImageName Specifies the name of the image displayed with the Employees item in the navigation control.

    Assign standard image in Model Editor

  3. Run the application to see the new image in the UI:

    ASP.NET Core Blazor:
    ASP.NET Core Blazor Standard Image for Department
    Windows Forms:
    Windows Forms Standard Image for Department
  4. In the same manner, assign images to the following classes:

    Class Image name
    Department BO_Department
    Position BO_Position
    DemoTask BO_Task
    Payment BO_Invoice

    After you apply the changes, the UI of your application should look as follows:

    ASP.NET Core Blazor:
    ASP.NET Core Blazor Standard Images
    Windows Forms:
    Windows Forms Standard Images

Next Lesson

Reuse Implemented Functionality from Additional Modules