2 Replies Latest reply on Jul 1, 2008 9:26 AM by dimival

    List with round corners

    milllcia@wp.pl
      I have a List with round Corners :
      CSS:
      list: {
      focusRoundedCorners: tl, tr, bl, br;
      backgroundAlpha: 1;
      borderStyle: solid;
      cornerRadius: 8;
      borderColor: #437db4;
      }
      When I rollOver list item, the style over (over highlight) is recetangle. I wanna do it rounded.
        • 1. Re: List with round corners
          matthew horn Level 3
          milllcia, You're referring to the first item in the list, when you roll over it, the corners are not rounded, correct?

          This looks like a bug to me. I could not find any workarounds, so I would recommend filing a bug here:

          http://bugs.adobe.com/jira

          hth,
          matt horn
          flex docs
          • 2. List with round corners
            dimival Level 1
            I had a similar issue with the Tree component, which is actually a subclass of the List component. I solved it by doing a subclass of Tree and overriding the drawHighlightIndicator and drawSelectionIndicator methods like this:

            override protected function drawHighlightIndicator( indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
            var g:Graphics = Sprite(indicator).graphics;
            g.clear();
            g.beginFill(color);
            g.drawRoundRect(-2, 0.4, width, height, 18, 18); // This is the important line
            g.endFill();
            indicator.x = x;
            indicator.y = y;
            }
            }
            I did the same for the drawSelectionIndicator. The thing is that in the List component these methods use the drawRect() method to draw the highlight, so all you have to do is override these methods and have them draw a rounded rectangle instead. In the example i posted the only thing that differs from the default Tree component is that i use the drawRoundRect method instead.

            So all you have to do is extend the List component and override two methods drawHighlightIndicator and drawSelectionIndicator.
            Check the documentation on the Graphics class because the drawRoundRect method's parameters are different.
            http://livedocs.adobe.com/flex/201/langref/flash/display/Graphics.html#drawRoundRect()