`
luhantu
  • 浏览: 204028 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

自定义ComboBox 皮肤

阅读更多

项目当中用到自定义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。

 

0
0
分享到:
评论

相关推荐

    自定义ComboBox

    另一方面,“KYComboBoxSkin.mxml”可能是自定义ComboBox的皮肤文件,使用MXML语言编写。在Flex中,皮肤可以改变组件的外观和行为,提供更个性化的UI设计。开发者可能在此文件中定制了ComboBox的样式,比如边框、...

    C#自定义控件--美化ComboBox源码2019

    如果这个压缩包是一个教程或示例项目,它可能还包含设计图、资源文件(如图片、字体)和工程文件(如.sln,.csproj),用于展示如何实现自定义ComboBox。具体实现细节将依赖于源码和资源文件的内容。 总之,"C#...

    自定义的combobox,皮肤什么的都换干净了

    这是一个我自定义的combobox,目的是换皮肤,而且是全换。实现方式也不难,主要由static,Dialog,Listbox组合在一起实现的。滚动条的换肤是最难的,自己写需要花上一点时间。但是网上的有现成的嘛,所以借来用用。...

    C#自定义控件--美化ComboBox源码

    4. **样式和皮肤支持**:为了适应不同的应用场景,我们可以为自定义ComboBox提供多种预设样式或皮肤。这可以通过设置不同颜色、字体和图片资源来实现。还可以考虑提供一个皮肤管理器,方便用户在运行时切换皮肤。 5...

    C#自定义控件--美化ComboBox源码.rar

    3. **自定义下拉列表项**:除了基本的文字选项,自定义ComboBox可能支持图片、自定义布局或更复杂的数据显示。 4. **扩展功能**:例如,增加搜索功能,允许用户在输入时过滤下拉列表中的选项;或者添加多选功能,让...

    自己实现的的combobox,皮肤什么的都换干净了

    一个自定义的combobox,目的是换皮肤,而且是全换。实现方式也不难,主要由static,Dialog,Listbox组合在一起实现的。滚动条的换肤是最难的,自己写需要花上一点时间。但是网上的有现成的嘛,所以借来用用。希望对...

    ComboBox带TreeView控件

    这通常涉及到自定义控件或者对现有控件的扩展,以及可能的皮肤或主题应用,以保证视觉效果的一致性和吸引力。 实现`ComboBox`中嵌入`TreeView`的方法通常包括以下几个步骤: 1. **创建自定义控件**:由于.NET ...

    重绘combobox

    本文将深入探讨如何实现“重绘ComboBox”,即创建一个具有自定义皮肤功能的下拉列表框控件。我们将围绕ComboBox的基础知识、自定义皮肤的原理、换肤功能的实现方法以及涉及到的技术点进行详细的讲解。 ComboBox是...

    C#自定义控件--美化ComboBox源码_89.rar

    1. **主题和皮肤**:自定义控件可能会提供一套定制的外观,如改变边框样式、背景色、字体样式等,使其与应用的整体设计风格更协调。 2. **动画效果**:添加展开和收缩下拉列表的平滑过渡动画,提升用户体验。 3. *...

    各种ComboBox测试程序C#

    - **自定义样式**: 第三方控件通常提供更丰富的样式和皮肤设置,如dotNetBar和DevExpress,可以通过属性或CSS样式来定制外观。 - **扩展功能**: DevExpress的`DXComboBox`可能包含`LoadOnDemand`功能,仅在需要时...

    实现 spark DropDownList 及 ComboBox 的滑动弹入弹出

    对于滑动弹出效果,我们可能需要创建一个自定义的皮肤,包括一个可滑动的容器来容纳下拉选项,并监听用户交互事件,如点击或触摸。 1. **创建自定义皮肤**: - 使用MXML或ActionScript创建一个新的Skin类,继承自...

    C#控件之美化ComboBox源码.rar

    `美化ComboBox.cs`(或类似名称的文件)是关键的源代码文件,它可能包含了自定义ComboBox控件的类。开发者可能通过继承系统默认的ComboBox类,然后重写或添加方法、属性和事件来实现美化。这可能涉及到以下几个方面...

    Combobox美化C#控件美化(源码)

    在压缩包中的"combobox"文件可能包含了这些实现细节的源代码,包括自定义的ComboBox类、皮肤资源文件以及可能的示例程序。通过阅读和理解这些代码,开发者可以学习到如何在自己的项目中实现类似的控件美化。 总之,...

    Winform各种自定义控件

    本文将围绕“Winform各种自定义控件”这一主题,探讨如何实现各种皮肤、自定义日历以及下拉框选择等特性,并结合提供的文件名,分析可能涉及的技术点。 首先,Winform自定义控件允许开发者根据需求定制控件的外观和...

    ComboBox控件实现地点列表.rar

    6. **自定义样式**:根据设计需求,可能需要自定义ComboBox的外观,如边框样式、字体颜色等,这可以通过调整控件的属性或应用皮肤来完成。 7. **多级下拉菜单**:对于地点列表,可能需要展示国家、省份、城市等多级...

    【案例】带搜索ComboBox 作者:Sakura.zip

    1. **自定义ComboBox控件**:为了实现搜索功能,Sakura可能创建了一个自定义的ComboBox类,继承自.NET Framework提供的System.Windows.Forms.ComboBox。这样可以重写或扩展默认的ComboBox行为,如添加文本框输入事件...

    Flex Button 设置skin后,影响combobox和ColorPicker的显示

    3. **自定义组件皮肤**:为`ComboBox`和`ColorPicker`创建独特的皮肤,并确保它们不会受到外部皮肤设置的影响。 4. **修复或规避Adobe的Bug**:文件名中的“Adobe Bug System”暗示这可能是一个已知的问题。查阅...

    可输入的ComboBox(类似浏览器的网址输入栏)

    这可以通过设置`ComboBox`的`ForeColor`、`BackColor`、`Font`等属性,或者自定义控件皮肤来实现。 7. **事件处理**:最后,我们需要处理各种交互事件,如`SelectedIndexChanged`、`MouseClick`等,以确保用户的...

Global site tag (gtag.js) - Google Analytics