Placing image and text when creating buttons dynamically

[erwin]

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


    

[Martin Vasilev]

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.

[erwin]

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();

[Martin Vasilev]

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.