Using image brushes
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)
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.
Next, set the properties of the image brush as described in the following sections.
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:
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 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.
The Repeat property specifies how the image will be repeated within the content area. There are two options:
- No Repeat
3. See also