Placing image and text when creating buttons dynamically

4 posts, 1 answers
  1. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 21 Nov 2008 Link to this post

    Is there some sample code on how to place text and images on a button when you need more control than just setting the
    TextAlignment and/or ImageAlignment.

    In my case I need fine control over image and text margins.
    For example setting

    ImageAlignment = ContentAlignment.MiddleLeft

    places the image too close to the left border of the button.

    Regards
    Erwin


        
  2. Answer
    Martin Vasilev
    Admin
    Martin Vasilev avatar
    1061 posts

    Posted 25 Nov 2008 Link to this post

    Hello Erwin,

    Thank you for the question.

    You could access ImageElement and TextElement through the ButtonElement property. Please, review the code block below as example:
     
    this.radButton5.ButtonElement.ImagePrimitive.Margin = new Padding(5, 0, 0, 0); 
    this.radButton5.ButtonElement.TextElement.Alignment = ContentAlignment.TopCenter; 

    Please, keep in mind that there are a lot of properties and combination that could change the look and feel of your RadButton. To be more specific I need more details on what exactly you want to achieve.

    If you find any difficulties with the settings, do not hesitate to contact me again.
     

    Regards,
    Martin Vasilev
    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. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 02 Dec 2008 Link to this post

    Thanks a lot for the solution, Martin - works perfectly.

    What's a bit irritating though is that you have to specify the margin explicitly, respectively that the default margin seems to be 0 which moves the image at the absolute right border of the button in my case.

    I would have assumed that the default would be similar to margins used by treeview or tab strip within a theme. A margin of 0 with a themed button is rather unlikely as it interferes with the 3d shaping of the button.

    I think it's quite common to have the same image on treeview, tabstrip and buttons in an application.

    Regards
    Erwin

    Working code fragment to create a number of dynamic picture buttons on a form, in case someone else has similar requirements

                this.SuspendLayout();

                int i = 0;
                int topPosition = 30  // top position of your dynamic buttons

                foreach( .....)
                {
                    RadButton btn = new RadButton();
                    ((System.ComponentModel.ISupportInitialize)(btn)).BeginInit();  // important to call BeginInit/EndInit or button will not draw correctly
                    btn.Text = myText
                    btn.TextAlignment = ContentAlignment.MiddleLeft;
                    btn.ImageAlignment = ContentAlignment.MiddleLeft;
                    btn.ButtonElement.ImagePrimitive.Margin = new Padding(5, 0, 0, 0);  // otherwise the image is over the 3d shaping of the button
                    btn.TextImageRelation = TextImageRelation.ImageBeforeText;
                    btn.Tag = myTag
                    btn.Top = topPosition;
                    btn.Left = 10;
                    btn.Width = this.ClientRectangle.Width - 20;  // change to your needs , only an example
                    btn.Height = buttonHeight;
                    btn.TabIndex = i;  // cange to your needs
                    btn.ImageList = _imageList;  // static image list initialized with thumbnail images

                    switch(......)
                    {
                          // set btn.ImageKey to your needs
                    }

                    btn.Click += new EventHandler(btn_Click);  // add your event handler here
                    topPosition += btn.Height;
                    this.Controls.Add(btn);
                    i++;

                    ((System.ComponentModel.ISupportInitialize)(btn)).EndInit();  // important!

                }

               // set form height according to number of buttons

                this.Height = topButtonTop + ((numberOfButtons+1) * buttonHeight) + 10;

                this.ResumeLayout();





  5. Martin Vasilev
    Admin
    Martin Vasilev avatar
    1061 posts

    Posted 05 Dec 2008 Link to this post

    Hi Erwin,

    Thank you for writing.

    We highly appreciate this suggestion and we will consider to make this change. Thank you once again for the valuable feedback and posted code. I have updated your Telerik points.

    Do not hesitate to contact me again if you have any other questions.

    Greetings,
    Martin Vasilev
    the Telerik team

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