Providing Images

• Dec 16, 2019
• 4 minutes to read

This topic describes how to provide images for the Image and Bound Image dashboard items.

Providing Static Images

To load an image into the Image dashboard item, use the Ribbon’s Load Image and Import Image buttons in the Open group on the Design tab of the Image Tools contextual tab set. You can also use the corresponding menu buttons in the toolbar (the or buttons, respectively) or commands in the context menu (Load Image… and Import Image…, respectively).

These commands invoke the Open dialog, which allow you to locate the desired image.

The Load Image command saves the path to the image in the dashboard definition, while the Import Image command saves the image itself.

To load an image in code, assign the image URL to the ImageDashboardItem.Url property, or provide the image as a byte array using the ImageDashboardItem.Data property.

Binding the Bound Image to Data

The Bound Image dashboard item provides the Attribute data section containing the corresponding placeholder.

You need to specify the binding mode for the Bound Image by clicking the Options button (the icon) next to the Attribute placeholder. This invokes the following dialog.

This dialog provides two options.

• Binary Array - Use this mode if images are stored in the data source as byte arrays.

• URI - Use this mode to locate images accessible by a predefined URI. In this case, the data source field should return strings that are parts of URIs to these images. For instance, the URI pattern in the form below specifies the path to the folder containing the required images.

  

  C:\Users\Public\Documents\DevExpress Demos 19.1\Components\Data\ProductDetailsImages{0}.jpg

  Data source field values will be inserted to the position of the {0} placeholder. Thus, the Bound Image maps the current dimension value with the image placed at the specified URI.

To bind the Bound Image to data in code, do the following steps.

• Specify the binding mode using the BoundImageDashboardItem.DataBindingMode property.
• Specify the dimension providing images or parts of URIs to access images using the BoundImageDashboardItem.ImageDimension property.
• If you selected the URI binding mode, specify the URI pattern used to access images using the BoundImageDashboardItem.UriPattern property.

Note

Note that the Bound Image can display only a single image simultaneously. If Master Filtering is not applied to the Bound Image, it selects the displayed image in the following ways.

• In the Binary Array mode, the displayed image cannot be predicted precisely as a result of sorting limitations for the image/binary data types. Use the Master Filtering feature to display the specified image.
• In the URI mode, the Bound Image displays an image corresponding a first attribute value taking into account the attribute’s sort order.

Example

The following example shows how to use a Bound Image dashboard item to display a specified image accessible by a predefined URI.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-bind-a-bound-image-dashboard-item-to-data-in-code-t382366.

Form1.vb

Imports System.Windows.Forms
Imports DevExpress.DashboardCommon
Imports DevExpress.DataAccess.ConnectionParameters
Imports DevExpress.DataAccess.Sql
Imports DevExpress.XtraEditors

Namespace Dashboard_BoundImage
    Partial Public Class Form1
        Inherits XtraForm

        Public Sub New()
            InitializeComponent()
            Dim dashboard As New Dashboard()

            Dim xmlParams As New XmlFileConnectionParameters()
            xmlParams.FileName = "..\..\Data\DashboardProductDetails.xml"

            Dim xmlDataSource As New DashboardSqlDataSource("Data Source 1", xmlParams)
            Dim selectQuery As SelectQuery = SelectQueryFluentBuilder.AddTable("Products").
                SelectColumns("Id", "Name", "Description").Build("Query 1")
            xmlDataSource.Queries.Add(selectQuery)
            xmlDataSource.Fill()
            dashboard.DataSources.Add(xmlDataSource)

            Dim boundImage As New BoundImageDashboardItem()
            boundImage.DataSource = xmlDataSource
            boundImage.DataMember = "Query 1"
            boundImage.DataBindingMode = ImageDataBindingMode.Uri
            boundImage.ImageDimension = New Dimension("Name")
            boundImage.UriPattern = "..\..\ProductDetailsImages\{0}.jpg"
            boundImage.SizeMode = ImageSizeMode.Stretch

            Dim comboBox As New ListBoxDashboardItem()
            comboBox.ShowCaption = False
            comboBox.DataSource = xmlDataSource
            comboBox.DataMember = "Query 1"
            comboBox.FilterDimensions.Add(New Dimension("Name"))
            comboBox.ListBoxType = ListBoxDashboardItemType.Radio
            comboBox.ShowAllValue = False

            dashboard.Items.AddRange(comboBox, boundImage)
            dashboardViewer1.Dashboard = dashboard
        End Sub
    End Class
End Namespace

Form1.cs

using System.Windows.Forms;
using DevExpress.DashboardCommon;
using DevExpress.DataAccess.ConnectionParameters;
using DevExpress.DataAccess.Sql;
using DevExpress.XtraEditors;

namespace Dashboard_BoundImage {
    public partial class Form1 : XtraForm {
        public Form1() {
            InitializeComponent();
            Dashboard dashboard = new Dashboard();

            XmlFileConnectionParameters xmlParams = new XmlFileConnectionParameters();
            xmlParams.FileName = @"..\..\Data\DashboardProductDetails.xml";

            DashboardSqlDataSource xmlDataSource = new DashboardSqlDataSource("Data Source 1", xmlParams);
            SelectQuery selectQuery = SelectQueryFluentBuilder
                .AddTable("Products")
                .SelectColumns("Id", "Name", "Description")
                .Build("Query 1");
            xmlDataSource.Queries.Add(selectQuery);
            xmlDataSource.Fill();
            dashboard.DataSources.Add(xmlDataSource);

            BoundImageDashboardItem boundImage = new BoundImageDashboardItem();
            boundImage.DataSource = xmlDataSource; boundImage.DataMember = "Query 1";
            boundImage.DataBindingMode = ImageDataBindingMode.Uri;
            boundImage.ImageDimension = new Dimension("Name");
            boundImage.UriPattern = @"..\..\ProductDetailsImages\{0}.jpg";
            boundImage.SizeMode = ImageSizeMode.Stretch;

            ListBoxDashboardItem comboBox = new ListBoxDashboardItem();
            comboBox.ShowCaption = false;
            comboBox.DataSource = xmlDataSource; comboBox.DataMember = "Query 1";
            comboBox.FilterDimensions.Add(new Dimension("Name"));
            comboBox.ListBoxType = ListBoxDashboardItemType.Radio;
            comboBox.ShowAllValue = false;

            dashboard.Items.AddRange(comboBox, boundImage);
            dashboardViewer1.Dashboard = dashboard;
        }
    }
}