Hi,
I've been using XamRibbon for years and it always has this issue with cutting off the bottom of button's caption, see attached for example. The letter 'g' in word ‘Mapping' was cut off. Is there any way to fix this? Thanks.
Hi Daniel,
Which version of the ribbon are you using? 12.1? 12.2?
I've tried reproducing this in my own sample but I don't see any clipping. In your screenshot I see that you have something else underneath that button, the "to Speed" text. Is that another button? Can you send me the XAML for that RibbonGroup where the "Ribbon Mapping" button is located?
Rob, I'm using 12.2 now, but the same thing happened from 11.2. The "something else underneath" is the ribbon group caption. Following is my XAML for this group, we didn't do anything special here.
<igRibbon:RibbonGroup Caption="{x:Static res:MyProductShellRes.GetUpToSpeed}" Margin="5,0,0,0"> <igRibbon:RibbonGroup.Variants> <igRibbon:GroupVariant Priority="70" ResizeAction="ReduceImageAndTextNormalTools"/> </igRibbon:RibbonGroup.Variants> <igRibbon:ButtonTool Id="WhatsNew" Name="buttonWhatsNew" Caption="{x:Static res:MyProductShellRes.GetUpToSpeedHeader}" Command="{Binding ShowWhatsNewCommand}" LargeImage="{x:Static imageLocal:ImageResources.WhatsNew32}" igRibbon:RibbonGroup.MaximumSize="ImageAndTextLarge"> <igRibbon:ButtonTool.ToolTip> <igRibbon:XamRibbonScreenTip Header="{x:Static res:MyProductShellRes.GetUpToSpeedHeader}" Content="{x:Static res:MyProductShellRes.GetUpToSpeedDes}" FooterSeparatorVisibility="Hidden" /> </igRibbon:ButtonTool.ToolTip> </igRibbon:ButtonTool>
<igRibbon:ButtonTool Id="RibbonMapping" Name="buttonRibbonMapping" Caption="{x:Static res:MyProductShellRes.RibbonMapping}" Command="{Binding ShowRibbonMappingCommand}" LargeImage="{x:Static imageLocal:ImageResources.RibbonMapping32}" igRibbon:RibbonGroup.MaximumSize="ImageAndTextLarge"> <igRibbon:ButtonTool.ToolTip> <igRibbon:XamRibbonScreenTip Header="{x:Static res:MyProductShellRes.RibbonMapping}" Content="{x:Static res:MyProductShellRes.RibbonMappingDes}" FooterSeparatorVisibility="Hidden" /> </igRibbon:ButtonTool.ToolTip> </igRibbon:ButtonTool>
</igRibbon:RibbonGroup>
I've taken the code and added it to a sample and I don't see the clipping you showed in the screenshot. Do you have a certain theme applied to the ribbon? What about any custom styles?
I've attached my sample. Can you try running it on your end and see if you can reproduce the clipping issue?
Hi Rob,
I finally found out why this happens. We did specify font family and font size on the XamRibbon, once those are removed, the clipping went away. Does this mean we should not change font when using XamRibbon? btw, we're setting the theme to Office2010Blue.
You should be able to change the font size and family and the button control should size appropriately. What values did you use for the size and family?
I did more investigation and the result was just rather weird. It ended up this way, if I put in two identical RibbonTabItem (same image, same caption) in the ribbon, the first got displayed won't have this cut-off issue, the other one (and any subsequent ones) will always have this cut off issue. And it's noticable that when switching from the first tab to other tabs, the top margin of the icon image is changing, which pushed text down a little bit and caused the cut-off.
I can't think of anything that we could probably have done to make this happen. But I'm looking at a pretty complex and highly customized application here. The only thing I could imagine is the subsequent ribbon tabs are virtualized thus when loading them on demand, something different from the first one happens. If you happen to know anything in this regard, please advise.
Anyway, thanks a lot for your help. I believe this is not likely to be an IG issue because I can't reproduce this in a simple solution.
The font got smaller because the default font size is 11. Once you removed your FontSize setting it reverted back to this smaller size. I've attached a sample that sets the FontSize and FontFamily as you had done and I don't see any clipping on the ButtonTool. Can you verify this in the sample? Is there anything else you're doing on the ribbon in your application that you can add to my sample to reproduce this?
Hi Rob, thanks a lot for your investigation. The strange part in this story though, is that we used to set font on XamRibbon and this issue occurred. Once I removed that font setting on XamRibbon, the issue went away (and I did notice the font got a little bit smaller than before). I double checked today that "Segoe UI 12" was what we used to set. Anyway, I'll live with this until someone raises the issue of font getting smaller on Ribbon...
I was able to reproduce the issue if I placed the font settings on the ButtonTool itself. I think the clipping occurs because the rest of the control is using one font/size and the button tool is trying to use a different size which causes sizing issues.
One way to resolve this would be to place the font family and size directly on the ribbon instead of the button tool. Doing this resulted in proper sizing of all the buttons so that no clipping occurred.
<igRibbon:XamRibbon FontSize="12" FontFamily="Segoe UI">
Hi Rob, I don't have access to my desktop today, as far as I remember, it's Segoe UI, size 12.
I used Snoop to inspect the visual tree and found the itemscontrol that hosts the button tools has a height binding that caused this cut-off, only 1 px smaller than what's desired. This binding is probably set through code as I can't see it in the template shipped with the product.