Forum
Sign Up

Any Hints On button spacing ?

2 years 6 months ago - 2 years 6 months ago #1 by David Eaton
Is there a way to properly space the buttons on the ribbon for large buttons ?

Here is my app comparing my C# DevExpress Example to Your Controls
www.eatoncode.com/resources/shareit/Main...6-11-19_08.31.43.png

Currently the buttons are longer then they are wide. Every time I try to widen the buttons they seem to miss align.

I would like to widen them out a bit. Only when the are in the large state.


Here is the code I am using to create to buttons.
     tbMainRibbonPage = tbRibbonBar->addPage("Main"); //Adds the main page or the first page...
     tbSurfGroup = tbMainRibbonPage->addGroup(tr("Surf Options")); //Adds Surf Options Group

     QIcon PowerTabIcon;
     PowerTabIcon.addPixmap(QPixmap(":/res/img/MainRibbon/PowerTabsLarge.png"));
     PowerTabIcon.addPixmap(QPixmap(":/res/img/MainRibbon/PowerTabsSmall.png"));
     QAction* PowerTabActions = tbSurfGroup->addAction(PowerTabIcon, tr("Power Tabs"), Qt::ToolButtonTextUnderIcon);
     PowerTabActions->setCheckable(true);
     RibbonControl* PowerTabControl = tbSurfGroup->controlByAction(PowerTabActions);
     PowerTabControl->sizeDefinition(RibbonControlSizeDefinition::GroupLarge)->setImageSize(RibbonControlSizeDefinition::ImageLarge); //Define Large Icon
     PowerTabControl->sizeDefinition(RibbonControlSizeDefinition::GroupMedium)->setImageSize(RibbonControlSizeDefinition::ImageLarge);//Force Large Icon
     PowerTabControl->sizeDefinition(RibbonControlSizeDefinition::GroupSmall)->setImageSize(RibbonControlSizeDefinition::ImageLarge); //Force Large Icon

     QIcon TimerTabIcon;
     TimerTabIcon.addPixmap(QPixmap(":/res/img/MainRibbon/TimerTabsLarge.png"));
     TimerTabIcon.addPixmap(QPixmap(":/res/img/MainRibbon/TimerTabsSmall.png"));
     QAction* TimerTabActions = tbSurfGroup->addAction(TimerTabIcon, tr("Timer Tabs"), Qt::ToolButtonTextUnderIcon);
     TimerTabActions->setCheckable(true); //Allow button to be checkable
     RibbonControl* TimerTabControl = tbSurfGroup->controlByAction(TimerTabActions);
     TimerTabControl->sizeDefinition(RibbonControlSizeDefinition::GroupLarge)->setImageSize(RibbonControlSizeDefinition::ImageLarge); //Define Large Icon
     TimerTabControl->sizeDefinition(RibbonControlSizeDefinition::GroupMedium)->setImageSize(RibbonControlSizeDefinition::ImageLarge); //Force Large Icon
     TimerTabControl->sizeDefinition(RibbonControlSizeDefinition::GroupSmall)->setImageSize(RibbonControlSizeDefinition::ImageLarge); //Force Large Icon

I have sent a simple sample

Thanks.
Last edit: 2 years 6 months ago by David Eaton.

Please Log in or Create an account to join the conversation.

More
2 years 6 months ago #2 by Developer Machines
Thanks for the example. At the moment there is no setting to control the button width and text wrapping. But we can add the setWordWrap() function to the RibbonButton. Is this option right for you?

Please Log in or Create an account to join the conversation.

More
2 years 5 months ago #3 by David Eaton

Developer Machines Support wrote: Thanks for the example. At the moment there is no setting to control the button width and text wrapping. But we can add the setWordWrap() function to the RibbonButton. Is this option right for you?


That would help while developing but I would like some kind of setting where we can define the Width of Large, Medium and Small

In my other tool set I can set the width of a Large and Small Glyph

I know your not DevExpress but it would be nice to have something like this.

documentation.devexpress.com/#WindowsFor...Item_LargeGlyphtopic

documentation.devexpress.com/#WindowsFor...Item_LargeWidthtopic

Yes I would love to unwrap my text, but I also need to have the buttons a uniform width.

Do you think this is something that could be added ?

Setting a custom Width for Large, Medium or Small, if not defined it would use the default?

Since DevExpress is not ever going to support Qt.. www.devexpress.com/Support/Center/Question/Details/Q337674 You guys are the next best thing. :)

Thanks,
David

Please Log in or Create an account to join the conversation.

More
2 years 5 months ago - 2 years 5 months ago #4 by Developer Machines
Relatively of the width management in different modes, I now can add a wish for further investigation. I want to draw your attention that all settings are calculated automatically based on the DPI settings, font size, etc. Setiing the width in pixels, typically can lead to incorrect display, for example if the user changed the font size.

P.S. Probably a good idea to tie the width of ribbon button to the size of icon in some way.
Last edit: 2 years 5 months ago by Developer Machines.

Please Log in or Create an account to join the conversation.

More
2 years 5 months ago #5 by David Eaton

Developer Machines Support wrote: Relatively of the width management in different modes, I now can add a wish for further investigation. I want to draw your attention that all settings are calculated automatically based on the DPI settings, font size, etc. Setiing the width in pixels, typically can lead to incorrect display, for example if the user changed the font size.

P.S. Probably a good idea to tie the width of ribbon button to the size of icon in some way.


I was not exactly sure how the width's were being set. The ability to control the autowrap is going to be the best option if that is the case. But I want the ability to set the auto wrap on each button.. not all buttons at once.

www.eatoncode.com/resources/shareit/Main...6-11-24_21.13.28.png

Thanks.

Please Log in or Create an account to join the conversation.

More
2 years 5 months ago #6 by Developer Machines
We added it to sizeDefinition object. So you will be able to set the word wrapping for selected buttons only. Like this:

TimerTabControl->sizeDefinition(RibbonControlSizeDefinition::GroupLarge)->setWordWrap(true); //By default it is false

Please Log in or Create an account to join the conversation.

More
  • Not Allowed: to create new topic.
  • Not Allowed: to reply.
  • Not Allowed: to edit your message.
Moderators: Developer MachinesEduard
Time to create page: 0.160 seconds

Developer Newsletter

Join our Developer Machines newsletter to get informed on all the latest releases of the commercial components for Qt.C++, Delphi FireMonkey, updates and general knowledges.

Quick Support

Should you need any additional information about our products or licensing, please contact us at the following email addresses:

  • This email address is being protected from spambots. You need JavaScript enabled to view it.

  • This email address is being protected from spambots. You need JavaScript enabled to view it.

Get in Touch

If you would like to purchase our products or services, but don’t know how to do it the right way, please feel free to contact us:

  • This email address is being protected from spambots. You need JavaScript enabled to view it.( any questions related to our products or services )
  • This email address is being protected from spambots. You need JavaScript enabled to view it.( questions related to licensing )