Radbuttonelement Alignment

11 posts, 0 answers
  1. joshuarivers
    joshuarivers avatar
    21 posts
    Member since:
    Jul 2007

    Posted 04 Apr 2009 Link to this post

    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?
  2. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 06 Apr 2009 Link to this post

    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.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. joshuarivers
    joshuarivers avatar
    21 posts
    Member since:
    Jul 2007

    Posted 06 Apr 2009 Link to this post

    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);
  5. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 07 Apr 2009 Link to this post

    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.
  6. joshuarivers
    joshuarivers avatar
    21 posts
    Member since:
    Jul 2007

    Posted 07 Apr 2009 Link to this post

    Can you attach your working sample app, and I'll attempt to reproduce on it?
  7. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 08 Apr 2009 Link to this post

    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.
  8. joshuarivers
    joshuarivers avatar
    21 posts
    Member since:
    Jul 2007

    Posted 08 Apr 2009 Link to this post

    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.


  9. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 10 Apr 2009 Link to this post

    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.
  10. joshuarivers
    joshuarivers avatar
    21 posts
    Member since:
    Jul 2007

    Posted 10 Apr 2009 Link to this post

    Thanks for the help. That will work as a temporary fix.
  11. Ab
    Ab avatar
    11 posts
    Member since:
    Jul 2013

    Posted 27 Feb 2014 in reply to Deyan Link to this post

    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}

  12. George
    Admin
    George avatar
    500 posts

    Posted 04 Mar 2014 Link to this post

    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
Back to Top
UI for WinForms is Visual Studio 2017 Ready