Working with Images

Table of Contents

Image Rotation
Rotate At Center
Rotate At Custom Point
Alpha and Transparency in Images
Creating Scalable 9-Patch Bitmap Images
Multi-Frame Animated GIF 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:

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.