Skip to main content
BuyLog In
XAF: Cross-Platform .NET App UI & Web API
Search in…
Docs > Getting Started > In-Depth .NET 6+ WinForms & Blazor UI Tutorial (Employee Manager) > Customize Data Display and View Layout > Assign a Standard Image
All docs
V23.2
.NET 6.0+
XAF: Cross-Platform .NET App UI & Web API
Getting Started
Basic .NET 6+ WinForms & Blazor Tutorial (Project Manager)
In-Depth .NET 6+ WinForms & Blazor UI Tutorial (Employee Manager)
Define the Data Model and Set the Initial Data
Add Actions (Menu Commands)
Customize Navigation Between Views
Customize Data Display and View Layout
Display a Nested Property Editor in a Detail View
Change List View Filters
Group List View Data
Enable Split Layout in a List View
Make a List View Editable
Access the Settings of a Property Editor in a Detail View
Format a Property Value
Localize UI Elements
Assign a Standard Image
Enable Additional Modules
.NET 6+ REST Backend / Web API Service
Video Tutorials & Overview
Installation, Upgrade, Version History
Backend Web API Service
UI Shell and Base Infrastructure
Storage, ORM, and Business Model Design
Data Manipulation and Business Logic
User Interface and Behavior Customization
Data Filtering
Application Security and Data Safety
Multi-Tenancy (Data per Tenant)
Validation (Prevent Data Errors)
Conditional Appearance (Manage State of UI Elements)
Reporting (Shape, Export & Print Data)
Analytics (Extract Data Insights)
Document Management
Business Process Management
Event Planning
Localization
Accessibility Support
Debugging, Testing and Error Handling
Deployment
Support, QA & Troubleshooting
API Reference
Download CHM

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