OrangeUI

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

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

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

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

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

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

 
来看下效果:

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的位置都不需要重新设置
如下图所示: