Customizing the Flex ScrollBar with Skins

One of the things I love about Flex is the smooth and clean look/feel of the default components. With just a little CSS the default look and feel can be customized to fit most web site designs. But what do you do when your requirements are very different from what you can accomplish with CSS? With Flex it's possible to build custom skins and give you're application any look and feel you desire.

While the process to complete this isn't overly complex it probably helps if you come from a Flash background and also have some strong design skills.

There are two ways to build skins. 1) Use images and 2) Use actionscript classes. For my example I have combined both approaches to customize the look/feel of the default Flex scrollbar.

Summary of the solution

- Create a PNG image to use as the background for the scrollbar track.
- Create a PNG image to use as the icon for the scrollbar handle.
- Create an ActionScript class to draw a skin for the scrollbar box.
- Create a CSS Style for the scrollbar which references the new skins
- Apply the StyleName to our scrollbar

The CSS Style

.customScroll
{
  /* remove the arrow skins by referencing a null class */
  upArrowSkin: ClassReference(null);
  downArrowSkin: ClassReference(null);

  /* Embed an image to use as skin for scroll bar track and scroll bar thumbIcon */
  trackSkin: Embed(source="skins/CustomSkinTrack.png");
  thumbIcon: Embed(source="skins/CustomSkinIcon.png");

  /* Reference action script skin for various states of the scroll bar thumb */
  thumbUpSkin: ClassReference('theme.skins.CustomSkinThumb');
  thumbOverSkin: ClassReference('theme.skins.CustomSkinThumb');
  thumbDownSkin: ClassReference('theme.skins.CustomSkinThumb');
}

Click here to view the demo.
Click here to view the source code.