如何绘制可随鼠标拖动的大尺寸TrackBar滑块？

核心问题分析 #

你遇到的问题源于系统TrackBar默认仅维护原始滑块的重绘区域和鼠标交互范围：

• 拖动时系统仅刷新原始滑块的矩形区域，导致自定义的滑块扩展部分残留旧位置，只有切换窗体触发全局重绘时才会更新到正确位置。
• 点击自定义滑块的扩展区域可能无法触发拖动，因为系统的hit测试只识别原始滑块范围。

具体修复方案 #

1. 扩大重绘区域，强制刷新完整滑块范围 #

在NM_CUSTOMDRAW的CDDS_ITEMPREPAINT阶段，修改系统的重绘矩形为自定义滑块的范围，让系统刷新整个自定义区域；同时在拖动过程中手动触发控件全局重绘。

2. 处理鼠标Hit测试，让扩展区域可拖动 #

重写WM_NCHITTEST消息，当鼠标落在自定义滑块的扩展区域时，返回可拖动的hit测试结果，让系统识别该区域为滑块交互区域。

修改后的完整代码示例 #

void __fastcall TTrackBar1::CrnNotify(TWMNotify &Message)
{
    LPNMCUSTOMDRAW lpDraw = (LPNMCUSTOMDRAW)Message.NMHdr;

    if(lpDraw->hdr.code == NM_CUSTOMDRAW)
    {
        try
        {
            m_pCanvas->Lock();
            m_pCanvas->Handle = lpDraw->hdc;

            if(lpDraw->dwDrawStage == CDDS_PREPAINT)
            {
                // 通知系统需要处理每个项的绘制
                Message.Result = CDRF_NOTIFYITEMDRAW;
            }
            else if(lpDraw->dwDrawStage == CDDS_ITEMPREPAINT)
            {
                if(lpDraw->dwItemSpec == TBCD_THUMB)
                {
                    // 扩大重绘区域为自定义滑块的范围
                    TRect drct;
                    if(Orientation == trVertical)
                    {
                        drct.left = lpDraw->rc.left - 5;
                        drct.right = lpDraw->rc.right + 5;
                        drct.top = lpDraw->rc.top - 10;
                        drct.bottom = lpDraw->rc.bottom + 10;
                    }
                    else
                    {
                        // 处理水平方向的扩展范围，可按需调整
                        drct.left = lpDraw->rc.left - 10;
                        drct.right = lpDraw->rc.right + 10;
                        drct.top = lpDraw->rc.top - 5;
                        drct.bottom = lpDraw->rc.bottom + 5;
                    }
                    // 修改系统重绘矩形
                    lpDraw->rc = drct;
                    // 跳过默认绘制，使用自定义逻辑
                    Message.Result = CDRF_SKIPDEFAULT;
                    // 执行自定义绘制
                    CrnCustomDraw(Message);
                }
                else
                {
                    // 其他控件项使用默认绘制
                    Message.Result = CDRF_DODEFAULT;
                }
            }
        }
        __finally
        {
            m_pCanvas->Handle = NULL;
            m_pCanvas->Unlock();
        }
    }
}

//---------------------------------------------------------------------------
void __fastcall TTrackBar1::CrnCustomDraw(TWMNotify &Message)
{
    LPNMCUSTOMDRAW lpDraw = (LPNMCUSTOMDRAW)Message.NMHdr;

    if(lpDraw->dwItemSpec != TBCD_THUMB)
        return;

    TRect drct = lpDraw->rc;

    // 绘制自定义滑块背景
    m_pCanvas->RoundRect(drct, 2, 2);
    ::Graphics::TBitmap *bmp = new ::Graphics::TBitmap;
    try
    {
        bmp->Transparent = true;
        bmp->LoadFromFile("UI//slider.bmp");
        // 拉伸位图适配自定义滑块区域
        m_pCanvas->StretchDraw(drct, bmp);
    }
    __finally
    {
        delete bmp;
    }
}

//---------------------------------------------------------------------------
// 拖动时强制重绘整个控件
void __fastcall TTrackBar1::WmVScroll(TWMVScroll &Message)
{
    TTrackBar::WmVScroll(Message);
    Invalidate();
}

void __fastcall TTrackBar1::WmHScroll(TWMHScroll &Message)
{
    TTrackBar::WmHScroll(Message);
    Invalidate();
}

//---------------------------------------------------------------------------
// 处理自定义滑块区域的鼠标交互
void __fastcall TTrackBar1::WmNcHitTest(TWMNcHitTest &Message)
{
    TTrackBar::WmNcHitTest(Message);
    if(Message.Result != HTCLIENT)
        return;

    // 转换鼠标坐标为控件内部坐标
    TPoint pt = ScreenToClient(TPoint(Message.XPos, Message.YPos));
    // 获取原始滑块矩形
    TRect thumbRect;
    SendMessage(Handle, TBM_GETTHUMBRECT, 0, (LPARAM)&thumbRect);
    // 扩展为自定义滑块区域
    TRect customThumbRect;
    if(Orientation == trVertical)
    {
        customThumbRect.left = thumbRect.left - 5;
        customThumbRect.right = thumbRect.right + 5;
        customThumbRect.top = thumbRect.top - 10;
        customThumbRect.bottom = thumbRect.bottom + 10;
    }
    else
    {
        customThumbRect.left = thumbRect.left - 10;
        customThumbRect.right = thumbRect.right + 10;
        customThumbRect.top = thumbRect.top - 5;
        customThumbRect.bottom = thumbRect.bottom + 5;
    }

    // 鼠标在自定义滑块区域时，标记为可拖动
    if(customThumbRect.Contains(pt))
    {
        Message.Result = HTCAPTION;
    }
}

关键修改说明 #

• 在CDDS_ITEMPREPAINT阶段修改系统重绘矩形，确保自定义滑块的完整区域被刷新。
• 拖动滑块时调用Invalidate()，强制控件全局重绘，避免旧绘制内容残留。
• 重写WM_NCHITTEST，让自定义滑块的扩展区域也能响应鼠标拖动，完善交互逻辑。

内容的提问来源于stack exchange，提问作者thousandshadow