Providing Images in WinForms Dashboard Designer
- 5 minutes to read
This topic describes how to provide images for the Image and Bound Image dashboard items.
Supported Formats
- The Image and Bound Image items support only raster images (like PNG, JPEG, and so on).
- Vector images are not supported because there is no capability to specify an actual image size.
Static Images
To load an image into the ImageDashboardItem, under Image Tools, switch to the Design tab and use the Load Image or Import Image button.
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).
The Load Image and Import Image commands invoke the system Open dialog that allow you to locate the desired image:
- The Load Image command saves the path to the image in the dashboard definition.
- The Import Image command saves the image in the dashboard definition as a byte array.
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.
Bound Image
How Bound Image Selects What to Display
The Bound Image can display only a single image. If Master Filtering is not applied to the Bound Image, it selects the displayed image in the following ways:
- 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.
- URI mode
- The Bound Image displays an image corresponding to the first attribute value, taking into account the attribute’s sort order.
UI
The Bound Image dashboard item contains the Attribute data section containing the corresponding placeholder. Add a data source field to supply data:
Specify the binding mode for the Bound Image. Click the Options button (
) next to the Attribute field. This invokes the Image Binding Options dialog:
This dialog contains the following 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 that contains the required images.
C:\Users\Public\Documents\DevExpress Demos 25.1\Components\Data\Planes{0}.jpg
Data source field values will be inserted into the {0} placeholder position. Thus, the Bound Image maps the current dimension value with the image placed at the specified URI.
In Code
To bind the Bound Image to data in code, do the following:
- Assign the BoundImageDashboardItem.DataBindingMode property to the desired binding mode.
- Specify the dimension that contains images or parts of URIs to access images. For this, use the BoundImageDashboardItem.ImageDimension property.
- If you select Uri mode, use the BoundImageDashboardItem.UriPattern property to specify the URI pattern used to access images.
The following code snippet uses a Bound Image dashboard item to display a specified image accessible by a predefined URI.
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.ImageAltTextDimension = new Dimension("Name");
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;
}
}
}
Alternative Text (Alt Text)
Alt text (alternative text) gives equal access to information for all users. If the image adds meaning, it needs alt text.
You can set alt text to make images accessible to users who cannot see them, especially those using screen readers.
For more information, see the following help topic: Add Alternative Text for Image and Bound Image Items in WinForms.