Flex: How do I space out items in a HorizontalList control (using a custom ItemRenderer)

Question

I have a HorizontalList control that uses a custom ItemRenderer to represent each item as a toggle-button. The list allows drag and drop, and I used this method to rotate the drop feedback (line) into a vertical position instead of horizontal, but with the buttons mashed together, the drop feedback is pretty subtle. I'd like to space out the buttons somehow, so that the drop feedback is more obvious.

I've looked through the properties and nothing stands out. There are padding and margin properties, but their descriptions say they affect the list control itself, not the items.

Below is the code of my ItemRenderer. I've added padding to it, but that doesn't seem to change anything. If I add padding, that affects the inside of the button, not the space between them, and the button control doesn't have margin properties.

I suppose I could base my ItemRenderer on a canvas in order to get a margin, but then I wouldn't inherit all of the functionality of a button.

<?xml version="1.0" encoding="utf-8"?>
<mx:Button 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="go();"
    toggle="true"
>
    <mx:Script>
     <![CDATA[
      private var _val:int = -1;
      private function go():void {
       this.label = data.title;
       _val = data.index;
      }

      override protected function clickHandler(event:MouseEvent):void{
       //todo: bubble an event that causes all other
       //buttons in the list to un-toggle

       //now do the default clickHandler 
       super.clickHandler(event);
      }
     ]]>
    </mx:Script>
</mx:Button>

Answer 1

How about writing your item renderer as a container (either Canvas or HBox) and placing the Button element inside?

Answer 2

Make a custom skin for your buttons that includes the spacing you need. You may need to combine it with padding styles to ensure that text or icons don't go outside the skin.

Answer 3

It's a bit on the hacky side, but you can also lie about your columnWidth for the actual HorizontalList object. Set it to something larger than your actual itemRenderer width.