Codejock Developer Community : Center vertically the image in a ribbon button

Center vertically the image in a ribbon button : Thank you very much!

Mon, 14 Nov 2016 03:34:25 +0000

Author: ovidiumvp
Subject: 23198
Posted: 14 November 2016 at 3:34am

Thank you very much!

Center vertically the image in a ribbon button : Hello Ovidiu,Algogithm for drawing...

Sat, 12 Nov 2016 10:54:53 +0000

Author: olebed
Subject: 23198
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

Center vertically the image in a ribbon button : I added button controls to a...

Fri, 11 Nov 2016 10:30:20 +0000

Author: ovidiumvp
Subject: 23198
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.