OrangeUI控件使用说明(按钮控件Button)(示例1 基本功能)

我们做个三态按钮来演示一下按钮的基本设置，

三态按钮就是有三种状态:正常状态、鼠标停靠和鼠标点击状态，

在这三种状态时，按钮使用不同的背景图片来表示当前所处哪个状态，

举例，有如下三种状态，

:正常状态的背景图片

:鼠标停靠时的背景图片

:鼠标点击时的背景图片

 

把这三张图片分别设置给按钮SelfOwnMaterial的NormalPicture、HoverPicture、DownPicture属性(双击NormalPicture就能打开图片编辑器来设置),

然后给按钮设置标题为“确定”，

如下图所示:

上图中，标题显示在了左上角，

并且背景图片拉伸得有些模糊，

所以要先把按钮的标题显示在中间位置，

在属性编辑器中展开SelfOwnMaterial里的DrawCaptionParam（按钮标题绘制参数），

里面有两个属性，

把FontHorzAlign(水平对齐属性)设置为fhaCenter(水平居中)，

把FontVertAlign(垂直对齐属性)设置为fvaCenter(垂直居中)，

如下图所示:

还有一个问题需要解决,

就是当控件变大，背景图片边缘会显得特别模糊，

如下图(将按钮拉得比较大的时候):

展开SelfOwnMaterial下的DrawPictureParam(背景图片绘制参数)，

把StretchStyle设置为issSquare，

九宫格缩放规则:

背景图片四个角不变,

两条横向的边水平拉伸，

两条纵向的边垂直拉伸，

中间的方块放大，

如下图所示:

设置完之后，就再也不担心放多大了

如下图所示:

接下来，在Windows平台下运行看下效果:

正常状态:

鼠标停靠状态:

鼠标点击状态:

 

再讲一下如何设置来使按钮具有按下的动态效果，

即在鼠标点击的时候标题往右下移动一个像素，

展开SelfOwnMaterial->DrawCaptionParam->MouseDownEffect(鼠标点击效果)

勾选dpcetOffsetChange,表示启用鼠标点击的时候标题位置移动效果

Offset设置为1表示位置移动个1个像素,

如下图进行设置: