Flex 4中如何去除ComboBox竖直方向分割符
main.xml代码： 1. ? xml version = 1.0 encoding = utf-8 ?
2. s:Application name = Halo_ComboBox_skin_test
3. xmlns:fx = http://ns.adobe.com/mxml/2009
4. xmlns:s = library://ns.adobe.com/flex/spark
5. xmlns:mx = library://ns.adobe.com/flex
main.xml代码：
1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application name="Halo_ComboBox_skin_test"
3. xmlns:fx="http://ns.adobe.com/mxml/2009"
4. xmlns:s="library://ns.adobe.com/flex/spark"
5. xmlns:mx="library://ns.adobe.com/flex/halo">
6.
7. <mx:ComboBox id="comboBox"
8. dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" 9. skin="skins.CustomComboBoxSkin"
10. horizontalCenter="0" verticalCenter="-60" />
11.
12. </s:Application>
下面为skins/CustomComboBoxSkin.mxml的代码:
1. <?xml version="1.0" encoding="utf-8"?>
2. <local:SparkSkinForHalo name="CustomComboBoxSkin"
3. xmlns:fx="http://ns.adobe.com/mxml/2009"
4. xmlns:s="library://ns.adobe.com/flex/spark"
5. xmlns:local="mx.skins.spark.*"
6. minWidth="21" minHeight="21"
7. alpha.disabled="0.5">
8. <!-- states -->
9. <local:states>
10. <s:State name="up" />
11. <s:State name="over" />
12. <s:State name="down" />
13. <s:State name="disabled" />
14. </local:states>
15.
16. <fx:Script>
17. /* Define the skin elements that should not be colorized.
18. For button, the graphics are colorized but the arrow is not. */
19. static private const exclusions:Array = ["arrow"]; 20. override public function get colorizeExclusions():Array {
21. return exclusions;
22. }
23.
24. /* Define the symbol fill items that should be colored by the "symbolColor" style. */
25. static private const symbols:Array = ["arrowFill1", "arrowFill2"];
26. override public function get symbolItems():Array { 27. return symbols
28. }
29.
30. /* Define the border items.*/
31. static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
32. override protected function get borderItems():Array { 33. return borderItem;
34. }
35. </fx:Script>
36.
37. <!-- layer 1: shadow -->
38. <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
39. <s:fill>
40. <s:LinearGradient rotation="90">
41. <s:GradientEntry color="0x000000" 42. color.down="0xFFFFFF" 43. alpha="0.01"
44. alpha.down="0" />
45. <s:GradientEntry color="0x000000" 46. color.down="0xFFFFFF" 47. alpha="0.07"
48. alpha.down="0.5" />
49. </s:LinearGradient>
50. </s:fill>
51. </s:Rect>
52.
53. <!-- layer 2: fill -->
54. <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
55. <s:fill>
56. <s:LinearGradient rotation="90">
57. <s:GradientEntry color="0xFFFFFF" 58. color.over="0xBBBDBD" 59. color.down="0xAAAAAA" 60. alpha="0.85" />
61. <s:GradientEntry color="0xD8D8D8" 62. color.over="0x9FA0A1" 63. color.down="0x929496" 64. alpha="0.85" />
65. </s:LinearGradient>
66. </s:fill>
67. </s:Rect>
68.
69. <!-- layer 3: fill lowlight -->
70. <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
71. <s:fill>
72. <s:LinearGradient rotation="90">
73. <s:GradientEntry color="0x000000" alpha="0.0099" />
74. <s:GradientEntry color="0x000000" alpha="0.0627" />
75. </s:LinearGradient>
76. </s:fill>
77. </s:Rect>
78.
79. <!-- layer 4: fill highlight -->
80. <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
81. <s:fill>
82. <s:SolidColor color="0xFFFFFF" 83. alpha="0.33"
84. alpha.over="0.22"
85. alpha.down="0.12" />
86. </s:fill>
87. </s:Rect>
88.
89. <!-- layer 5: highlight stroke (all states except down) --> 90. <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
91. <s:stroke>
92. <s:LinearGradientStroke rotation="90" weight="1"> 93. <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
94. <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
95. </s:LinearGradientStroke>
96. </s:stroke>
97. </s:Rect>
98.
99. <!-- layer 6: highlight stroke (down state only) -->
100. <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
101. <s:fill>
102. <s:SolidColor color="0x000000" alpha="0.07" /> 103. </s:fill>
104. </s:Rect>
105. <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
106. <s:fill>
107. <s:SolidColor color="0x000000" alpha="0.07" /> 108. </s:fill>
109. </s:Rect>
110. <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
111. <s:fill>
112. <s:SolidColor color="0x000000" alpha="0.25" /> 113. </s:fill>
114. </s:Rect>
115. <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
116. <s:fill>
117. <s:SolidColor color="0x000000" alpha="0.09" /> 118. </s:fill>
119. </s:Rect>
120.
121. <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
122. <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
123. <s:stroke>
124. <s:LinearGradientStroke rotation="90" weight="1"> 125. <s:GradientEntry id="borderEntry1" 126. alpha="0.5625" 127. alpha.down="0.6375" /> 128. <s:GradientEntry id="borderEntry2" 129. alpha="0.75" 130. alpha.down="0.85" />
131. </s:LinearGradientStroke>
132. </s:stroke>
133. </s:Rect>
134.
135. <!-- layer 8: arrow -->
136. <s:Path right="6" verticalCenter="0" id="arrow" 137. data="M 4.0 4.0 L 4.0 3.0 L 5.0 3.0 L 5.0 2.0 L 6.0 2.0 L 6.0 1.0 L 7.0 1.0 L 7.0 0.0 L 0.0 0.0 L 0.0 1.0 L 1.0 1.0 L 1.0 2.0 L 2.0 2.0 L 2.0 3.0 L 3.0 3.0 L 3.0 4.0 L 4.0 4.0">
138. <s:fill>
139. <s:RadialGradient rotation="90" focalPointRatio="1"> 140. <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
141. <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
142. </s:RadialGradient>
143. </s:fill>
144. </s:Path>
145.
146. </local:SparkSkinForHalo>
