Customizing TileList selection

The mouse-hover and selection boxes in a Flex TileList only have styles for changing the colors. If you want more advanced things like changing the shape or having a border you’ll need to extend the TileList class and override two methods.

drawSelectionIndicator - Draws the box around the currently selected item.
drawHighlightIndicator - Draws the box for the mouse-over item

public class RoundedSelectionTileList extends TileList{   public function RoundedSelectionTileList()   {       super();   }

   override protected function drawSelectionIndicator(      indicator:Sprite, x:Number, y:Number,      width:Number, height:Number, color:uint,      itemRenderer:IListItemRenderer):void   {      var g:Graphics = indicator.graphics;      g.clear();           g.beginFill(0x3f4c6b);      g.lineStyle(2,0x6e7c9d);      g.drawRoundRect(x,y,itemRenderer.width,height,15,15);      g.endFill();   }

   override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number,           width:Number, height:Number, color:uint,           itemRenderer:IListItemRenderer):void   {      var g:Graphics = indicator.graphics;      g.clear();      g.beginFill(0x3f4c6b);      g.lineStyle(2,0x6e7c9d);      g.drawRoundRect(x,y,itemRenderer.width,height,15,15);      g.endFill();   } }

Before:

After:
While you’re in there, take a look at the other draw* protected methods. You can change most aspects of the control with those.

2 Responses to “Customizing TileList selection”


  1. 1 paul

    Hi,thanks for example.
    But i don’t know no how to connect with the redefinition of class methods to roll-over-indicator-skin of my css.

  2. 2 Mariosh

    Great post, Thanks Marc.
    I had a problem with TileList where the highlight border around the selected item becomes very wide If I make the application window full-screen (example). Your example solved my problem.
    I made also more advanced example (nice blue gradient fill) Vista Start Menu.

Leave a Reply