6 Replies Latest reply on Apr 15, 2010 7:09 AM by jimmyoneshot

    Tilelist selectedItem theme corner radius

    jimmyoneshot Level 1

      As everyone knows when you hover over or select an item in a tilelist in a flex app it is highlighted by default with a light blue square or rectangle (it's theme colour). Is there any way to change the corner radius of this rectangle as I have a tilelist that has a corner radius of 10 and when I select or roll over the top left hand corner item its theme rectangle cuts through the rounded corner of my tilelist?

       

      I basically want the corner radius of the theme rectangles to match the corner radius of the tilelist itself. I hope this makes sense.

        • 1. Re: Tilelist selectedItem theme corner radius
          leybniz Level 4

          Nothing stops you from doing custom tileItemRenderer having described behaviour in place..

          1 person found this helpful
          • 2. Re: Tilelist selectedItem theme corner radius
            jimmyoneshot Level 1

            That's true. But in the case of my app it's hard as my tilelist is populated upon creation complete via an array collection which has been designed to store as a shared object when the user clicks a save button so I'm not sure how I'd implement an item renderer in that case.

            • 3. Re: Tilelist selectedItem theme corner radius
              uddinr

              has anyone managed to sort this out yet? i have custom renderers for my tilelist but not sure what needs changing in the renderer

              • 4. Re: Tilelist selectedItem theme corner radius
                jimmyoneshot Level 1

                I'm not sure it's possible at all to be honest, renderer or not as there doesn't seem to be a way to set a tilelist items theme corner radius. I think it's one of the things that should be updated in the next version of Flex along with things such as being able to easily have background radients on any component aswell as buttons, applications and application control bars and being able to set corner radiu's on individual corners. These were two things that I wanted in my designs that were hard to achieve without workarounds.

                 

                The way I solved the problem of rounded theme corners in my tilelist was a really cheap workaround way which was as follows:-

                 

                - The tilelist itself had rounded corners and was placed into a canvas that had a coloured background

                 

                - I then created a canvas that had the same corner radius as the tilelist and was the same width and height BUT I had made it's border color the same color as the background color of the canvas that I had placed the tilelist into and also gave it a border thickness of 10 and solid so the border was pretty thick.

                 

                - I didn't use a background colour for this canvas so it appeared transparent apart from it's border. This was so it could be clicked through.

                 

                - I then placed it OVER the tilelist at the same x and y coordinates as the tilelist and adjusted it's size so that only the tilelist was visible through it.

                 

                Here's the end result in my app. You can see the tilelist has its top left corner item selected but the items top left corner appears round due to the outer tilelist's border:-

                 

                http://i223.photobucket.com/albums/dd147/jimmyoneshot/corner.jpg

                 

                I hope this helps you but I'd still like to know if there's a solution for further reference.

                • 5. Re: Tilelist selectedItem theme corner radius
                  BrianIreland

                  Hi

                   

                  I was having a similar problem trying to add rounded corners to a tileList items when they are hovered over or selected.

                   

                  I eventually figured how to do it, and have put the solution up here. Hope it helps.

                   

                  It involves extending the TileList class, and overriding two methods in your custom tileList class.

                   

                  Brian

                  • 6. Re: Tilelist selectedItem theme corner radius
                    jimmyoneshot Level 1

                    Thanks a lot Brian. It's been a while but eventually I used the 'mask' method i.e. putting another canvas the same size and shape as my tilelist on top of it. A bit cheap but it worked.

                     

                    I'll check that out next time I need to style a tilelist like that. All the best.