1 Reply Latest reply on Apr 1, 2010 2:21 PM by Peter deHaan

    How to do rounded corners only on top of panel header

    brian_bat

      Hello,  I would like to have a panel that has rounded corners on the top of the

      panel but regular square corners on the bottom of the header(title area) and bottom of the panel.

       

      Is this possible using the new spark skinning and if so, how?

        • 1. Re: How to do rounded corners only on top of panel header
          Peter deHaan Level 4

          Not sure if you're using the s|Panel or mx|Panel or if you're using a control bar, but this should work for s|Panel w/ controlBar and a custom skin.

           

          <s:Panel id="pnl2"
                   title="Spark Panel title"
                   cornerRadius="20"
                   width="150" height="100"
                   skinClass="CustomPanelSkin">
              <s:controlBarContent>
                  <s:Button label="ControlBar Button" />
              </s:controlBarContent>
          </s:Panel>

           

           

          And my custom Spark Panel skin, CustomPanelSkin.mxml, is basically just the default Spark Panel skin with the following two lines commented out:

           

          private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
          {
              target.topLeftRadiusX = cornerRadius;
              target.topRightRadiusX = cornerRadius;
              // target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
              // target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
          }

           

           

          Peter