Skip to main content
BuyLog In
XAF: Cross-Platform .NET App UI & Web API
Search in…
Docs > Getting Started > In-Depth XAF WinForms & ASP.NET Tutorial (Main Demo) > UI Customization > Assign a Custom Image
A newer version of this page is available. .
All docs
V20.2
.NET Framework 4.5.2+
eXpressApp Framework
Fundamentals
.NET Core 3.0+ Support in XAF WinForms Applications
.NET Standard 2.0 Support for Platform-Agnostic Modules
ASP.NET Core Blazor UI - Official Release
Getting Started
Basic WinForms & ASP.NET Tutorial (Simple Project Manager Demo)
In-Depth XAF WinForms & ASP.NET Tutorial (Main Demo)
Business Model Design
Extend Functionality
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
Extra Modules
Security System
Basic Blazor Tutorial (Simple Project Manager Demo)
In-Depth XAF Blazor UI Tutorial (Main Demo)
Concepts
Design-Time Features
Deployment
Task-Based Help
Frequently Asked Questions (FAQ)
API Reference
Download CHM

Assign a Custom Image

  • 3 minutes to read

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.

Note

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 20.2\Components\%PROGRAMFILES(x86)%\DevExpress 20.2\.NET Core Desktop Libraries\Sources\DevExpress.Images\Images folder.

    Assign a Custom Image_Employee

    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.

    Note

    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 (showall_btn) toolbar button. Select the images in the Images subfolder, right-click the selection, and choose Include In Project.

    C#

    Tutorial_UIC_Lesson5_2

    Visual Basic

    Assign_a_Custom_Image_VB

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

    Tutorial_UIC_Lesson5_3

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

    Tutorial_UIC_Lesson5_4

    Note

    • When the ImageName property is focused, the ellipsis button (EllipsisButton) 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

    Tutorial_UIC_Lesson5_5

     

    ASP.NET Application

    Tutorial_UIC_Lesson5_6

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 20.2\Components.NET Core Desktop Libraries\eXpressApp Framework\MainDemo by default. The ASP.NET Web Forms version is available online at https://demos.devexpress.com/XAF/MainDemo.

 

Next Lesson: Make a Property Calculable

See Also