Default Binary Image

The Binary Image control is used to display images obtained from a binary stream with the capability to upload images to the server. To specify a display image, assign a byte array containing image data to the control’s ContentBytes property.

To allow file uploading, set the EditingSettings.Enabled property to true. After an end-user uploads an image, a byte array containing the new image data is accessible through the ContentBytes property.

No image
<dx:BootstrapBinaryImage runat="server">
    <EditingSettings Enabled="true" />
</dx:BootstrapBinaryImage>

Drag and Drop Support

The drag-and-drop feature allows an end-user to upload an image file by dragging it onto the Binary Image control’s drop zone. Set the EditingSettings.AllowDropOnPreview property to true to enable the drag and drop functionality.

Drop image here
<dx:BootstrapBinaryImage runat="server">
    <EditingSettings Enabled="true" AllowDropOnPreview="true" EmptyValueText="Drop image here" />
</dx:BootstrapBinaryImage>

Button Panel Position

The EditingSettings.ButtonPanelSettings.Position property allows you to specify the button panel's position relative to the image.

No image
<dx:BootstrapBinaryImage runat="server">
    <EditingSettings Enabled="true">
        <ButtonPanelSettings Position="Top" />
    </EditingSettings>
</dx:BootstrapBinaryImage>

Button Panel Visibility

The EditingSettings.ButtonPanelSettings.Visibility property allows you to specify when the button panel is displayed. The following property values are supported:

  • Always – The panel is always displayed.
  • Faded – The panel is always visible. The panel is faded when the mouse pointer is not hovering over the image.
  • None – The panel is never displayed.
  • OnMouseOver – The panel is displayed when the mouse pointer is hovering over the image. On touch devices, the "mouse over" behavior can be simulated by tapping on the image.
No image
<dx:BootstrapBinaryImage runat="server">
    <EditingSettings Enabled="true">
        <ButtonPanelSettings Visibility="OnMouseOver" />
    </EditingSettings>
</dx:BootstrapBinaryImage>
Screen Size
Color Themes
Demo QR Code