OrangeUI-开放-免费

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个像素,
如下图进行设置: