flex中ComboBox的自定义样式 无边框

最新推荐文章于 2023-02-03 11:00:00 发布
最新推荐文章于 2023-02-03 11:00:00 发布
阅读量2.2k 收藏
点赞数
分类专栏： flex 文章标签： flex 4 combobox 无边框 自定义样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wpz0713/article/details/42708923
版权
ComboBox引用皮肤类：<fx:Style>s|ComboBox{skinClass:ClassReference("com.kingtop.skins.CustomComboBoxSkins")}</fx:Style>
1.在com.kingtop.skins目录下创建CustomComboBoxSkins.mxml文件
<?xml version="1.0" encoding="utf-8"?>
<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

--> 
<!--- The default skin class for the Spark ComboBox component. 
The skin for the anchor button for a ComboBox component 
is defined by the ComboBoxButtonSkin class.  The skin for the text input
is defined by the ComboBoxTextInputSkin class.

@see spark.components.ComboBox        
@see spark.skins.spark.ComboBoxButtonSkin

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5"> 
	
	<!-- host component -->
	<fx:Metadata>
		<![CDATA[ 
		/** 
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("spark.components.ComboBox")]
		]]>
	</fx:Metadata> 
	
	<fx:Script fb:purpose="styling">
		<![CDATA[       
			private var paddingChanged:Boolean;
			private var cornerRadiusChanged:Boolean;
			private var cornerRadius:Number = 0;            
			
			/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
			static private const contentFill:Array = ["bgFill"];
			
			/**
			 * @private
			 */
			override public function get contentItems():Array {return contentFill};
			
			/**
			 *  @private
			 */
			override protected function commitProperties():void
			{
				super.commitProperties();
				
				if (paddingChanged && textInput)
				{
					// Push padding styles into the textDisplay
					var padding:Number;
					
					padding = getStyle("paddingLeft");
					if (textInput.getStyle("paddingLeft") != padding)
						textInput.setStyle("paddingLeft", padding);
					
					padding = getStyle("paddingTop");
					if (textInput.getStyle("paddingTop") != padding)
						textInput.setStyle("paddingTop", padding);
					
					padding = getStyle("paddingRight");
					if (textInput.getStyle("paddingRight") != padding)
						textInput.setStyle("paddingRight", padding);
					
					padding = getStyle("paddingBottom");
					if (textInput.getStyle("paddingBottom") != padding)
						textInput.setStyle("paddingBottom", padding);
					paddingChanged = false;
				}
				
				if (cornerRadiusChanged)
				{
					cornerRadiusChanged = false;
					
					/* var cr:Number = getStyle("cornerRadius");
					
					if (openButton)
					openButton.setStyle("cornerRadius", cr);
					if (textInput)
					textInput.setStyle("cornerRadius", cr); */
				}
			}
			
			/**
			 *  @private
			 */
			override public function styleChanged(styleProp:String):void
			{
				var allStyles:Boolean = !styleProp || styleProp == "styleName";
				
				super.styleChanged(styleProp);
				
				if (allStyles || styleProp.indexOf("padding") == 0)
				{
					paddingChanged = true;
					invalidateProperties();
				}
				if (allStyles || styleProp == "cornerRadius")
				{
					cornerRadiusChanged = true;
					invalidateProperties();
				}                
			}
			
			/**
			 * @private
			 */
			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
			{
				if (getStyle("borderVisible") == false)
				{
					if (border)
						border.visible = false;
					if (background)
					{
						background.left = background.top = background.right = background.bottom = 0;
					}
					if (scroller)
						scroller.minViewportInset = 0;
				}
				else
				{
					if (border)
						border.visible = true;
					if (background)
					{
						background.left = background.top = background.right = background.bottom = 1;
					}
					if (scroller)
						scroller.minViewportInset = 1;
				}
				
				if (dropShadow)
					dropShadow.visible = getStyle("dropShadowVisible");
				
				//openButton.setStyle("cornerRadius", getStyle("cornerRadius"));
				
				if (borderStroke)
				{
					borderStroke.color = getStyle("borderColor");
					borderStroke.alpha = getStyle("borderAlpha");
				}
				super.updateDisplayList(unscaledWidth, unscaledHeight);
			}
		]]>
	</fx:Script>
	
	<s:states>
		<s:State name="normal" />
		<s:State name="open" />
		<s:State name="disabled" />
	</s:states>
	
	<!--- 
	The PopUpAnchor control that opens the drop-down list. 
	
	<p>In a custom skin class that uses transitions, set the 
	<code>itemDestructionPolicy</code> property to <code>never</code>.</p>
	-->
	<s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
				   left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
				   popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
		
		<!--- 
		This includes borders, background colors, scrollers, and filters. 
		@copy spark.components.supportClasses.DropDownListBase#dropDown
		-->
		<s:Group id="dropDown">
			
			<!-- drop shadow -->
			<!--- @private -->
			<s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" 
									 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
			
			<!-- border -->
			<!--- @private -->
			<s:Rect id="border" left="0" right="0" top="0" bottom="0">
				<s:stroke>
					<!--- @private -->
					<s:SolidColorStroke id="borderStroke" weight="0"/>
				</s:stroke>
			</s:Rect>
			
			<!-- fill -->
			<!--- Defines the appearance of drop-down list's background fill. -->
			<s:Rect id="background" left="0" right="0" top="0" bottom="0" >
				<s:fill>
					<!---  
					@private
					The color of the drop down's background fill.
					The default color is 0xFFFFFF.
					-->
					<s:SolidColor id="bgFill" color="0xFFFFFF" />
				</s:fill>
			</s:Rect>
			
			<!--- @private -->
			<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
				<!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
				<s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
					<s:layout>
						<s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>
					</s:layout>
				</s:DataGroup> 
			</s:Scroller>
		</s:Group>
	</s:PopUpAnchor>
	
	<!---  The default skin is ComboBoxButtonSkin. 
	@copy spark.components.supportClasses.DropDownListBase#openButton
	@see spark.skins.spark.ComboBoxButtonSkin -->
	<s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
			  skinClass="com.kingtop.skins.ComboBoxButton" tabEnabled="false" focusAlpha="0" />  
	<!--- @copy spark.components.ComboBox#textInput -->
	<s:TextInput id="textInput" enabled.disabled="false"
				 left="0" right="18" top="0" bottom="0" 
				 skinClass="spark.skins.spark.ComboBoxTextInputSkin"  borderVisible="false"/> 
	
</s:SparkSkin>


2.再创建一个ComboBoxButton.mxml文件

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

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2010 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the anchor button on a Spark ComboBox component.  

@see spark.components.ComboBox        
@see spark.skins.spark.ComboBoxSkin

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="19" minHeight="23">
	
	<fx:Metadata>
		<![CDATA[ 
		/** 
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("spark.components.Button")]
		]]>
	</fx:Metadata> 
	
	<fx:Script fb:purpose="styling">
		/* Define the skin elements that should not be colorized. 
		For dropDownList buttons, the graphics are colorized but the arrow is not. */
		static private const exclusions:Array = ["arrow"];
		
		private var cornerRadius:Number = 0;
		
		/** 
		 * @private
		 */     
		override public function get colorizeExclusions():Array {return exclusions;}
		
		/* Define the symbol fill items that should be colored by the "symbolColor" style. */
		static private const symbols:Array = ["arrowFill1", "arrowFill2"];
		
		/**
		 * @private 
		 */
		override public function get symbolItems():Array {return symbols};
		
		/**
		 * @private
		 */
		override protected function initializationComplete():void
		{
			useChromeColor = true;
			super.initializationComplete();
		}
		
		/**
		 *  @private
		 */
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
		{
			var cr:Number = getStyle("cornerRadius");
			
			if (cornerRadius != cr)
			{
				cornerRadius = cr;
				fill.bottomRightRadiusX = fill.topRightRadiusX = cornerRadius;
				lowlight.bottomRightRadiusX = lowlight.topRightRadiusX = cornerRadius;
				highlight.bottomRightRadiusX = highlight.topRightRadiusX = cornerRadius;
				border.bottomRightRadiusX = border.topRightRadiusX = cornerRadius;
			}
			
			if (highlightStroke) 
				highlightStroke.bottomRightRadiusX = highlightStroke.topRightRadiusX = cornerRadius;
			if (hldownstroke1)
				hldownstroke1.bottomRightRadiusX = hldownstroke1.topRightRadiusX = cornerRadius;
			if (hldownstroke2)
				hldownstroke2.bottomRightRadiusX = hldownstroke2.topRightRadiusX = cornerRadius;
			
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
	</fx:Script>
	
	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>
	
	<!-- layer 1: fill -->
	<!--- @private -->
	<s:Rect id="fill" left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xFFFFFF" 
								 color.over="0xFFFFFF" 
								 color.down="0xAAAAAA" 
								 alpha="0.0" 
								 alpha.down="0.0" 
								 alpha.over="0.0" />
				<s:GradientEntry color="0xFFFFFF" 
								 color.over="0xFFFFFF" 
								 color.down="0x929496" 
								 alpha="0.0" 
								 alpha.over="0.0" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 2: fill lowlight -->
	<!--- @private -->
	<s:Rect id="lowlight"  left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:LinearGradient rotation="270">
				<s:GradientEntry color="0xFFFFFF" ratio="0.0" alpha="0.0" />
				<s:GradientEntry color="0xFFFFFF" ratio="0.48" alpha="0.0" />
				<s:GradientEntry color="0xFFFFFF" ratio="0.48001" alpha="0" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 3: fill highlight -->
	<!--- @private -->
	<s:Rect id="highlight" left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xFFFFFF"
								 ratio="0.0"
								 alpha="0.0" 
								 alpha.over="0.0" 
								 alpha.down="0.0"/>
				<s:GradientEntry color="0xFFFFFF"
								 ratio="0.0"
								 alpha="0.0"
								 alpha.over="0.0"
								 alpha.down="0.0" />
				<s:GradientEntry color="0xFFFFFF"
								 ratio="0.0"
								 alpha="0" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 4: highlight stroke (all states except down) -->
	<!--- @private -->
	<s:Rect id="highlightStroke"  left="0" right="0" top="0" bottom="0" radiusX="0" radiusY="0" excludeFrom="down">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0xFFFFFF" alpha.over="0.0" />
				<s:GradientEntry color="0xD8D8D8" alpha.over="0.0" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 5: highlight stroke (down state only) -->
	<!--- @private -->
	<s:Rect id="hldownstroke1" left="0" right="0" top="0" bottom="0" radiusX="0" radiusY="0" includeIn="down">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0xFFFFFF" alpha="0.0" ratio="0.0" />
				<s:GradientEntry color="0xFFFFFF" alpha="0.0" ratio="0.001" />
				<s:GradientEntry color="0xFFFFFF" alpha="0.00" ratio="0.0011" />
				<s:GradientEntry color="0xFFFFFF" alpha="0.00" ratio="0.965" />
				<s:GradientEntry color="0xFFFFFF" alpha="0.00" ratio="0.9651" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	<!--- @private -->
	<s:Rect id="hldownstroke2"  left="0" right="0" top="0" bottom="0" radiusX="0" radiusY="0" includeIn="down">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0xFFFFFF" alpha="0.00" ratio="0.0" />
				<s:GradientEntry color="0xFFFFFF" alpha="0.00" ratio="0.0001" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 6: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
	<!--- @private -->
	<s:Rect id="border" left="0" right="0" top="0" bottom="0" width="18" height="21">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0x000000" 
								 alpha="0.0"
								 alpha.down="0.0" />
				<s:GradientEntry color="0x000000" 
								 alpha="0.0" 
								 alpha.down="0.0" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 7: arrow -->
	<!--- The arrow graphic displayed in the anchor button. -->
	<s:Path right="6" verticalCenter="0" id="arrow"
			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">
		<s:fill>
			<s:RadialGradient rotation="90" focalPointRatio="1">   
				<!--- 
				@private
				The first part of the arrow's gradient fill. 
				The default alpha is .6. The default color if 0x000000.
				-->
				<s:GradientEntry id="arrowFill1" color="0" alpha="0.4" />
				<!--- 
				@private 
				The second part of the arrow's gradient fill. 
				The default alpha is .6. The default color if 0x000000.
				-->
				<s:GradientEntry id="arrowFill2" color="0"  alpha="0.6" />
			</s:RadialGradient>
		</s:fill>
	</s:Path>
</s:SparkSkin>



 

wpz0713
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QML ComboBox自定义控件
11-19
自定义ComboBox控件用于处理按键上下操作问题，
ComboBox自绘之编辑框中文本的白色边框的处理
u010679316的博客
02-05 1065
问题： 项目需要对源MFC工程中的所有控件的外观进行自绘，在自绘组合框控件时，发现一个比较棘手的问题。组合框中编辑框在获取焦点时，文本会出现一个刺眼的白色边框，如下图。但是自绘函数并没有绘制该边框的代码，这个边框如何去掉呢？ 解决： 由于我的自绘代码已经确定没有绘制这个边框，所以基本确定这是windows系统的杰作。所以考虑直接修改系统配色来隐藏这一个问题。。。无奈的折中的办法。 通过逐个实验w...
DevExpress控件之comboBoxEx（comboBoxEx1.SelectedText与comboBoxEx1.SelectedItem的区别）
闲云野鹤的专栏
03-16 3962
  今天测试DevExpress皮肤空间到时候，用到comboBoxEx控件，想利用comboBoxEx来选择某一皮肤颜色，使得皮肤改变。就做了个小例子。结果comboBoxEx1_SelectedIndexChanged老是不能够正确触发。后来又做了测试，测试发现。响应comboBoxEx1_SelectedIndexChanged的事件写成：Label1.Text=comboBoxEx1.SelectedText.toString()不正确。改成label1.Text= comboBoxEx1.Sele
C# 自定义控件 自定义ComboBox
08-24
C# 自定义控件 自定义ComboBox。其他控件的自定义与此类似。
flex实现 ComboBox中下拉checkbox
03-28
flex实现 ComboBox中下拉checkbox 经测试好用，还有可移动面板，和可改大小面板实例
ComboBox下拉模板自定义样式
09-24
使用Blend 对ComboBox控件进行模板样式重写
QML-自定义ComboBox
06-13
这里实现了一个多功能的ComboBox,具体实现内容可以看我博客http://blog.csdn.net/z609932088/article/details/73196172
combobox 去掉边框，更改背景色 字体颜色
07-09
combobox 可用的时候显示下划线和选择按钮，不可用的时候只显示下划线和字体。字体的颜色还有控件的背景颜色都可以随便的更改。
ComboBox的美化
04-10
本案例介绍如和美化下拉列表框 需要的朋友请看
去掉下拉框的边框
06-21
去除下拉框的边框，包括下拉的按钮，内有demo
3个简单的函数调用 实现ComboBox皮肤-CBitComboBox类
Greless的后花园
06-20 913
翻译来源：https://www.codeproject.com/Articles/6518/Skin-the-ComboBox-in-simple-function-calls 作者：Ashok Jaiswal 设置组合框的下拉列表中的组合框的皮肤。 下载源文件 - 27.2 Kb 下载演示项目 - 27.2 Kb 介绍 这是一个简单的子类
jdevlop 1.7之前的版本，添加skin（2）
sbtmbj2010的专栏
05-29 1111
Apache Trinidad Skinning About Skinning Create a skin - an overview How to create a skin Skinning a component - a step-by-step example Skinning Keys Component-level skinning keys Alias skin
C# Winform 实现窗体无系统边框，但是具有系统边框的所有功能，同时保证控件不闪烁
fttyi的博客
05-25 8138
本人新手，想写个上位机，窗口能够实现最小化，最大化，拖动，改变大小等常用功能，Winform窗体的FormBorderStyle设置成sizable即可实现，但是窗体有自带的边框，不好看且无法编辑，想去掉，网上查到几种方法，都尝试了，但是都有缺陷，不太满意，不过最终还是实现了。走了弯路，浪费了不少时间，在这分享一下，最后效果是没有冗余边框，菜单栏在顶部 网上查到有两个方法（方法一和方法二），都需要将FormBorderStyle设置成None，首先说一下窗体的最小化最大化关闭，以及移动，然后是太多
2.4.2QT之comboBox下拉框
weixin_45913886的博客
02-03 7211
QComboBo 以列表的方式提供一个下拉选项提供给用户显示，节省屏幕占用空间。下拉组合框中数据都可以修改编辑，可以包含图片以及字符串文本。Word 文档软件中的字体选择框、字号选择框、颜色选择框都是使用ComboBo 实现。提示：以下是本篇文章正文内容，下面案例可供参考。
HDividerBox的skin设置
TTS
11-11 146
////////////如下做，但是运用的时候点击divider还是会显示从上到下的分割线该怎么办内？我想只通过img实现打开，关闭操作////////////另外，问下：如何考虑上下左右都写在一个里面,自动识别////////////调用时：&lt;mx：HDividerBox id="hd"/&gt;  hd.setStyle("dividerstyle",DividerBox); p...
combobox 自定义样式
最新发布
06-06
自定义 ComboBox 样式可以让你设置 ComboBox 的外观和行为来满足你的需求。以下是一个自定义 ComboBox 样式的示例： ```xml <Style x:Key="CustomComboBoxStyle" TargetType="{x:Type ComboBox}"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值