Toolkit Pro - Center vertically the image in a ribbon button

Center vertically the image in a ribbon button

Printed From: Codejock Forums
Category: Codejock Products
Forum Name: Toolkit Pro
Forum Description: Topics Related to Codejock Toolkit Pro
URL: http://forum.codejock.com/forum_posts.asp?TID=23198
Printed Date: 05 October 2024 at 1:28am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Center vertically the image in a ribbon button

Posted By: ovidiumvp
Subject: Center vertically the image in a ribbon button
Date Posted: 11 November 2016 at 10:30am

I added button controls to a ribbon, changing the default size for each one (that was a requirement).

void CMyRibbon::Init()
{
    //...
    CXTPRibbonGroup* pMyGroup = pMyTab->AddGroup(ID_MY_GROUP);
    pMyGroup->SetControlsCentering();
    pMyGroup->SetArrangeEditCaption(TRUE);
    AddButtonToGroup(pMyGroup, ID_MY_BUTTON);
    //...
}

CXTPControlButton* CMyRibbon::AddButtonToGroup(CXTPRibbonGroup* pParentGroup, int nID)
{
CXTPControlButton* pButton = (CXTPControlButton*)pParentGroup->Add(xtpControlButton, nID);

    pButton->SetStyle(xtpButtonIconAndCaptionBelow);
    pButton->SetWidth(XTP_DPI_X(54));
    pButton->SetHeight(XTP_DPI_Y(82));

return pButton;
}

So far so good but someones complain that doesn't look very well, because the image is aligned to the top of button, the text is aligned to the bottom, so the space between image and text is too large.

Is it any easy way to center vertically the image in the button?

Note: I'm using Office 2013 theme.

-------------
Ovidiu

Replies:

Posted By: olebed
Date Posted: 12 November 2016 at 10:54am

Hello Ovidiu,

Algogithm for drawing ribbon buttons is in CXTPPaintManager::DrawControlToolBarParent() method.
See for

if (buttonStyle == xtpButtonIconAndCaptionBelow)

You can change code to

    if (buttonStyle == xtpButtonIconAndCaptionBelow)    {
        .... // without changes
        if (bDraw)
        {
            // swap parts of drawing  text and image to get correct rcText to center image
            CRect rcText = rcButton;
            ....
            CSize szText = DrawControlText2(pDC, pButton, CXTPEmptyRect(), FALSE, bVert, bTriangled);
            ....
            DrawControlText2(pDC, pButton, rcText, TRUE, bVert, bTriangled);

            if (bDrawImage)
            {
                CSize szScalledIcon = (!bDPIIconsScallingEnabled) ? szIcon :
                    CSize(XTP_DPI_X(szIcon.cx), XTP_DPI_Y(szIcon.cy));

                if (bDPIIconsScallingEnabled)
                {
                    szScalledIcon.cx = min(szButton.cx - nDpiScallingButtonMargin, szScalledIcon.cx);
                    szScalledIcon.cy = min(szButton.cy - nDpiScallingButtonMargin, szScalledIcon.cy);
                }

                CPoint pt;
                if (bVert)
                    pt = CPoint(rcButton.left + XTP_DPI_X(4) + nSplitDropDownHeight, rcButton.CenterPoint().y - szScalledIcon.cy / 2);
                else
                {
                    rcButton.bottom -= rcText.Height();
                    rcButton.top    += XTP_DPI_Y(3);
                    pt = CPoint(rcButton.CenterPoint().x - szScalledIcon.cx / 2, rcButton.CenterPoint().y - szScalledIcon.cy / 2);
                }

                DrawImage(pDC, pt, szScalledIcon, pImage, bSelected, bPressed, bEnabled, bChecked, bPopuped);
            }
        }
        else
        {
            .....
        }
        return GetControlSize(pButton, szButton, bVert);
    }

Regards,
Oleksandr Lebed

Posted By: ovidiumvp
Date Posted: 14 November 2016 at 3:34am

Thank you very much!

-------------
Ovidiu