如果您做过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,在研究这块的过程中,我尝试了多种方式,目前只找到上述这一种方式能行的通,如果您有更好的方式,还请指定一下哈,也希望与您探讨这个问题。
发表评论
-
判断是否是正确日期字符串的函数
2012-07-06 09:52 1141个人写的一个判断是否是正确日期字符串的函数, 请大家点评 ... -
PyQt4--QLineEdit内引入正则表达式
2012-07-06 09:46 1512from PyQt4.QtCore import * ... -
杂记之通过style样式xml定义规范组件属性
2012-07-03 13:44 982效果图 main.xml 组件进行关联 --& ... -
Flex 不支持GIF的解决方法
2012-07-02 13:12 893GIF图片,加载到Image后,不能动起来,需要把 gif ... -
使用Flex和Actionscript开发Flash游戏――碰撞检测
2012-07-02 13:12 579这一部分,我们加 ... -
flex 实现的多点切割+mask蒙版+自动识别非透明区域+自适应图片大小
2012-07-02 13:12 1460先上代码: 1){ ... -
flex 界面改进
2012-07-02 13:12 576f 代码如下: ... -
flex 实现的多点切割+mask蒙版+自动识别非透明区域+自适应图片大小
2012-07-01 10:44 1210先上代码: Arr ... -
Flex DataGrid单元格背景色 单元格字体颜色控制
2012-07-01 10:43 1096前阵子在做Flex网页时,关于单元格字体颜色这方面纠结了好 ... -
flex 读取配置文件 与PHP交互 圆饼图
2012-07-01 10:43 630FLEX文件 teacherevalute.mxml ... -
flex 界面改进
2012-07-01 10:43 653f 代码如下: Arr ... -
flex招式八:flex共享对象ShareObject
2012-07-01 10:43 774flex的共享对象ShareO ... -
Flex是咋回事之三 谁用谁知道
2012-06-30 17:07 615Flex是咋回事之三 谁用谁知道 2010年09月21日 ... -
java与flex通信
2012-06-30 17:07 599java与flex通信 2010年10月22日 一、准备 ... -
如何使用Maven 3.0, Flex Mojos 4.0和Flex 4.5构建一个简单的SWF程序
2012-06-30 17:07 1281如何使用Maven 3.0, Flex Mojos 4.0和F ... -
学习flex 初步实现与java进行数据交互
2012-06-30 17:07 639学习flex 初步实现与java进行数据交互 2010年06 ... -
Flex数据绑定陷阱(二)
2012-06-30 17:07 655Flex数据绑定陷阱(二) 2010年08月10日 尝试 ...
相关推荐
该测试程序是用来测试Flex中Panel组件设置了borderSkin后,内容体和标题栏重叠的问题,并给出了解决方式。
主要介绍了C#中winform中panel重叠无法显示问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
不用标题栏就可实现Delphi窗口拖动..rar
devexpress设置皮肤,字体。以及折叠菜单和伸缩Panel的实现。
C# winform 透明Panel ,可以当一个隐藏的按钮使用,写个关闭程序的功能,或者其他功能
c#自定义圆角panel,可设置圆角的弧度,可设置图片,并且有单击事件,自己可以再次修改源码。文件中已生成dll
解决Delphi Xe2应用皮肤后Label字体颜色无法改变问题,增加DisableTheme属性可以设置是否禁用皮肤功能
/// 此类用于将给定的panel控件以所见即所得的方法绘制成Griahp实例以便打印 /// 它只限于panel控件中包含有... /// 本类存在的问题是当lable重叠时,还不能清楚它先绘哪一个,这样可能会把本看到的控件在绘制时覆盖掉
可以动态创建多个panel,选中后可以拖动,可以删除选中的panel,有需要的可以参考一下,非常实用的例子
winform 对panel里面内容的打印实现
标题栏以Panel模拟,实现标题栏拖动、双击最大化、边框拖拉等效果
winform panel 绘制边框阴影 ,可以设置具体显示哪个边框的阴影。 static Image shadowDownRight = new Bitmap(typeof(ShadowPanel), "Images.tshadowdownright.png");//下右 static Image shadowDown = new ...
.net 制作圆角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类提供的,主要作用就是将其他控件组合一起放在一个面板上,使...