Working with Images

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 Storyboard Samples > Animation > ImageRotation and Thermostat (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 Images View has functionality to import images using a toolbar icon. Multiple images may be imported at a time.

  • The Image Selection Dialog. 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 Image Selectiondialog 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.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.