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
imagesdirectory. 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
imagesdirectory and then a new control and image render extension will be created where you dropped the image.
Thehas functionality to import images using a toolbar icon. Multiple images may be imported at a time.
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.. This is the dialog associated with the
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.dialog is presented when creating a new image control or when we are selecting to change the