项目当中用到自定义ComboBox 的皮肤,因为需要显示不止一列的内容,所以打算自定义它的下拉列表。还好flex4当中自定义皮肤非常方便,你只要copy spark.skins.spark.ComboBoxSkin中的内容,稍作修改即可。
主程序:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:view="com.view.*"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.ArrayList; [Bindable]public var dataProvider:ArrayList = new ArrayList([{name:"kenny",phone:123,email:"dd"}, {name:"kenny2",phone:123,email:"dd"}, {name:"kenny3",phone:123,email:"dd"}, {name:"kenny4",phone:123,email:"dd"}, {name:"kenny5",phone:123,email:"dd"}, {name:"kenny6",phone:123,email:"dd"}, {name:"kenny7",phone:123,email:"dd"}, {name:"kenny8",phone:123,email:"dd"}, {name:"kenny9",phone:123,email:"dd"}, {name:"kenny10",phone:123,email:"dd"}, {name:"kenny11",phone:123,email:"dd"}, {name:"kenny12",phone:123,email:"dd"}, {name:"kenny13",phone:123,email:"dd"}, {name:"kenny14",phone:123,email:"dd"}]); private function myLabelFunction(item:Object):String { return item ? item.name + " " + item.phone : ""; } ]]> </fx:Script> <view:CustomComboBox dataProvider="{dataProvider}" labelFunction="myLabelFunction"/> </s:Application>
自定义ComboBox:
<?xml version="1.0" encoding="utf-8"?> <s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" skinClass="com.skin.CustomComboBoxSkin"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.IList; import mx.controls.DataGrid; import mx.controls.dataGridClasses.DataGridColumn; import mx.core.IVisualElement; import mx.events.ListEvent; import spark.events.RendererExistenceEvent; private var _dataProvider:IList; private var dataProviderChanged:Boolean; [SkinPart(required="true")] public var dataGrid:DataGrid; override protected function partAdded(partName:String, instance:Object):void { super.partAdded(partName,instance); if(instance == dataGrid) { dataGrid.addEventListener(ListEvent.ITEM_CLICK,onClickHandler); dataProviderChanged = true; invalidateProperties(); } } private function dataGroup_rendererAddHandler(event:RendererExistenceEvent):void { var renderer:IVisualElement = event.renderer; if (!renderer) return; renderer.addEventListener(MouseEvent.MOUSE_DOWN, item_mouseDownHandler); } private function onClickHandler(event:ListEvent):void { selectedItem = dataGrid.selectedItem; closeDropDown(true); } override public function get dataProvider():IList { return this._dataProvider; } override public function set dataProvider(value:IList):void { this._dataProvider = value; dataProviderChanged = true; invalidateProperties(); } override protected function commitProperties():void { super.commitProperties(); if(dataProviderChanged && dataGrid) { dataProviderChanged = false; dataGrid.dataProvider = dataProvider; dataGrid.validateNow(); } } ]]> </fx:Script> </s:ComboBox>
skin 文件:
<?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" xmlns:mx="library://ns.adobe.com/flex/mx"> <!-- 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(); } } ]]> </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>none</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" maxHeight="134" minHeight="22" > <!-- 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="1"/> </s:stroke> </s:Rect> <!-- fill --> <!--- Defines the appearance of drop-down list's background fill. --> <s:Rect id="background" left="1" right="1" top="1" bottom="1" > <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> <mx:DataGrid id="dataGrid" rowCount="6" left="0" top="0" bottom="0" right="0" hasFocusableChildren="true"> <mx:columns> <mx:DataGridColumn dataField="name" headerText="Name"/> <mx:DataGridColumn dataField="phone" headerText="Phone"/> <mx:DataGridColumn dataField="email" headerText="Email"/> </mx:columns> </mx:DataGrid> </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="spark.skins.spark.ComboBoxButtonSkin" /> <!--- @copy spark.components.ComboBox#textInput --> <s:TextInput id="textInput" left="0" right="18" top="0" bottom="0" skinClass="spark.skins.spark.ComboBoxTextInputSkin"/> </s:SparkSkin>
当然这只是一个简单的例子,而且你可以看到在皮肤文件中的dataGrid的column都是硬编码,在实际项目总你需要根据定义来生成这些column。
相关推荐
另一方面,“KYComboBoxSkin.mxml”可能是自定义ComboBox的皮肤文件,使用MXML语言编写。在Flex中,皮肤可以改变组件的外观和行为,提供更个性化的UI设计。开发者可能在此文件中定制了ComboBox的样式,比如边框、...
如果这个压缩包是一个教程或示例项目,它可能还包含设计图、资源文件(如图片、字体)和工程文件(如.sln,.csproj),用于展示如何实现自定义ComboBox。具体实现细节将依赖于源码和资源文件的内容。 总之,"C#...
这是一个我自定义的combobox,目的是换皮肤,而且是全换。实现方式也不难,主要由static,Dialog,Listbox组合在一起实现的。滚动条的换肤是最难的,自己写需要花上一点时间。但是网上的有现成的嘛,所以借来用用。...
4. **样式和皮肤支持**:为了适应不同的应用场景,我们可以为自定义ComboBox提供多种预设样式或皮肤。这可以通过设置不同颜色、字体和图片资源来实现。还可以考虑提供一个皮肤管理器,方便用户在运行时切换皮肤。 5...
3. **自定义下拉列表项**:除了基本的文字选项,自定义ComboBox可能支持图片、自定义布局或更复杂的数据显示。 4. **扩展功能**:例如,增加搜索功能,允许用户在输入时过滤下拉列表中的选项;或者添加多选功能,让...
一个自定义的combobox,目的是换皮肤,而且是全换。实现方式也不难,主要由static,Dialog,Listbox组合在一起实现的。滚动条的换肤是最难的,自己写需要花上一点时间。但是网上的有现成的嘛,所以借来用用。希望对...
这通常涉及到自定义控件或者对现有控件的扩展,以及可能的皮肤或主题应用,以保证视觉效果的一致性和吸引力。 实现`ComboBox`中嵌入`TreeView`的方法通常包括以下几个步骤: 1. **创建自定义控件**:由于.NET ...
本文将深入探讨如何实现“重绘ComboBox”,即创建一个具有自定义皮肤功能的下拉列表框控件。我们将围绕ComboBox的基础知识、自定义皮肤的原理、换肤功能的实现方法以及涉及到的技术点进行详细的讲解。 ComboBox是...
1. **主题和皮肤**:自定义控件可能会提供一套定制的外观,如改变边框样式、背景色、字体样式等,使其与应用的整体设计风格更协调。 2. **动画效果**:添加展开和收缩下拉列表的平滑过渡动画,提升用户体验。 3. *...
- **自定义样式**: 第三方控件通常提供更丰富的样式和皮肤设置,如dotNetBar和DevExpress,可以通过属性或CSS样式来定制外观。 - **扩展功能**: DevExpress的`DXComboBox`可能包含`LoadOnDemand`功能,仅在需要时...
对于滑动弹出效果,我们可能需要创建一个自定义的皮肤,包括一个可滑动的容器来容纳下拉选项,并监听用户交互事件,如点击或触摸。 1. **创建自定义皮肤**: - 使用MXML或ActionScript创建一个新的Skin类,继承自...
`美化ComboBox.cs`(或类似名称的文件)是关键的源代码文件,它可能包含了自定义ComboBox控件的类。开发者可能通过继承系统默认的ComboBox类,然后重写或添加方法、属性和事件来实现美化。这可能涉及到以下几个方面...
在压缩包中的"combobox"文件可能包含了这些实现细节的源代码,包括自定义的ComboBox类、皮肤资源文件以及可能的示例程序。通过阅读和理解这些代码,开发者可以学习到如何在自己的项目中实现类似的控件美化。 总之,...
本文将围绕“Winform各种自定义控件”这一主题,探讨如何实现各种皮肤、自定义日历以及下拉框选择等特性,并结合提供的文件名,分析可能涉及的技术点。 首先,Winform自定义控件允许开发者根据需求定制控件的外观和...
6. **自定义样式**:根据设计需求,可能需要自定义ComboBox的外观,如边框样式、字体颜色等,这可以通过调整控件的属性或应用皮肤来完成。 7. **多级下拉菜单**:对于地点列表,可能需要展示国家、省份、城市等多级...
1. **自定义ComboBox控件**:为了实现搜索功能,Sakura可能创建了一个自定义的ComboBox类,继承自.NET Framework提供的System.Windows.Forms.ComboBox。这样可以重写或扩展默认的ComboBox行为,如添加文本框输入事件...
3. **自定义组件皮肤**:为`ComboBox`和`ColorPicker`创建独特的皮肤,并确保它们不会受到外部皮肤设置的影响。 4. **修复或规避Adobe的Bug**:文件名中的“Adobe Bug System”暗示这可能是一个已知的问题。查阅...
这可以通过设置`ComboBox`的`ForeColor`、`BackColor`、`Font`等属性,或者自定义控件皮肤来实现。 7. **事件处理**:最后,我们需要处理各种交互事件,如`SelectedIndexChanged`、`MouseClick`等,以确保用户的...