Radbuttonelement Alignment

[joshuarivers]

I just updated my project to Q1 2009. The buttons in my RadRibbon are displayed as an icon centered above text.

After the upgrade, the icon is no longer centered, but left-aligned over the text.

Why has the behavior changed, and what do I need to do to get my alignment back where it belongs?

[Deyan]

Hi Joshua,

Thanks for writing.

You can try setting the ImageAlignment property of the RadButtonElement to MiddleCenter in order to position the Image as preferred.

Do not hesitate to write back in case of further questions.

Greetings,
Deyan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[joshuarivers]

Here are my current settings. The Text appears centered. The image is shown far left.
           radButtonElement1.DisplayStyle = DisplayStyle.ImageAndText;
            radButtonElement1.Image = ButtonIcon;
            radButtonElement1.Text = ButtonLabel;
            radButtonElement1.ImageAlignment = System.Drawing.ContentAlignment.MiddleCenter;
            radButtonElement1.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText;
            radButtonElement1.StretchVertically = true;
            radButtonElement1.Padding = new System.Windows.Forms.Padding(5);

[Deyan]

Hi Joshua,

Thanks for getting back to me.

Since I am not able to reproduce the described behavior on my machine (setting the ImageAlignment property works for me), I would like to ask you to send me your Designer.cs code or a sample project that manages to reproduce the issue so that I can further investigate it and provide you with a solution soon. You can do so in a new support ticket (our Forums do not allow attachments).

In the meantime, could you please try resetting the ImageAlignment property for all the buttons that do not appear properly (set it to different value and back to MiddleCenter)? I hope this will help.

I am looking forward to receiving the details requested.

Kind regards,
Deyan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[joshuarivers]

Can you attach your working sample app, and I'll attempt to reproduce on it?

[Deyan]

Hello Joshua,

Thanks for getting back to me.

I am sending you a sample application in which I have a Form with a RadRibbonBar. In the RadRibbonBar I have one CommandTab with a Group in which I have put a RadButtonElement. Please note, that the alignment of the Image in the button is not properly updated while in design-time. However, in runtime everything should behave normally.

I hope this will help you.

Greetings,
Deyan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[joshuarivers]

I've reproduced the problem. It appears to be related to assigning a Padding to the button.

You can download my proof of failure at:
http://rtidevelopmentbucket.s3.amazonaws.com/124697_windowsformsapplication.zip?AWSAccessKeyId=0R1668FQJS2V95SCZZG2&Expires=1240085422&Signature=s1NRPpn2tkiCJj1hvuRun1bMH58%3D

Or this link.

[Deyan]

Hello Joshua,

Thanks for the details.

I have managed to reproduce the issue and I can confirm that this is undesired behavior for the RadRibbonBar.

However, I have found an easy way to workaround it. Please, change the position of the line where you set the ImageAlignment of your Button after the line where you insert the button in the RadRibbonBar:

RadButtonElement rbe3 = new RadButtonElement();
rbe3.Text = "Description";
rbe3.Image = WindowsFormsApplication26.Properties.Resources.document_open_recent;
rbe3.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText;
rbe3.Padding = new System.Windows.Forms.Padding(5);

radRibbonBarGroup1.Items.Add(rbe3);

rbe3.ImageAlignment = System.Drawing.ContentAlignment.MiddleCenter;

We are going to investigate the reason for this behavior and provide a fix for it in our future releases.

I am sorry for the inconvenience.

Do not hesitate to write back in case of further questions.

Kind regards,
Deyan
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[joshuarivers]

Thanks for the help. That will work as a temporary fix.

[Ab]

We're using RadMenu, RadMenuButton so I'm unsure if this issue is related. If it is then this issue still exists in 2014 (using latest release) -- Is this fixed? 

FYI:
- I'm not setting this through code so the workaround doesn't apply.
- Changing the settings Text Alignment & TextImageRelation using properties does not make a difference for us
    TextImageRelation -> Overlay or ImagebeforeText produce the same result (see image)

In addition the following do not work:
- tooltips
- backcolor - changing this value has no impact {mnuNewAlerts.BackColor = Color.Yellow}

[George]

Hello Abhinav,

Thank you for contacting us.

Since RadMenuButtonItem hosts a RadButtonElement internally, most of their properties are bound through property binding, but not all. That is why you need to set some of the properties to the ButtonElement directly. Set the Image and Text properties directly to the RadMenuButtonItem instance. Then set any text/image related properties to the ButtonElement:

buttonItem.ButtonElement.TextAlignment = ContentAlignment.BottomLeft;
buttonItem.ButtonElement.TextImageRelation = TextImageRelation.TextAboveImage;

In order to show a ToolTip you also need to set the ToolTipText property of the hosted RadButtonElement instance.

And since RadButtonElement uses FillPrimitive for its background, you need to set its BackColor property:

buttonItem.ButtonElement.ButtonFillElement.BackColor = Color.Red;

I am also attaching a sample project which demonstrates these approaches.

I hope this helps.

Regards,
George
Telerik