- 浏览: 12141 次
最新评论
完美解决Panel设置了borderSkin后内容体与标题栏重叠的问题
- 博客分类:
- 技术杂绘
如果您做过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,在研究这块的过程中,我尝试了多种方式,目前只找到上述这一种方式能行的通,如果您有更好的方式,还请指定一下哈,也希望与您探讨这个问题。
发表评论
-
Java For Android - 操纵字符串中的字符
2012-07-06 09:52 756声明:本文翻译自h ... -
正则基础之
2012-07-06 09:45 640捕获组捕获到的内容,不仅可以在正则表达式外部通过程序进行引 ... -
如何在Sql Server 中使用正则表达式
2012-07-06 09:37 738如果能在Sql Server中 ... -
完整升级XBMC记录
2012-07-06 09:30 986一、下载11.29版本 ... -
js动态控制表单的tr,td的显示和隐藏
2012-07-05 20:45 961无论是事先写好的,还是动态生成的,要找到指定的tr或td都 ... -
Ext JS 4的Grid组件
2012-07-03 13:43 669我们正在不懈地努 ... -
Flex4与java通信(二、与servlet通信)
2012-07-02 12:24 678说明:这里介绍使用URLRequest+URLLoader ... -
flex中给图片(或任意组件)着色的方法
2012-07-02 12:24 574作者:屈剑峰 2011年4月3日 在fl ... -
Flex权威指南3学习笔记之一------界面知识(二)
2012-07-02 12:24 583使用基于条件的约束的布局 1.在viewCart按钮和ch ... -
Flex 屏幕截图并导出图片
2012-07-02 12:23 566在flex中也经常会用 ... -
Web前端开发之“常见模块你真的很了解吗?”
2012-07-01 09:58 768标题和内容模 ... -
Flex3 给VBox/HBox等加背景图片的简易方法
2012-07-01 09:58 908例如有 要给它加个背景图片: 步骤一、 ... -
Flex中要想使图表的横坐标轴标签成45度显示(2)
2012-07-01 09:58 647从外部引入样式 1.在外部src/assets目录文 ... -
实现flex中实现图片平铺
2012-07-01 09:58 660在网页中实现一个图片平铺功能比较简单,只需要设置css样式 ... -
原创-Flex游戏篇--游戏开发概述_6050
2012-06-30 16:23 631原创-Flex游戏篇--游戏开 ... -
Flex优势
2012-06-30 16:23 336Flex优势 2011年07月13日 ... -
flexkf.com flex开发网站简介
2012-06-30 16:23 472flexkf.com flex开发网站简介 2010年06月 ...
相关推荐
该测试程序是用来测试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类提供的,主要作用就是将其他控件组合一起放在一个面板上,使...