商信互联
如果UI元素与图像相关联,则应用程序更具吸引力。在eXpressApp Framework应用程序中,图像显示或伴随默认的Actions,导航控件项,Detail View标题等。您可以用自定义图像替换内置图像,并为在单独模块中实现的自定义功能提供特殊图像。本主题提供有关如何在XAF应用程序中添加和覆盖图像的信息。
在XAF中,存在三种类型的图像源。
文件图像源
对于此源,将指定一个包含图像的文件夹。对于每个图像,必须将“复制到输出目录”选项设置为“始终复制”,以便将图像始终复制到输出目录。
装配资源图像源
此源存储程序集的名称和包含图像的文件夹。对于每个映像,必须将Build Action选项设置为Embedded Resource。
DevExpress.Images程序集资源图像源
此默认源提供对DevExpress.Images程序集中所有图像的访问。
一个应用程序可以在解决方案项目之间分配多个图像源。若要检查在运行应用程序时将可用的图像源,请为应用程序项目(Windows窗体,ASP.NET或Mobile)调用模型编辑器。找到ImageSources节点。它的子节点代表图像源。下图演示了自动生成的图像源,这些图像源从这些图像源加载到Main Demo的Windows Forms版本中。
可以使用以下图像源:
图像:文件图像源
该图像源是为位于应用程序项目中的Images文件夹生成的。默认情况下,此文件夹被添加到Web和Mobile应用程序项目中。它包含特定于ASP.NET和Mobile应用程序的图像。在Windows窗体应用程序项目中,默认情况下没有“图像”文件夹。但是,您可以添加它。系统会在需要时找到添加到此文件夹的图像,因为会自动为此文件夹创建一个图像源。
DevExpress.ExpressApp。<AssemblyName>:程序集资源图像源
该图像源是为位于参考部件中的“图像”文件夹自动生成的。
MainDemo.Module:程序集资源图像源
该图像源是为位于应用程序模块中的Images文件夹生成的。您可以添加此文件夹,并使用代表嵌入式资源的自定义UI特定图像填充该文件夹。
MainDemo.Module.Win:程序集资源图像源
此图像源是为“窗口表单”模块中的“图像”文件夹生成的。您可以添加此文件夹,并使用代表嵌入式资源的自定义UI特定图像填充该文件夹。
DevExpress.Images.v 19.2:程序集资源图像源
此图像源是为DevExpress.Images.dll程序集WinForms,ASP.NET和Mobile应用程序项目参考生成的。来自此图像源的图像将作为单独的文件安装到%PROGRAMFILES(x86)%\ DevExpress 19.2 \ Components \ Sources \ DevExpress.Images \ Images文件夹中。您可以根据需要访问它们。
DevExtreme图标库:装配体资源图像源
内置的图标库为移动应用程序提供了大量的图标。
在任何XAF应用程序中,一组自动生成的图像源将如上所述。
当前应用程序项目中引用的每个模块的组装资源图像源
这些模块包括内置XAF或3d-party模块以及当前解决方案中的模块。
DevExpress.Images.dll程序集的DevExpress.Images资源图像源
当前应用程序项目的图像文件夹的文件图像源
为了找到所需的图像,框架浏览了应用程序模型的ImageSources节点中列出的图像源。将以指定名称找到的第一个图像加载到目标控件。由于可以在不同的来源中对图像进行类似的命名,因此列出图像来源的顺序很重要。您可以通过为应用程序项目调用的模型编辑器来检查或更改此顺序。在上图中,您可以看到每个节点都具有IModelNode.Index属性。该属性指定了访问当前图像源的顺序。
添加图像源
除了自动生成的图像源之外,您还可以将自定义程序集资源图像源添加到模块中,并将文件图像源添加到应用程序项目中。
要为带有图像的引用程序集创建程序集资源图像源,请将新的AssemblyResourceImageSource节点添加到模型编辑器中的ImageSources节点中,在模块项目中调用该节点。指定新添加的节点的“程序集”和“文件夹”属性。然后,将对图像组合件的引用添加到所有模块和应用程序项目中。
要创建文件图像源,请在模型编辑器的ImageSources节点中添加一个新的FileImageSource节点,该节点将为您的应用程序项目调用。将新添加的节点的Folder属性设置为应用程序项目中文件夹的名称。
新增图片
将所需的图像添加到模块中的“图像”文件夹中(如果没有该文件夹,则创建它)。如果为模块生成的图像源的索引比具有相同名称的图像的图像源的索引低,则将找到这些图像。
不要忘记,添加到模块中“图像”文件夹中的图像必须代表嵌入式资源。
替换单个图像
将所需的图像添加到模块中的“图像”文件夹中(如果没有该文件夹,则创建它)。如果使用相同的名称调用这些图像,则它们将替代相应的默认图像,并且为模块生成的图像源的索引比存在要替换图像的图像源的索引低。
不要忘记,添加到模块中“图像”文件夹中的图像必须代表嵌入式资源。
重新排列图像来源
为所需的应用程序项目 调用模型编辑器,并根据需要为ImageSource节点的子节点指定Index属性。
您可以将自定义图像添加到位于应用程序项目中的Images文件夹中。但是,不建议这样做,因为使用资源比使用单个文件夹更可靠。
所有XAF应用程序都支持光栅图像和SVG图像(建议用于高DPI屏幕)。要在WinForms应用程序中启用SVG图像,请将UseSvgImages属性设置为true。
推荐的光栅图像格式为PNG。但是,您可以使用其他栅格图像文件格式,例如JPG,BMP等。
栅格图像尺寸准则
图片大小 | 图片后缀 | 平台 | 描述 |
---|---|---|---|
12x12 | “ 12x12” | ASP.NET | 通过网络使用的属性编辑器在经典的Web UI。 |
16x16 | 没有任何 | WinForms,ASP.NET | 用于商务舱的标准尺寸图像。 |
24x24 | “ 24x24” | ASP.NET | 在新的Web UI中用于菜单项。如果该图像不可用,则XAF使用16x16图像。 |
32x32 | “ 32x32” | WinForms,移动 | 在导航栏和功能区UI(WinForms)中用作大图标,并在Mobile应用程序中用于业务类。 |
48x48 | “ 48x48” | WinForms,ASP.NET | 由验证模块(WinForms)和对话框窗口(ASP.NET)使用。 |
SVG图像尺寸调整
在ASP.NET和Mobile应用程序中,viewBox属性确定SVG图像的显示大小。SVG图标始终会调整大小以适合UI中的特定位置。在WinForms应用程序中,SVG图像大小由控件确定或在模型编辑器中设置。
图像名称准则
在C#项目中命名新图像时,请遵循以下准则。
图像 | 名称说明 |
---|---|
Employee.png | 不包括16x16栅格图像的大小后缀。 |
Employee_32x32.png | 为12x12、24x24、32x32和48x48栅格图像添加大小后缀。 |
Office2013 \ Employee。png | 栅格图像从DevExpress.Images的Colored集合加载。要使用其他集合中的图像,请在图像名称前添加其名称(不带空格)作为前缀。 |
员工.svg | SVG图片。 |
Employee_Active.svg | 将Active后缀添加到打算用于ASP.NET应用程序中选定导航项的SVG图像中。 |
Employee_Disabled.svg | 添加“禁用”后缀以显示ASP.NET应用程序中“禁用操作”的变灰图像。移动应用程序不支持禁用的操作。 |
您还应该在VB.NET项目中将当前模块程序集名称和文件夹名称添加到图像名称中:MySolution.Module.Images.Employee.png,MySolution.Module.Images.Employee_Active.svg。为了使图像在XAF中正常工作,请在图像文件名称中大写“ Images”。
两个PNG图像代表UI中的业务类:ImageName .png和ImageName_32x32.png。如果要使用矢量图像,请为业务类使用一个SVG图像(ImageName.svg)。ASP.NET应用程序可能还需要另外两个SVG图像-图标的活动状态和禁用状态。
我们建议您将自定义图像作为资源嵌入到程序集中,以便在XAF应用程序中使用它们。使用图像文件时,文件名应少于260个字符。如果您使用ClickOnce部署,这可能会导致问题,因为在安装应用程序时会创建长路径。在这种情况下,如果图像的路径长于260个字符,则该图像在应用程序中不可用,并且在应用程序Log File中创建了相应的条目。
要为“导航系统”和“选项卡式MDI”选项卡启用图像,请将ShowImages和ShowTabImage属性设置为true。您还可以使用EnableLayoutGroupImages属性为选项卡式布局组启用图像。
所述应用模型显示ImageName为可显示的图像的UI元素属性。例如,BOModel |的ImageName属性。<Class>节点用于表示业务对象,该业务对象具有详细形式的图像和其他UI元素。当ImageName属性被聚焦,省略号按钮()被显示到属性值的右边。您可以单击此按钮以调用“图像选择器”对话框并浏览可用图像。
可以通过所需节点的ImageName属性在模型编辑器中直接指定图像(请参见上图)。但是,有一些方法可以在代码中指定这些图像。例如,您可以将ImageNameAttribute应用于业务类。指定为属性参数的图像名称将加载到适当的BOModel | ImageName属性中。<Class>节点。可以通过ActionBase.ImageName属性在代码中设置代表UI中的动作的图像。该属性值将被加载到适当的Action Design |的ImageName属性中。动作| 动作节点。
以下是在模型编辑器和代码中设置图像名称的规则。
如果图像(资源)位于“程序集资源图像源”指定的文件夹中,请按以下方式设置图像名称。ImageName(例如,部门)。
如果图像(资源)位于“程序集资源图像源”指定的文件夹的子文件夹中,请按以下方式设置图像名称。SubfolderName。ImageName(例如MyBusinessClasses.Department)。