This wizard is useful for creating 9 part image borders to components, these borders allow adapting UI's without scaling to multiple resolution by dividing the image to 9 distinct parts. as such:

The component can thus grow or shrink (to some extent) based on the following criteria:

  1. Corners never shrink and are drawn only once, the border will thus never be smaller than the sum size of top left, top right, bottom left and bottom right
  2. The top, bottom, left, right and center portions are tiled and optinally cropped thus they can appear multiple times or not at all.

Notice that using larger images rather than a single pixel image for the tiled sections is far more efficient on devices. Also keep in mind that a gradient image would need to be cut in a way that would not break the flow of the gradient (e.g. place the lines as close as reasonable to one another).

To use this wizard first you need to pick or create an image using the first page you are presented with a radio button that allows you to pick a ready made file or a set of controls to create simple yet attractive images. Once you have an image to your satisfaction you need to place the cutting guides in the right place.

The next step is picking the component UIID's and the states to which the border should be applied. The component UIID's can be selected or typed in and the border can be applied to a specific state. A border can be applied to multiple components at once.
Notice that a border generates multiple images so it is much more useful to create a border once and apply it to multiple components than generate a border for every component!