OrangeUI

有时候,我们需要在PageControl的分页按钮(TabButton)上显示NotifyNumberIcon,
用于提示用户这个分页(TabSheet)有未读的消息,
如下图所示:

 
当然,最简单的实现方式是直接在PageControl上面放一个NotifyNumberIcon,
并且设置NotifyNumberIconHitTest属性为False,
如下图所示:

但是这种方式下,在PageControl的宽度改变的时候,
比如我把PageControl的宽度从320更改为500,

那么NotifyNumberIcon的位置就需要重新计算。
 
另一种方式是让NotifyNumberIcon绑定PageControl上面的TabSheet,
这种方式下,PageControl更改尺寸的时候,
不需要重新设置NotifyNumberIcon的位置。
 
步骤如下:
先准备好一个PageControl,
里面有四个TabSheet,
第一个TabSheet取名为tsMessage,

再拖一个NotifyNumberIcon控件到窗体上,
命名为nniMessage,
设置好nniMessage的素材,
如下图所示:

 
我们要把NotifyNumberIcon显示在第一个分页上,
所以先选中PageControl上的第一个TabSheet(tsMessage),
设置tsMessageProperties.NotifyNumberIconControlnniMessage

 
来看下效果:

nniMessage绘制在第一个分页按钮上了,
默认情况下,
NotifyNumberIcon绑定到TabSheet上时,
会根据分组按钮的整个矩形把NotifyNumberIcon绘制到指定分页按钮上去,
所以我们需要调整NotifyNumberIcon在分页按钮中的绘制矩形,
TabSheet.SelfOwnMaterial.DrawNotifyNumberIconRectSetting中设置,

把宽度设置成40,高度设置成30,并且水平居中,稍微靠右偏移20个像素,
DrawNotifyNumberIconRectSetting.Enabled设置为True,
DrawNotifyNumberIconRectSetting.SizeType设置为dpstPixel,
DrawNotifyNumberIconRectSetting.Width设置为40,
DrawNotifyNumberIconRectSetting.Height设置为30,
DrawNotifyNumberIconRectSetting.PositionHorzType设置为dpphtCenter,
DrawNotifyNumberIconRectSetting.Left设置为20,

效果如下图所示:

这时候,不管PageControl的宽度怎么改变,
NotifyNumberIcon的位置都不需要重新设置
如下图所示: