skinClass样式去掉Spark Panel下拉阴影的例子

Flex Gumbo中如何通过skinClass样式去掉Spark Panel下拉阴影

的例子

 

下面是main.mxml：

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application name="Spark_Panel_skinClass_dropShadow_test"
3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
4.         xmlns:s="library://ns.adobe.com/flex/spark">
5.  
6.     <s:Panel title="Spark Panel title"
7.             skinClass="skins.CustomPanelSkin_noDropShadow"
8.             width="200"
9.             horizontalCenter="0"
10.             verticalCenter="0">
11.         <s:VGroup left="20" right="20" top="20" bottom="20">
12.             <s:RichEditableText id="richEditableTxt"
13.                     text="The quick brown fox jumps over the lazy dog."
14.                     width="100%"
15.                     height="100%" />
16.         </s:VGroup>
17.     </s:Panel>
18.  
19. </s:Application>

下面是CustomFxPanelSkin_noDropShadow.mxml的代码：

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:SparkSkin name="CustomPanelSkin_noDropShadow"
3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
4.         xmlns:s="library://ns.adobe.com/flex/spark"
5.         alpha.disabled="0.5">
6.     <s:states>
7.         <s:State name="normal" />
8.         <s:State name="disabled" />
9.     </s:states>
10.  
11.     <fx:Metadata>
12.     <![CDATA[
13.         [HostComponent("spark.components.Panel")]
14.     ]]>
15.     </fx:Metadata>
16.  
17.     <fx:Script>
18.         /* Define the skin elements that should not be colorized.
19.            For panel, border and title backround are skinned, but the content area and title text are not. */
20.         static private const exclusions:Array = ["background", "titleField", "contentGroup"];
21.  
22.         override public function get colorizeExclusions():Array {return exclusions;}
23.  
24.         /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
25.         static private const contentFill:Array = ["bgFill"];
26.  
27.         override public function get contentItems():Array {return contentFill};
28.     </fx:Script>
29.  
30.     <!-- layer 1: border -->
31.     <s:Rect left="0" right="0" top="0" bottom="0">
32.         <s:stroke>
33.             <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
34.         </s:stroke>
35.     </s:Rect>
36.  
37.     <!-- layer 2: background fill -->
38.     <!--- Defines the appearance of the PanelSkin class's background. -->
39.     <s:Rect id="background" left="1" top="1" right="1" bottom="1">
40.         <s:fill>
41.         <!--- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
42.             <s:SolidColor color="0xFFFFFF" id="bgFill" />
43.         </s:fill>
44.     </s:Rect>
45.  
46.     <!-- layer 3: title bar fill -->
47.     <s:Rect left="1" right="1" top="1" height="30">
48.        <s:fill>
49.             <s:LinearGradient rotation="90">
50.                 <s:GradientEntry color="0xE2E2E2" />
51.                 <s:GradientEntry color="0xD9D9D9" />
52.             </s:LinearGradient>
53.        </s:fill>
54.     </s:Rect>
55.  
56.     <!-- layer 4: title bar highlight -->
57.     <s:Rect left="1" right="1" top="1" height="30">
58.        <s:stroke>
59.             <s:LinearGradientStroke rotation="90" weight="1">
60.                 <s:GradientEntry color="0xEAEAEA" />
61.                 <s:GradientEntry color="0xD9D9D9" />
62.             </s:LinearGradientStroke>
63.        </s:stroke>
64.     </s:Rect>
65.     <s:Rect left="1" right="1" top="31" height="1">
66.         <s:fill>
67.             <s:SolidColor color="0xC0C0C0" />
68.         </s:fill>
69.     </s:Rect>
70.  
71.     <!-- layer 5: text -->
72.     <!--- Defines the appearance of the PanelSkin class's title bar. -->
73.     <s:SimpleText id="titleField" lineBreak="explicit"
74.              left="10" right="4" top="2" height="30"
75.              verticalAlign="middle" fontWeight="bold" />
76.  
77.     <s:Group id="contentGroup"
78.             left="1" right="1" top="32" bottom="1" />
79.  
80. </s:SparkSkin>

转载注明：来自www.flexjs.cn

skinClass样式去掉Spark Panel下拉阴影的例子