[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]Report and Dashboard Server
[Collapse]eXpressApp Framework
 [Collapse]Getting Started
  [Expand]Basic Tutorial (SimpleProjectManager Application)
  [Collapse]Comprehensive Tutorial (MainDemo Application)
   [Expand]Business Model Design
   [Expand]Extend Functionality
   [Collapse]UI Customization
     Place an Action in a Different Location
     Specify Action Settings
     Format a Business Object Caption
     Assign a Standard Image
     Assign a Custom Image
     Make a Property Calculable
     Filter Lookup Editor Data Source
     Format a Property Value
     Use a Multiline Editor for String Properties
     Localize UI Elements
     Add an Item to the New Action
     Add an Item to the Navigation Control
     Implement Property Value Validation in the Application Model
     Customize the View Items Layout
     Add an Editor to a Detail View
     Change Field Layout and Visibility in a List View
     Display a Detail View with a List View
     Make a List View Editable
     Add a Preview to a List View
     Filter List Views
     Apply Grouping to List View Data
     Choose the WinForms UI Type
     Toggle the WinForms Ribbon Interface
     Change Style of Navigation Items
   [Expand]Extra Modules
   [Expand]Security System
 [Expand]Design-Time Features
 [Expand]Task-Based Help
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Assign a Custom Image

In this lesson, you will learn how to associate a business class with a custom image. This image will represent the class in the navigation control, including detail and list form headers. For this purpose, the Contact class will be used. By default, it is associated with the image of its ancestor (the Person class). You will provide a custom image for the Contact class.


Before proceeding, take a moment to review the following lessons.

  • In the Solution Explorer, navigate to the Images folder in MySolution.Module project. XAF loads images from this folder.

    For this tutorial, you can use custom image files or load them from the %PROGRAMFILES(x86)%\DevExpress 19.1\Components\Sources\DevExpress.Images\Images folder.

    To use an SVG image in a C# project, save it as as \MySolution.Module\Images\Employee.svg.

    To use an SVG image in a Visual Basic project, save it as \MySolution.Module\Images\MySolution.Module.Images.Contact.svg and ensure "Images" is capitalized in the file name.

    For ASP.NET applications, use additional files for an icon's active and disabled states. These items must have the same name as the first file you added and a state's suffix, for example, Employee_Active.svg and Employee_Disabled.svg.


    Refer to the Add and Override Images article for more information on how to use SVG and PNG images in XAF applications.

  • In Solution Explorer, select the module project and click the Show All Files () toolbar button. Select the images in the Images subfolder, right-click the selection, and choose Include In Project.


    Visual Basic

  • Select the images and switch to the Properties window. Set the Build Action option to Embedded Resource.

  • Invoke the Model Editor. Navigate to the BOModel | MySolution.Module.BusinessObjects | Contact node and set its ImageName property to "Employee".


    • When the ImageName property is focused, the ellipsis button () is displayed to the right of the property value. You can click this button to invoke the Image Picker dialog and browse the available images.
    • You can use the ImageNameAttribute to specify an image in code.

  • Run the application. Notice that the Contact navigation item now has a custom image assigned.

    WinForms Application


    ASP.NET Application

You can see the changes made in this lesson in the Main Demo | MainDemo.Module project. The MainDemo application is installed in %PUBLIC%\Documents\DevExpress Demos 19.1\Components\eXpressApp Framework\MainDemo by default. The ASP.NET version is available online at http://demos.devexpress.com/XAF/MainDemo/.


Next Lesson: Make a Property Calculable

Expanded See Also

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