Table of Contents
Custom imagery enhances the presentation of a rich user interface. A significant portion of a Storyboard application's user interface objects are made up of custom visual elements. The Designer environment works hard to ensure that the management and use of those images is as flexible as possible.
Images are applied to a UI design using the image render extension. The image render extension
uses its name property to identify an image file (png, jpg, bmp
among others) that is to be rendered when the control is redrawn. The name of this image
file is generally relative to the project root and by convention is located in the
images directory of the project. Like all properties, the name
field can be bound to a variable in order to make it dynamic and changeable at runtime. The
> > and
(among many others) demonstrate how images and
image properties can be manipulated to provide different visual effects.
Any image content that is directly in the images directory of a project will be loaded
into image selection dialogs and made readily available to the user. Since the images directory
is part of the filesystem, it is relatively straightforward to add content into it, however Storyboard also provides
some import facilities directly within the Designer environment:
Directly placing images into your project’s images directory. This can be
done using copy and paste, drag and drop directly to the underlying filesystem folder or into the folder
within the Designer environment.
An image may be dragged and dropped from your filesystem directly into the application editor.
When this happens the image will automatically be copied into the images directory and
then a new control and image render extension will be created where you dropped the image.
The has functionality to import images using a toolbar icon. Multiple images may be imported at a time.
The . This is the dialog associated with the Name property of the image render extension. By default this dialog will show you the currently available images, but if you need to bring in a new image then there is an import button within the dialog.
The dialog is presented when creating a new image control or when we are selecting to change the Name property of an image render extension. The primary difference between creating a new image control and changing the name property on an existing image render extension is that only newly created image controls will have the option to Resize the control to the image dimensions. This option allows you to drag out an area for a control but then properly fit the control to match the size of an image.