2 Replies Latest reply on Feb 6, 2010 8:52 PM by CMcM00

    Skinning a scrollbar with gumbo

    CMcM00 Level 1



      I've been banging on this for about 2 days now, and still can't quite get my VScrollBar to skin properly.


      There are 3 main problems I haven't worked out:


      1. It appears as though the scroll track is not scaling properly to the full length of the scroll area. Even though I've provided the coordinates for the 9-scale grid to the track skin image, it still doesn't occupy the full height of the list object. Setting the height of the track button in the VScrollBar skin has no effect on the size of the track skin, even when given explicit pixel sizes.


      2. My thumb skin either scrolls past or not all the way down to edge of the track. If I set the height property of the track button to 100%, the thumb will scroll past the boundaries of the track skin, while the track skin still hasn't resized to fill the full height of the list box. If I don't set the height of the track at all, the thumb won't scroll to the full length of the track it resides in.


      3. The text inside my box is not adjusted width-wise for the width of the vertical scrollbar. Therefore, one of the elements in the list box is partially covered over by the scroll bar skin.



      Any help would be greatly appreciated. I've attached a very stripped-down simple test application to get this working. I've tried this using embedded images as skins, as well as using mxml graphics elements. Neither work.



        • 1. Re: Skinning a scrollbar with gumbo
          rfrishbe Level 3

          The issue is in your track and thumb skins.  The track has it's height resized to fill the size of the container, and the thumb has it's height resized to show how many pages of data there are.  Basically the skins are getting resized properly, but the Images (or Paths) within the skins are not, so it doesn't appear that way.  For instance, I changed your thumbSkin to:


          <s:BitmapImage source="@Embed('assets/ScrollThumb.png')" fillMode="scale" top="0" bottom="0"/>


          And it works.  I also changed your track skin to:


          <s:BitmapImage left="0" right="0" top="0" bottom="0" source="@Embed('assets/ScrollTrack.png', scaleGridTop='13', scaleGridBottom='60', scaleGridLeft='0', scaleGridRight='16')" fillMode="scale" />


          And it now works as well.  Note that in the sample, I used the latest build for Flex 4.0, where resizeMode was renamed to fillMode for BitmapImage.


          I wasn't sure what you meant by your last issue, but I hope this helps.



          • 2. Re: Skinning a scrollbar with gumbo
            CMcM00 Level 1

            Thank you Ryan!!


            That totally worked.