1 Reply Latest reply on Mar 7, 2010 11:15 AM by Shongrunden

    Skinning Gradient Fill to Scrolling Container

    jfillman Level 1

      I thought I had a pretty good handle on Skinning in Flex 4, but then I came across the following problem.

       

      The inner container, myGrid, extends well beyond the bottom of the screen, and is scrolled, but the gradient colors don't even reach half way to the bottom of the container. I'm really trying to duplicate the look, in Flex 3, of backgroundGradientColors="[#FFFFFF, #5869B0]", so maybe there is a better way to do this, since I'm not really getting anything close to what I want.

       

      So my skinnable container is setup like this:

       

       

       

      <s:SkinnableContainer top="50" left="0" right="0" bottom="0" styleName="gridHeader">

       

       

      <s:SkinnableContainer styleName="gridContainer" id="mygridLines"/>

       

      </s:SkinnableContainer>

       

      </s:SkinnableContainer>

       

       

      The styleNames simply apply skins. My skin is as follows:

       

      <?xml version="1.0" encoding="utf-8"?>

      <!-- containers\spark\mySkins\MyBorderSkin.mxml -->

      <s:Skin

       

      xmlns:fx="http://ns.adobe.com/mxml/2009"

      xmlns:mx="

      library://ns.adobe.com/flex/halo"

      xmlns:s="

      library://ns.adobe.com/flex/spark"

      alpha.disabled="

      0.5">

       

       

      <fx:Metadata>

      [

      HostComponent("spark.components.SkinnableContainer")]

       

      </fx:Metadata>

       

       

      <!-- Define the skin states. -->

       

      <s:states>

       

      <s:State name="normal" />

       

      <s:State name="disabled" />

       

      </s:states>

       

       

      <!-- Define a Rect to fill the area of the skin. -->

       

      <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0">

       

      <s:fill>

       

      <s:LinearGradient rotation="90">

       

      <s:entries>

       

      <s:GradientEntry color="0x5869B0" ratio="0.5" alpha="0.4"/>

       

      <s:GradientEntry color="0xFFFFFF" ratio="0.5" alpha="0.4"/>

       

      </s:entries>

       

      </s:LinearGradient>

       

      </s:fill>

       

      </s:Rect>

       

       

      <!-- Define the content area of the container. -->

       

      <s:Scroller left="0" right="0" top="0" bottom="0">

       

      <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0"/>

       

      </s:Scroller>

      </s:Skin>