Using image brushes

Contents[Hide]

1. Overview

Color-based properties of visualizations, components, and other design elements are actually brushes which can be one of the following brush types:

Solid (flat color)
Linear (gradient)
Radial (gradient)
Image

The image brush type in particular allows a button, for example, to be displayed as an image which you specify instead of a solid color. You can also use this option to create customized state indicator states based on images.

2. Using an image brush

For this example, create a new dashboard and add a Button component to it from the toolbar.

Go to the Properties for the button, click Look, and then expand the Rest Background property. This is the background color of the button when it is in the rest state (unpressed).

Click the Brush dropdown and set it to Image.

The brush loads a placeholder image by default and the button is updated accordingly.

A placeholder image is loaded by default

Next, set the properties of the image brush as described in the following sections.

2.1. Source

There are two options for specifying the image source. You can supply an absolute URL that points to an image (e.g., http://www.example.com/images/image1.png), or you can select an existing Dundas BI image resource.

To use an image resource, click Select Image.

In the Open File dialog, select the existing image resource you want from the Images folder, and then click Submit.

The button is now displayed as an image on the canvas. In the Properties window, you can see a small preview of the loaded image as well.

In the case of an image resource, the Source property looks like this:

dundasImageResource:e0011d1d-62ac-4d81-b532-287287741f14

The portion of the above text after the colon is the ID of the image resource (which you can also get from the image resource's properties).

The image resource is loaded into the button

2.2. Size

The Size property offers the following options:

Auto - The image size is automatically determined.
Cover - The image is sized so that it covers the available content area.
Contain - The image is sized so that it is contained within the available content area.
Fill - The image is stretched to fill the content area without taking the aspect ratio into consideration.

2.3. Repeat

The Repeat property specifies how the image will be repeated within the content area. There are two options:

Repeat
No Repeat

Note

The Repeat option may work differently depending on the type of component or element. For CSS-based components (such as the background of a label, or the dashboard itself), the repeat option first scales according to the Size setting, and then repeats based on that. For SVG-based controls (such as a rectangle), the repeat option ignores the Size setting, always starts at (0,0), and repeats based on the original size of the image.

Dundas BI, Managed Dashboards & Reports Support