12.2.OrangeUI控件使用说明(多页控件PageControl)(示例2 常用效果)

这个示例我们要实现PageControl的常用效果,

如下图所示:

拖一个PageControl到窗体上,

右键PageControl->New TabSheet,添加三个TabSheet,

一个TabSheet需要两个状态的图标,

一个是普通状态,一个是激活状态的。

拖一个ImageList,把这几个图标添加进去,

三个分页的标题分别设置为”课表”,”校园”,”我”

把PageControl.Properties.Orientation设置为Bottom,

表示将TabHeader放到底部,

PageControl.Properties.TabHeaderHeight设置为60,

把PageControl的Align设置为Client,

分别设置三个TabSheet的Icon和PushedIcon,

方法为Icon.SkinImageList为刚才我们添加的imglistIcons,

Icon.ImageIndex为0,

PushedIcon.SkinImageList也为imglistIcons, ImageIndex为1,

(注: 在设计时双击TabHeader可以切换当前分页)

接下来先设置标题,让它底部水平居中,默认字体颜色设置为#FF878787,

标题的绘制参数在PageControl.SelfOwnMaterial.DrawTabCaptionParam中,

展开PageControl.SelfOwnMaterial.DrawTabCaptionParam,

把它的DrawFont.FontColor设置为#FF878787,

FontHorzAlign设置为fvaCenter,

FontVertAlign设置为fvaBottom,

再设置当页面激活时标题的颜色,

展开DrawTabCaptionParam.DrawEffectSetting.PushedEffect,

勾选EffectTypes中的depetFontColorChange,

并且把FontColor设置为#FF46D2DC,

效果如下:

接下来设置图标,

图标绘制参数在DrawTabIconParam中设置,

先把图标设置为水平居中,

DrawTabIconParam.PictureHorzAlign设置为phaCenter,

图标大小是50*50,看起来有点大了,需要缩小一点,

设置IsStrech为True,

IsAutoFit也为True,

然后设置图标的绘制尺寸,

在DrawTabIconParam.DrawRectSetting中设置,

Enabled设置为True,

Height设置为44,

SizeType设置为Pixel,

OK,设置完成了,双击TabHeader切换看效果,

 

 

 

 

 

 

发表评论