分组框（Group Box）是围绕在一组相关控件周围的带标签的矩形边框。它提供了一种通过视觉展示控件关系
的方法。如下图所示：
本文将通过以下几步来实现：
一、继承SkinnableContainer，创建组件类GroupBox。
二、声明外观部件titleDisplay用来显示组合框的标题。
三、增加title属性。
四、覆盖partAdded方法，使标题字符串能够作用于外观部件titleDisplay。
五、创建它的默认外观（皮肤）GroupBoxSkin。
六、为GroupBox增加必要样式。
---------------
一、继承SkinnableContainer，创建组件类GroupBox。
public class GroupBox extends SkinnableContainer
{
public function GroupBox()
{
super();
}
}
二、声明外观部件titleDisplay用来显示组合框的标题。
[SkinPart(required="false")]
public var titleDisplay:TextBase;
三、增加title属性。
private var _title:String = "";
[Bindable]
public function get title():String
{
return _title;
}
public function set title(value:String):void
{
_title = value;
if (titleDisplay)
titleDisplay.text = title;
}
四、覆盖partAdded方法，使标题字符串能够作用于外观部件titleDisplay。
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if (instance == titleDisplay)
{
titleDisplay.text = title;
}
}
至此，GroupBox组件类基本创建完成，但是还不能显示。下面来创建它的默认外观（皮肤）GroupBoxSkin。
五、创建它的默认外观（皮肤）GroupBoxSkin。
第一步，创建组合框的边框。
<!-- 边框 -->
<s:Rect id="border" left="0" right="0" top="10" bottom="0"
radiusX="4" radiusY="4"
>
<s:stroke>
<s:SolidColorStroke id="borderStroke" weight="1"/>
</s:stroke>
</s:Rect>
第二步，创建外观部件titleDisplay。
<!-- 标题 -->
<s:Label id="titleDisplay"
maxDisplayedLines="1"
left="9" top="0"
minHeight="20"
verticalAlign="middle"
textAlign="start"/>
第三步，创建外观部件contentGroup，用于包含组合框的内容。
<!-- 内容区域 -->
<s:Group id="contentGroup"
left="5" right="5" top="21" bottom="5">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:Group>
注意，此时边框是一个闭合的矩形。
图2
从上图，可以看出现在组合框的标题文字与边框是重叠的，显然这不符合我们的要求。
为了解决这个问题，下面要为边框创建一个遮罩。
<!-- 边框遮罩 -->
<s:Group id="borderGroupMask" left="0" right="0" top="0" bottom="0">
<s:Rect left="0" width="7" top="0" bottom="0">
<s:fill>
<s:SolidColor color="#ff0000" alpha="1"/>
</s:fill>
</s:Rect>
<s:Rect left="7" width="{titleDisplay.width+4}" top="30" bottom="0">
<s:fill>
<s:SolidColor color="#ff0000" alpha="1"/>
</s:fill>
</s:Rect>
<s:Rect left="{titleDisplay.width+11}" width="100%" top="0" bottom="0">
<s:fill>
<s:SolidColor color="#ff0000" alpha="1"/>
</s:fill>
</s:Rect>
</s:Group>
为<s:Rect id="border"/>增加属性：mask="{borderGroupMask}"。
六、为GroupBox增加必要样式。
第一步，在GroupBox类中增加以下样式声明，它们用来指定边框的颜色和圆角。
增加borderColor样式。
[Style(name="borderColor", type="uint", format="Color", inherit="no", theme="spark")]
[Style(name="cornerRadius", type="Number", format="Length", inherit="no", theme="spark")]
第二步，在GroupBoxSkin中覆盖updateDisplayList，把样式应用于外观。
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr)
{
cornerRadius = cr; // 取变量
border.topLeftRadiusX = cornerRadius;
border.topRightRadiusX = cornerRadius;
border.bottomLeftRadiusX = cornerRadius;
border.bottomRightRadiusX = cornerRadius;
}
borderStroke.color = getStyle("borderColor");
borderStroke.alpha = getStyle("borderAlpha");
//
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
至此所有工作完成。效果如下：
图3
完整的文件如下：
1 GroupBox.as
package jx.components
{
import spark.components.SkinnableContainer;
import spark.components.supportClasses.TextBase;
/**
* The alpha of the border for this component.
*
* @default 0.5
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[Style(name="borderAlpha", type="Number", inherit="no", theme="spark")]
/**
* The color of the border for this component.
*
* @default 0
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[Style(name="borderColor", type="uint", format="Color", inherit="no", theme="spark")]
/**
* The radius of the corners for this component.
*
* @default 5
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
[Style(name="cornerRadius", type="Number", format="Length", inherit="no", theme="spark")]
public class GroupBox extends SkinnableContainer
{
public function GroupBox()
{
super();
}
//----------------------------------
// titleField
//----------------------------------
[SkinPart(required="false")]
/**
* 定义容器中标题文本的外观的外观部件。
*
* @see jx.skins.GroupBoxSkin
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
public var titleDisplay:TextBase;
//----------------------------------
// title
//----------------------------------
/**
* @private
*/
private var _title:String = "";
/**
* @private
*/
private var titleChanged:Boolean;
[Bindable]
/**
* 标题或者说明。
* @default ""
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
public function get title():String
{
return _title;
}
/**
* @private
*/
public function set title(value:String):void
{
_title = value;
if (titleDisplay)
titleDisplay.text = title;
}
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if (instance == titleDisplay)
{
titleDisplay.text = title;
}
}
}
}
2 GroupBoxSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5">
<fx:Metadata>
[HostComponent("jx.components.GroupBox")]
</fx:Metadata>
<fx:Script fb:purpose="styling">
static private const exclusions:Array = ["titleDisplay", "contentGroup"];
/**
* @private
*/
override public function get colorizeExclusions():Array {
return exclusions;
}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
private var cornerRadius:Number;
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr)
{
cornerRadius = cr; // 取变量
border.topLeftRadiusX = cornerRadius;
border.topRightRadiusX = cornerRadius;
border.bottomLeftRadiusX = cornerRadius;
border.bottomRightRadiusX = cornerRadius;
}
borderStroke.color = getStyle("borderColor");
borderStroke.alpha = getStyle("borderAlpha");
//
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!-- 边框遮罩 -->
<s:Group id="borderGroupMask" left="0" right="0" top="0" bottom="0">
<s:Rect left="0" width="7" top="0" bottom="0">
<s:fill>
<s:SolidColor color="#ff0000" alpha="1"/>
</s:fill>
</s:Rect>
<s:Rect left="7" width="{titleDisplay.width+4}" top="30" bottom="0">
<s:fill>
<s:SolidColor color="#ff0000" alpha="1"/>
</s:fill>
</s:Rect>
<s:Rect left="{titleDisplay.width+11}" width="100%" top="0" bottom="0">
<s:fill>
<s:SolidColor color="#ff0000" alpha="1"/>
</s:fill>
</s:Rect>
</s:Group>
<!-- 边框 -->
<s:Rect id="border" left="0" right="0" top="10" bottom="0"
radiusX="4" radiusY="4"
mask="{borderGroupMask}"
><!--mask="{borderGroupMask}"-->
<s:stroke>
<s:SolidColorStroke id="borderStroke" weight="1"/>
</s:stroke>
</s:Rect>
<!-- 标题 -->
<s:Label id="titleDisplay"
maxDisplayedLines="1"
left="9" top="0"
minHeight="20"
verticalAlign="middle"
textAlign="start"/>
<!-- 内容区域 -->
<s:Group id="contentGroup"
left="5" right="5" top="21" bottom="5">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:Group>
</s:SparkSkin>
3 GroupBoxExam.mxml 实例文件
<?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:components="jx.components.*">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
</fx:Declarations>
<components:GroupBox skinClass="jx.skins.GroupBoxSkin" title="用户配置文件" cornerRadius="5">
<components:layout>
<s:HorizontalLayout/>
</components:layout>
<s:Button/>
<s:Button/>
<s:Button/>
</components:GroupBox>
</s:Application>
4 css
可以通过css为GroupBox指定样式的默认值。
@namespace components "jx.components.*";
components|GroupBox {
skinClass: ClassReference("jx.skins.GroupBoxSkin");
cornerRadius: 5;
borderColor: #104778;
borderWeight: 1;
dropShadowVisible: false;
}
5 代码方式指定组件的默认CSS样式
private static const classConstructed:Boolean = classConstruct();
// 指定默认样式
private static function classConstruct():Boolean {
var styleManager:IStyleManager2 = FlexGlobals.topLevelApplication.styleManager;
if (!styleManager.getStyleDeclaration("jx.components.GroupBox")) {
var css:CSSStyleDeclaration = new CSSStyleDeclaration(null, styleManager);
css.defaultFactory = function():void {
this.skinClass = GroupBoxSkin;
this.borderAlpha = 1;
this.borderColor = 0; // 黑
// this.borderColor = 0xD3D3D3; // 灰
// this.borderColor = 0x104778; // 蓝
this.cornerRadius = 5;
// this.dropShadowVisible = true;
// this.borderWeight = 1;
}
styleManager.setStyleDeclaration("jx.components.GroupBox", css, true);
}
return true;
}
完整的项目请下载附件GroupBoxExam.zip。
- 大小: 2.4 KB
- 大小: 1.5 KB
- 大小: 1.6 KB
分享到：
相关推荐
flex 带矩形边框的GroupBox. 直接就能用
Flex 本身没有提供 GroupBOX控件，与GroupBOX功能比较类似的控件有：Canvas画布控件。它有一个边框，但是这个边框，默认的样式是运行时不显示的，可以将borderStyle="solid"这样设置，看起来就好GroupBOX的功能，...
在Flex自己的component下面没有GroupBox，特提供一个，用法很简单
flex3可用的groupBox组件 网上都是flex4下用的，flex3用的时候会报错。 gruopBox还是很实用的一个控件，对于习惯了cs布局的朋友来说。
使用WPF中的GroupBox控件时，如果背景色不是白色，那么会在GroupBox边框出现白边，这个项目包含了去除白边的Style。
引言最近也有很多人来向我"请教"，他们大都是一些刚入门的新手，还不了解这个行业，也不知道从何学起，开始的…阅读博文来自： 菜鸟的博客C#更改groupbox边框
分组类控件主要包括容器控件(Panel)，分组框控件(groupBox)和选项卡控件(TabControl)等控件。 一、Panel控件 Panel控件是由System.Windows.Forms.Panel类提供的，主要作用就是将其他控件组合一起放在一个面板上，使...
GroupBox对界面中的控件进行分组.rar GroupBox对界面中的控件进行分组.rar
由于项目需要，需要自绘一个GroupBox，可以方便改变边框颜色，可以设置显示的字体
用Group Box控件对控件分组 用Group Box控件对控件分组 用Group Box控件对控件分组 用Group Box控件对控件分组
这是一个用c#开发，简单的给groupbox加上滚动条的代码，可以举一反三，以后如果哪个控件没有自动出现滚动条的功能，皆可以用这个方法实现
WPF中内容控件的用法，包括GroupBox组合框控件，Expander控件,TabControl标签控件
silverlight Groupbox silverlight Groupbox silverlight Groupbox
wince下GroupBox，vs2008+wince6，
适用于winform的自定义groupbox控件，继承自系统groupbox 修改其边框颜色，完全适应标题字体变换
vc下groupbox分组框和按钮的自绘，见文档：http://blog.csdn.net/dijkstar/article/details/27964389。
c#自定义GroupBox控件，可自定义边框样式颜色等。
C#自定义控件案例--美化GroupBox2019
VC6下重绘groupbox的例子，显示效果比较好看，可用于美化界面。 使用方法为，将XPGroupBox.cpp和XPGroupBox.h添加到你的VC工程中，在界面中添加...注意将此控件的tabindex设置的考前，否则可能遮挡住框内的内容。