BLOB Image Properties
- 4 minutes to read
In XAF, BLOB image properties are persisted as byte arrays which can be displayed in the following controls:
- A PictureEdit control (default)
- A drop-down control (for WinForms and ASP.NET Web Forms applications only)
Note
BLOB, or Binary Large Object, is a set of binary data persisted as a single entity in the database.
The ImageEditorAttribute specifies Image Property Editor settings when displaying images.
Note
Refer to the Property Editors | Image Properties section in the Feature Center demo installed with XAF to see Image Property Editors in action. The default location of the application is %PUBLIC%\Documents\DevExpress Demos 23.2\Components\XAF\FeatureCenter.NETFramework.XPO. You can also watch the Image Property Editor tutorial video at the DevExpress YouTube channel.
Examples
ASP.NET Core Blazor
ImagePropertyEditor
Used as the default editor for properties of the following types:
- Byte array properties decorated by the ImageEditorAttribute
- Reference properties of the MediaDataObject and MediaDataObject types
ImagePropertyEditor uses a custom ImageEditComponent class to implement the editor’s functionality.
In Detail Views, the editor displays a placeholder icon if the bound property is empty. A user can click the icon to upload a new image. An ellipsis button over the image provides access to Replace and Remove buttons.
On mobile devices and in List View Inline Edit mode, the editor does not show its ellipsis button. To access Replace and Remove buttons, a user can click or tap the editor. On mobile devices, these commands appear in a pop-up menu. To close the menu, use the Cancel button or tap the pop-up background.
To access Context Menu and mobile pop-up menu instances, use ComponentModel.ContextMenu and ComponentModel.PopupMenu respectively.
For additional customization, implement your own custom property editor as described in the following topic: Implement a Property Editor Based on a Custom Component (Blazor).
WinForms
Each Windows Forms Property Editor is available in two forms:
- A standalone control (displays property value in a Detail View)
- A repository item (displays property value in a List Editor that supports in-place editing)
ImagePropertyEditor
Control: The PictureEdit or ImageEdit editor from the XtraEditors Library.
Repository Item: RepositoryItemPictureEdit or RepositoryItemImageEdit repository item from the XtraEditors Library.
Description:
Used for byte array properties decorated by the ImageEditorAttribute and for reference properties of the MediaDataObject and MediaDataObject types.
The default configuration is PictureEdit and RepositoryItemImageEdit.
Both PictureEdit and ImageEdit editors allow end users to perform Load, Save, Delete, Cut, Copy, and Paste operations using a context menu.
Use ImageEditorAttribute to configure the ImagePropertyEditor for a particular business class property.
ASP.NET Web Forms
Each ASP.NET Web Forms Property Editor includes controls that display a property in a Detail View in View and Edit mode.
ASPxImagePropertyEditor
View mode controls:
- ImageEdit is a Panel control descendant;
- DropDownImageEdit is an ImageEdit control with a Show Image/Hide image button.
Edit mode controls:
- ImageEdit is a Panel control descendant.
- DropDownImageEdit is an ImageEdit control with a Show Image/Hide image button.
Description:
Used for byte array properties decorated by the ImageEditorAttribute, and for reference properties of the MediaDataObject and MediaDataObject types.
When displayed in view mode, the ImageEdit control is always read-only.
When the Property Editor is read-only, only the ASPxImage control is displayed. When it is editable, a table with the Edit and Clear ASPxButton type buttons is shown as well, and the ASPxUploadControl is used to upload a new image. A browser editor is displayed when no image is assigned.
Use the ImageEditorAttribute to configure the ASPxImagePropertyEditor for a specific business class property. Refer to the How to: Access the ASPxImagePropertyEditor controls in View and Edit modes KB article to learn how to access and customize ASPxImagePropertyEditor controls.
In the current implementation of the ASPxImagePropertyEditor, the upload progress is not shown if the ImmediatePostDataAttribute is applied to the current FileData property or the IModelCommonMemberViewItem.ImmediatePostData option is enabled in the Model Editor for the current View Item.