BLOB Image Properties in XPO
- 4 minutes to read
You can declare image properties as byte arrays or MediaDataObject type reference properties (this type is available in the Business Class Library).
- Image as a Byte Array
- Image as a MediaDataObject (for WinForms and ASP.NET applications only)
Image as a Byte Array
The example below illustrates how to implement byte array type image properties in an XPO persistent class by declaring a byte array property and applying the ImageEditorAttribute to it. You can also customize the image editor using the attribute’s parameters.
[VisibleInListView(true)]
[ImageEditor(ListViewImageEditorMode = ImageEditorMode.PictureEdit,
DetailViewImageEditorMode = ImageEditorMode.PictureEdit,
ListViewImageEditorCustomHeight = 40)]
public byte[] ImageProperty {
get { return GetPropertyValue<byte[]>("ImageProperty"); }
set { SetPropertyValue<byte[]>("ImageProperty", value); }
}
[Delayed(), VisibleInListViewAttribute(true)]
[ImageEditor(ListViewImageEditorMode = ImageEditorMode.PopupPictureEdit, DetailViewImageEditorMode = ImageEditorMode.DropDownPictureEdit)]
public byte[] ImageDelayedProperty {
get { return GetDelayedPropertyValue<byte[]>("ImageDelayedProperty"); }
set { SetDelayedPropertyValue<byte[]>("ImageDelayedProperty", value); }
}
Refer to the ImageEditorAttribute topic for details on parameters passed to the ImageEditor attribute in the code above. You can also specify image options using the following properties in the Model Editor:
- IModelCommonMemberViewItem.ImageSizeMode
- IModelMember.DetailViewImageEditorMode
- IModelMember.DetailViewImageEditorFixedWidth
- IModelMember.DetailViewImageEditorFixedHeight
- IModelMember.ListViewImageEditorMode
- IModelMember.ListViewImageEditorCustomHeight
Tip
When an application displays a lot of large images in a List View, it may consume much memory. This applies to ASP.NET applications with many simultaneously connected clients. To improve the performance, you can use lazy loading as demonstrated in the How to enable delayed loading of images in XPO example.
You can update or retrieve an image property value the MobileImagePropertyEditor displays on the client-side using its data source property. The data source property name consists of the property name with the “DataSource” suffix and can be accessed from the View Model. The image property value should be a base64-encoded image. The following example demonstrates how to assign an image to the Signature property:
var imageData = fullImageData.replace("data:image/png;base64,", "");
$model.SignatureDataSource = imageData;
Note that you should not specify the “data:image/png;base64,” prefix. In the code above, this prefix is replaced with an empty string.
Image as a MediaDataObject
The example below illustrates how to implement MediaDataObject type’s image properties (available in the Business Class Library) in an XPO persistent class. Both WinForms and ASP.NET Image Property Editors are used automatically for MediaDataObject type’s properties; no attributes are required (however, you still can apply the ImageEditorAttribute to customize the editor’s options, as it is demonstrated above for byte arrays). Using this type reduces traffic because images are cached in the browser cache (compared to byte[] type images). Delayed loading is always used for MediaDataObject properties.
using DevExpress.Xpo;
using DevExpress.Persistent.BaseImpl;
// ...
[DefaultClassOptions]
public class Contact : BaseObject {
public Contact(Session session) : base(session) { }
private string name;
public string Name {
get { return name; }
set { SetPropertyValue("Name", ref name, value); }
}
private MediaDataObject image;
public MediaDataObject Image {
get { return image; }
set { SetPropertyValue("Image", ref image, value); }
}
}