Removing the rollover and selection highlight on a Spark List control in Flex 4

The following example shows how you can remove the item highlight background on a Spark List control in Flex 4 by setting the itemRenderer property to a custom item renderer with the Boolean autoDrawBackground property set to false.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_autoDrawBackground_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="List selectedIndex:">
                <s:Label text="{lst.selectedIndex}" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:List id="lst"
            itemRenderer="skins.CustomItemRenderer"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="One" />
                <fx:Object label="Two" />
                <fx:Object label="Three" />
                <fx:Object label="Four" />
                <fx:Object label="Five" />
                <fx:Object label="Six" />
                <fx:Object label="Seven" />
                <fx:Object label="Eight" />
                <fx:Object label="Nine" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom Spark List item renderer, skins/CustomItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="CustomItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        autoDrawBackground="false">
 
    <s:Label text="{data.label}"
            left="2" right="2" top="4" bottom="4" />
 
</s:ItemRenderer>

[GoogleAdsWide]

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

11 thoughts on “Removing the rollover and selection highlight on a Spark List control in Flex 4

  1. FYI – if you set the autoDrawBackground to false you won’t get all the states and consequentially the events the list provides to the item renderer. If you need those states keep it as true and use a custom item render.

  2. Hello Peter,

    What if you need to remove the selection color and you need to have the alternating item colors and the drag and drop enabled?
    There’s any solution for this?

    1. @Pedro Arelo,

      I believe you would need to create a custom item renderer. You can either draw/manage your own background and add some simple alternating item/row color fills (using the item renderer’s itemIndex property), or you could try something like the following example which extends the default item renderer and removes the hover and selection highlights:

      <?xml version="1.0" encoding="utf-8"?>
      <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      autoDrawBackground="true">
       
          <fx:Script>
              <![CDATA[
                  override protected function get hovered():Boolean {
                      return false;
                  }
       
                  override public function get selected():Boolean {
                      return false;
                  }
              ]]>
          </fx:Script>
       
          <s:Label id="labelDisplay" left="5" right="5" top="5" bottom="5" />
       
      </s:ItemRenderer>

      Peter

      1. Thank you peter!
        It works almost in perfection!
        There’s still a little thing. When i apply that code and click the item renderer it doesn’t set the background color as expected, instead it puts a border around the item renderer on the selected state. Is this because of the drag and drop enabled?

        Thanks

      2. Sorry, I think that is the caret. You may need to try adding the following lines:

        override public function get showsCaret():Boolean {
            return false;
        }

        Peter

  3. Hi Peter,
    I’m having a problem where my itemrenderers get messed up because of the hover and selected states. I’d like to use the overrides above, but I get an error trying to compile my itemrenderer mxml: The public attribute can only be used inside a package. I’m stumped.

Comments are closed.