- 浏览: 39388 次
- 性别:
- 来自: 珠海
最新评论
如果您做过Flex皮肤方面的工作,并且想自定义Panel及其子控件(TitleWindow、Alert)的皮肤,应该会碰到过在设置了Panel的borderSkin样式后,Panel中的内容体会与Panel的Header部分重叠的问题。初次遇到此问题的时候,我一时束手无策,只能找一种替代方式来暂时解决给Panel设置皮肤。最近再一次接触到Flex的皮肤,因为替代方案在更换皮肤时会对系统改动比较大,所以我觉得有必要更深入了解Flex皮肤与样式,看有没有更好的方式来解决我们遇到的问题,我研究了一下Flex SDK中定义皮肤的类以及Container组件,事实证明我是幸运的。
borderSkin样式用来给Container组件设置四周的边框及背景,Panel的默认borderSkin是mx.skins.halo.PanelSkin,在PanelSkin中有一个对容器边缘有重要影响的属性borderMetrics,该属性用来指定容器四个边框的大小,该属性是实现了IRectangularBorder接口而来的(确切的说应该是IBorder,由于Container中使用的是IRectangularBorder接口,所以我们需要IRectangularBorder接口)。对于自定义皮肤,一般都是使用Flash工具制作的,其链接类是MovieClip的子类,并没有实现Flex中的IRectangularBorder接口,所以对于Container来说,获取不到borderMetrics属性,也就只能使用默认值,也就是四个边框的大小都是0。对于大多数Container的子类来说,边框为0基本没什么影响,但由于Panel的特殊性--Panel多了标题栏,如果Panel的顶部边框为0的话,其内容体部分就会撑到最上面去,与Panel中定义的Header部分重叠起来。其实我们要解决的就是如何给自定义皮肤的Panel容器顶部边框指定一个大于0的值。
对于皮肤的链接类从mx.skins.halo.PanelSkin继承,经测试是没办法编译通过的,因为Flash中链接类必须是MovieClip的子类;所以我尝试了另外一种方法,就是实现IRectangularBorder接口。在Flash中,对皮肤的链接类实现IRectangularBorder接口,但这种方式在项目中无法把皮肤的链接类对象转换为IRectangularBorder接口,可能是因为皮肤是在单独的swf中的缘故,没有与我们的Flex项目在同一个域中;我尝试的第三种方式也是实现IRectangularBorder接口,只是在Flex项目新建了一个容器类,然后把Flash中的Panel皮肤实例化并放到新建的容器类中,把该容器作为Panel的新皮肤类,终于可以解决Panel的内容与标题栏重叠的情况了,下面是效果图和一些代码:
下面是在Flex项目中实现的皮肤类,该类实现了IRectangularBorder接口的borderMetrics属性,并指定了该属性的top值。 package { import flash.display.DisplayObject; import flash.display.Sprite; import flash.geom.Rectangle; import mx.containers.Panel; import mx.core.EdgeMetrics; import mx.core.IRectangularBorder; public class Panel_XSMSkin extends Sprite implements IRectangularBorder { /** * Flash设计的Panel皮肤链接类 */ [Embed(source="yflexskin.swf", symbol="Panel_borderSkin")] public var PanelSkinClass:Class; protected var skin:DisplayObject; /** * 容器的边框大小属性 */ private var _bm:EdgeMetrics; public function Panel_XSMSkin() { super(); if(PanelSkinClass) { // 创建皮肤,并加入到此实现类中 skin = new PanelSkinClass(); this.addChild(skin); } } // IRectangularBorder 接口的方法,可不实现 public function get backgroundImageBounds():Rectangle { return null; } public function set backgroundImageBounds(value:Rectangle):void { } public function get hasBackgroundImage():Boolean { return false; } public function layoutBackgroundImage():void { } /** * 此属性的值用来设置容器的边框大小 * @return * */ public function get borderMetrics():EdgeMetrics { if(_bm == null) { // 这里的关键是实现此属性,并指定边框的大小,其中第二个属性是top值 _bm = new EdgeMetrics(10, 40, 10, 10); } return _bm; } } } 下面是CSS中Panel的设置 Panel { closeButtonDisabledSkin: Embed(source="yflexskin.swf",symbol="Panel_closeBu ttonDisabledSkin"); closeButtonDownSkin: Embed(source="yflexskin.swf",symbol="Panel_closeBu ttonDownSkin"); closeButtonOverSkin: Embed(source="yflexskin.swf",symbol="Panel_closeBu ttonOverSkin"); closeButtonUpSkin: Embed(source="yflexskin.swf",symbol="Panel_closeBu ttonUpSkin"); /* Removed due to incompatibilities with Flex 3 borderSkin: Embed(source="yflexskin.swf", symbol="Panel_borderSkin"); */ borderSkin: Embed(skinClass="Panel_XSMSkin"); drop-shadow-enabled: false; } CSS中注释的部分是没有封装皮肤链接类时设置的样式,在该样式下,内容体会与标题栏重叠,而未注释的borderSkin用来解决这个问题。
该测试项目可以通过下面的链接地址下载
对于上面这种方式也并不是没有缺陷,因为没有从Flex皮肤的基类Border中继承,无法通过CSS来设置Panel的部分样式,当然对于自定义皮肤,基本上也不需要设置这些样式了。
这个Panel皮肤的问题同样适用于TitleWindow和Alert,在研究这块的过程中,我尝试了多种方式,目前只找到上述这一种方式能行的通,如果您有更好的方式,还请指定一下哈,也希望与您探讨这个问题。
发表评论
-
Windows内核函数(1) - 字符串处理函数
2012-07-06 09:52 14571.ASCII字符串和宽字符串 打印一个ASCII字符 ... -
匹配汉字的正则表达式
2012-07-06 09:45 797匹配汉字的表达式: [^x00-xff]。 附:正则表 ... -
Java正则表达式匹配使用实例
2012-07-06 09:37 638实例一: 正则 ... -
firstChild, className,childNodes,parentNode的简单实用
2012-07-05 20:45 651function showmsg(obj) { docum ... -
用纯粹的C++编写COM组件
2012-07-03 13:43 775本文提供一个完全用C++实现的进程内(DLL)COM服 ... -
flex list/tilelist drag scroll的speed移动太快
2012-07-02 10:47 477最近项目中遇到tilelist中拖拽的时scroll的移动 ... -
flex4:中DataGroup组件获取数据源(ArrayCollection方式)实例
2012-07-02 10:47 501flex/spark" xmlns:mx=&q ... -
[ActionScript3.0][My flex]读书笔记三之 模块化编程
2012-07-02 10:47 5361.加载mxml模块 第一步: 新建mxml模块:Data ... -
Flex:在有序DataGrid顶部添加新行
2012-07-02 10:47 432w ... -
B2B2C网上商城开发指南――基于SaaS和淘宝API开放平台
2012-07-01 00:25 606B2B2C网上商城开发指南--基于SaaS和淘宝AP ... -
拥抱RIA拥抱未来
2012-07-01 00:25 597学习和使用RIA已有一段时间了,结合实际工作、谈谈自己的见 ... -
基于WebService+Flex的B/S系统架构
2012-07-01 00:25 634系统采用标准的三层架构 展现层/业务逻辑/数据层 展 ... -
屏蔽Flex右键的一些解决方案
2012-07-01 00:25 516一直以来对Flex或者说Flash的右键就存在一些不好的印 ... -
学习Flex,都学些什么
2012-07-01 00:25 548学习Flex,都学些什么呢? 1、首先是事件机制,整 ...
相关推荐
该测试程序是用来测试Flex中Panel组件设置了borderSkin后,内容体和标题栏重叠的问题,并给出了解决方式。
主要介绍了C#中winform中panel重叠无法显示问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
不用标题栏就可实现Delphi窗口拖动..rar
devexpress设置皮肤,字体。以及折叠菜单和伸缩Panel的实现。
C# winform 透明Panel ,可以当一个隐藏的按钮使用,写个关闭程序的功能,或者其他功能
c#自定义圆角panel,可设置圆角的弧度,可设置图片,并且有单击事件,自己可以再次修改源码。文件中已生成dll
解决Delphi Xe2应用皮肤后Label字体颜色无法改变问题,增加DisableTheme属性可以设置是否禁用皮肤功能
/// 此类用于将给定的panel控件以所见即所得的方法绘制成Griahp实例以便打印 /// 它只限于panel控件中包含有... /// 本类存在的问题是当lable重叠时,还不能清楚它先绘哪一个,这样可能会把本看到的控件在绘制时覆盖掉
winform 对panel里面内容的打印实现
标题栏以Panel模拟,实现标题栏拖动、双击最大化、边框拖拉等效果
winform panel 绘制边框阴影 ,可以设置具体显示哪个边框的阴影。 static Image shadowDownRight = new Bitmap(typeof(ShadowPanel), "Images.tshadowdownright.png");//下右 static Image shadowDown = new ...
.net 制作圆角panel的源码 可运行
可以动态创建多个panel,选中后可以拖动,可以删除选中的panel,有需要的可以参考一下,非常实用的例子
Panel Decorator TextBlock内容模型Panel Decorator TextBlock内容模型
TouchPanel问题集锦
panel颜色问题
实际上,Panel很类似于GroupBox,其区别是:只有GroupBox控件可以显示标题,而只有Panel控件可以有滚动条。 Panel控件在工具箱中的图标如图所示:。 一、Panel控件的常用属性 1、Anchor和Dock:这两个属性是所有...
winform自定义的透明背景的panel,可以覆盖在其他控件上,然后在该透明panel上做绘图、点击获取坐标等操作。
分组类控件主要包括容器控件(Panel),分组框控件(groupBox)和选项卡控件(TabControl)等控件。 一、Panel控件 Panel控件是由System.Windows.Forms.Panel类提供的,主要作用就是将其他控件组合一起放在一个面板上,使...