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.

在本课中，您将学习如何将业务类与自定义图标相关联。此图像将表示导航控件中的类，包括详细信息和列表窗体标头。为此，将使用"联系人"类。默认情况下，它与其祖先（Person 类）的图像相关联。您将为联系人类提供自定义图标。

Note 注意

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

在继续之前，请花点时间复习以下课程。

• Place an Action in a Different Location
• Assign a Standard Image

• 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.2\Components\Sources\DevExpress.Images\Images folder.

• 将操作放置在其他位置
• 分配标准映像
• 在"解决方案资源管理器"中，导航到 MySolution.模块项目中的"映像"文件夹。XAF 会从此文件夹中加载图像。
• 在本教程中，您可以使用自定义图像文件或从 %PROGRAMFILES（x86）%_DevExpress 19.2_组件_源DevExpress.Images_Images_Images_Images 文件夹加载它们。

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.

要在 C# 项目中使用 SVG 映像，将其另存为 [MySolution.模块_映像]员工.svg。

要在可视化基本项目中使用 SVG 图像，请将其保存为 [MySolution.模块]图像_MySolution.模块.Images.contact.svg 并确保在文件名中大写"图像"。

对于ASP.NET应用程序，为图标的活动状态和禁用状态使用其他文件。这些项目必须与您添加的第一个文件具有相同的名称，并且具有状态的后缀，例如，Employee_Active.svg 和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.

有关如何在 XAF 应用程序中使用 SVG 和 PNG 映像的详细信息，请参阅添加和覆盖图像一文。

• 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.

• 在"解决方案资源管理器"中，选择模块项目并单击"显示所有文件（showall_btn）"工具栏按钮。选择"图像"子文件夹中的图像，右键单击所选内容，然后选择"包括在项目中"。

 

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".

• 调用模型编辑器。导航到 BOModel |My解决方案.模块.业务对象 |联系节点并将其 ImageName 属性设置为"员工"。

  

  Note 注意

  • 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.
  • 聚焦 ImageName 属性时，省略号按钮 （EllipsisButton） 将显示在属性值的右侧。可以单击此按钮以调用"图像选取器"对话框并浏览可用图像。
  • 可以使用 ImageName 属性在代码中指定图像。

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

• 运行应用程序。请注意，联系人导航项现在已分配自定义图像。

• WinForms Application

WinForms 应用程序

ASP.NET Application

ASP.NET应用程序

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.2\Components\eXpressApp Framework\MainDemo by default. The ASP.NET version is available online at http://demos.devexpress.com/XAF/MainDemo/

.您可以在主演示中看到本课中所做的更改 |主演示模块项目。主演示应用程序安装在%PUBLIC%\Documents\DevExpress Demos 19.2\Components\eXpressApp Framework\MainDemo by default. The ASP.NET version is available online at http://demos.devexpress.com/XAF/MainDemo/