CXTPButton images on high dpi

I'm currently testing our software with the new Codejock version 17, Beta 3 release.

With the codejock version 16.4.0, on high dpi devices , the images on our buttons were scaling down relative to the button size. Now with the new codejock version, the buttons are scaling up to take into account the dpi of the device used, but they begin to get quite pixelated.

I'm trying to provide larger images, 36x36 and 48x48 on top of the 24x24 ones we currently provide and setting the icon of the button with the one that best suits the dpi setting.

The problem I'm finding with this solution is that, when the image is drawn on the button, the CXTPButtonTheme code is scaling the image up again with calls to:

XTP_DPI(pButton->GetImageSize())

This causes the image to be quite badly clipped to the button extent.

At the moment, the only solution I can see is to remove the XTP_DPI wrapper around calls to pButton->GetImageSize(), in both the CXTPButtonTheme and CXTPButtonThemeOffice2013 classes. One side effect of this change is that, the new image sizes are slightly too big or too small for scales factors outside of 100%, 150% and 200%.

Any help would be greatly appreciated.

I've also found an issue with our right-click context menus. Icons on the popup menu are always drawn at size 16x16, rather than using larger icons and being scaled up or down if necessary.

Digging into the code, the problem appears to lie in the CXTPCommandbar function GetIconSize.

In this function, it calls GetCommandBars() and if this fails, it returns CSize(16,16);

I've fixed this by wrapping the return value in the XTP_DPI macro, thus getting:

     CXTPCommandBars* pCommandBars = GetCommandBars();

     if (!pCommandBars)
          return XTP_DPI(CSize(16, 16));

and now I'm getting much better results.

I also had an issue displaying different size icons in gallery control items. The existing code finds the smallest icon using CXTPControlGalleryItem::GetImage() function.

I had to change this function so that CXTPControlGalleryPaintManager DrawItem function intially finds the smallest icon, to work out drawing extents, and then just before drawing, finds the best icon to draw.

The change I made looks something like this:

CXTPImageManagerIcon* CXTPControlGalleryItem::GetImage(bool bSmall)
{
     if (!m_pItems)
          return NULL;

     return m_pItems->GetImageManager()->GetImage(m_nImage >= 0 ? m_nImage : m_nId, (bSmall == true) ? 0 : m_nImageWidth);
}

and calls to draw the image look like this:

if (pImage = pGalleryItem->GetImage(false))
    pImage->Draw(pDC, pt, pImage->GetIcon(bEnabled ? xtpImageNormal : xtpImageDisabled), szImage);

For this to have any effect, larger images must be supplied and gallery items must call SetImageWidth, with the smallest icon width wrapped in the XTP_DPI_X macro.

With all these changes our applications are starting to look really nice with clean, crisp images at 150% and 200% scaling. Some of the codejock controls aren't looking so good though, especially the slider control and the gallery scroll bar.



Is it possible to improve these images or will they be fixed in the final release?

Glad to help Mark. It's partly for my own reference as I expect to have to go through this whole process again when 17.0 is released.

I've found another issue. In the ribbon bar system button, the icons that appear here are simply small icons, scaled up. To fix it I've changed the DrawControl function in the CXTPRibbonBackstageViewThemeResource class.

The code that looks like the following

CXTPImageManagerIcon* pIcon = pView->GetImageManager()->GetImage(pControl->GetIconId());
if (pIcon)
{
    // Office 2010 respects this rule of 120 DPI
    ...
}

I've changed to:

CXTPImageManagerIcon* pSmallIcon = pView->GetImageManager()->GetImage(pControl->GetIconId(), ICON_SMALL);
if (pSmallIcon)
{
    // Office 2010 respects this rule of 120 DPI
    CSize szIconScalled(XTPDpiHelper()->ScaleX(pSmallIcon->GetWidth(), 120), XTPDpiHelper()->ScaleY(pSmallIcon->GetHeight(), 120));

    CPoint ptIcon = CPoint(rcText.left, (rcText.top + rcText.bottom - szIconScalled.cy ) / 2);

    if (auto pBestIcon = pView->GetImageManager()->GetImage(pControl->GetIconId(), szIconScalled.cx))
        pBestIcon->Draw(pDC, ptIcon, pBestIcon->GetIcon(bEnabled ? xtpImageNormal : xtpImageDisabled), szIconScalled);

    rcText.left += XTPDpiHelper()->ScaleX(pSmallIcon->GetWidth(), 120) + m_nImageMargin;
}           

Thanks for getting back to me. I've been a bit too busy getting our suite of applications ready but will respond when I have a few minutes.

We are looking to release our software shortly, maybe mid to late November, and we wondered what your schedule is for the final Version 17 release.

Thanks,
James

I've just had to make another fix for toolbars we have in our applications that are non standard sizes. In these instances it's displaying the smallest icon rather than the one that best fits the dpi setting.

Towards the end of the LoadToolBar function in the CXTPCommandBar class there's a line of code:

if (pData->wWidth != 16)
{
        SetIconSize(CSize(pData->wWidth, pData->wHeight));
}

To get it to work correctly I've wrapped the CSize in the XTP_DPI macro, giving me:

{
        SetIconSize(XTP_DPI(CSize(pData->wWidth, pData->wHeight)));
}

I've just downloaded codejock version 17.1 and am currently testing it and going through all the high dpi issues I found with the Beta 3.

1) The CXTPCheckListBox is still not considering the correct rect when clicking on and invalidating it. I've changed my solution so the constructor of the m_checkListState member wraps the m_sizeCheck variable in the XTP_DPI macro:

     m_sizeCheck.cx = XTP_DPI_X(bm.bmWidth / 3);
     m_sizeCheck.cy = XTP_DPI_Y(bm.bmHeight);


2) Large toolbars still aren't showing the correct size icon. We're still having to apply the XTP_DPI macro to the size passed to the SetIconSize function in the CXTPToolBar LoadToolBar function.


3) The issue with the CXTPRibbonBackstageViewThemeResource simply scaling up small icons has now been fixed. Thanks.


4) Some of the Codejock controls, like radio buttons, slider controls and scroll bars on gallery controls are still quite badly pixelated at high DPI.


5) As you already noted, you did not implement my CXTPControlBitmap::GetSize fix, stating that it "changes default behavior for the function and thus most likely other customers will complain about broken behavior in their scenarios." It is still a necessary fix for us to enable us to show the best size image for the dpi.


6) There is still an issue with gallery control items showing icon sizes that best fit the dpi. The existing code just displays the smallest icon using CXTPControlGalleryItem::GetImage() function. I've had to change this function to take a boolean parameter, and change the CXTPControlGalleryPaintManager DrawItem function to intially find the smallest icon, to work out drawing extents, and then just before drawing, finds the best icon to draw. So the code inside the CXTPControlGalleryItem GetImage function now looks like this:

CXTPImageManagerIcon* CXTPControlGalleryItem::GetImage(bool bSmall)
{
    if (!m_pItems)
      return NULL;

    return m_pItems->GetImageManager()->GetImage(m_nImage >= 0 ? m_nImage : m_nId, (bSmall == true) ? 0 : m_nImageWidth);
}

and the CXTPControlGalleryPaintManager DrawItem function now looks something like:

void CXTPControlGalleryPaintManager::DrawItem(...)
{
    ...
    CXTPImageManagerIcon* pImage = pGalleryItem->GetImage(true);
    ...
    if (...)
    {
      ...
      if (pImage = pGalleryItem->GetImage(false))
        pImage->Draw(...);
      ...
    }
    else if (...)
    {
      ...
      if (pImage = pGalleryItem->GetImage(false))
        pImage->Draw(...);
      ...
    }
    else if (...)
    {
      ...
      if (pImage = pGalleryItem->GetImage(false))
        pImage->Draw(...);
    }
    ...
}

For this to have any effect, larger images must be supplied and gallery items must call SetImageWidth, with the smallest icon width wrapped in the XTP_DPI_X macro. Excuse me if my previous explanation of the problem and my solution weren't clear enough.


7) The issue I was having with providing larger icon sets for ribbon bar items, messing up the ribbon layout has now been fixed. Thankyou.


8) The issue with right-click context menus always showing the smallest icon has not been fixed. I appreciate you could not implement our fix, but we will continue to use it, as it hasn't caused any unexpected results for us or our customers.


9) The issue we found with icons on the Status Bar simply scaling up the smallest icon provided, also has not been fixed. I trust you are looking into this and we will continue to use our fix.


10) The inital problem we found with icons on buttons simply scaling up the smallest size provided is still an issue. We will continue to remove the XTP_DPI macro from calls to pButton->GetImageSize() in both the CXTPButtonTheme and CXTPButtonThemeOffice2013 classes.


In addition to this, the new version appears to badly clip tooltip text. I don't know if you're aware of this. It may be expecting a small size image when calculating the tooltip rect and then when it displays the tooltip, it uses the largest image and doesn't have enough room to display the text. I'll look into it further.            

Yes, please fix the CXTPButton images with high DPI.