Button Text Background Color

[Jeff]

Hi Guys,

I need to create a button with the following layout:

_________________

|  |

|  |

|     Image  |

|  |

|________________|

| Text Line 1  |

| Text Line 2  |

|________________|

The layout aspect of it is simple, but I need the background color for the image to be Transparent and the Text to be a specific color such as Grey or Blue.

I tried editting the BackColor attribute of the Text element under the ImageAndTextLayoutPanel for the button, but this does not seem to do anything.

I've also tried adding a RadPanel as a child control for the button, this works for layout purposes, but child controls within the button block mouseevents from reaching the button, and these controls do not move with the button as the button is pressed.

Any ideas for the best way to achieve this functionality?

[Deyan]

Hi Jeffrey,

I have prepared a sample application that should guide you how to achieve the desired appearance of you RadButton control.

Basically, I have created a RadButton on my form and have set its text by using the property grid of the Visual Studio designer on the right. I have also inserted an image and set the ImageAndTextRelation property of the button to ImageAboveText, ImageAlignment to MiddleCenter and TextAlignment to MiddleCenter.

If you want to change the color of the text, you can use the ForeColor property of the button to do so.

I hope this is helpful. Do not hesitate to write back if you need further assistance.

Greetings,
Deyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Ofer]

Hi,

I can't control the background color of a the default RadButton in a RadGridView Command Column.

My grid has two Comand columns, the buttons in one column should have a red background + show an image, and the buttons in the other columns should have a green background + show an image.

This doesn't work:

grdMsgs_CellFormatting(object sender, CellFormattingEventArgs e)

{

...

            if (((GridViewDataColumn)e.CellElement.ColumnInfo).UniqueName == "Delete")

            {

                RadButtonElement commandButton = ((RadButtonElement)((GridCommandCellElement)e.CellElement).Children[0]);

                commandButton.BackColor = Color.Red;  // background color not changed!

                commandButton.Image =  Properties.Resources.Delete;  // the image is added correctly!!

                commandButton.ImageAlignment = ContentAlignment.MiddleCenter;

    }

            else if (((GridViewDataColumn)e.CellElement.ColumnInfo).UniqueName == "Read")

            {

                RadButtonElement commandButton = ((RadButtonElement)((GridCommandCellElement)e.CellElement).Children[0]);

                commandButton.BackColor = Color.Green;    // background color not changed!

                commandButton.Image = Properties.Resources.Read;   // The image is added correctly!

                commandButton.ImageAlignment = ContentAlignment.MiddleCenter;

            }

}

I checked the attached example - it's very nice but how to reproduce it in my scenario?

I guess I should do it programatically, right?

Which properties to change?

Thanks!

Both should change the background color to a spevific yellow color when the mouse hovers over them.

[Deyan]

Hello Ofer,

Thanks for writing. The value of the BackColor property of RadButton is overridden in RadButtonElement which supports gradients for its background color. Please refer to Telerik Presentation Framework section of the documentation for more information about visual elements and their properties.

You should use the FillPrimitive which is part of the RadButtonElement instead. I have altered your code snippet so that it sets the background color of the RadButtonElement by accessing the FillPrimitive (which actually draws the background of the button):

grdMsgs_CellFormatting(object sender, CellFormattingEventArgs e)

{

...

if (((GridViewDataColumn)e.CellElement.ColumnInfo).UniqueName == "Delete")

{

RadButtonElement commandButton = ((RadButtonElement)((GridCommandCellElement)e.CellElement).Children[0]);

(commandButton.Children[0] as FillPrimitive).BackColor = Color.Red;  // background color not changed!                  (commandButton.Children[0] as FillPrimitive).GradientStyle = GradientStyles.Solid;

commandButton.Image =  Properties.Resources.Delete;  // the image is added correctly!!

commandButton.ImageAlignment = ContentAlignment.MiddleCenter;

}

else if (((GridViewDataColumn)e.CellElement.ColumnInfo).UniqueName == "Read")

{

RadButtonElement commandButton = ((RadButtonElement)((GridCommandCellElement)e.CellElement).Children[0]);

(commandButton.Children[0] as FillPrimitive).BackColor = Color.Green;  // background color not changed!                  (commandButton.Children[0] as FillPrimitive).GradientStyle = GradientStyles.Solid;

commandButton.Image = Properties.Resources.Read;   // The image is added correctly!

commandButton.ImageAlignment = ContentAlignment.MiddleCenter;

}

}

Please note that in this way, you will lose the gradient of your Button and its background will appear as a solid fill.

I hope this is helpful. Do not hesitate to write back if you need further assistance.

All the best,
Deyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Ofer]

Hi,

Thanks, it solved the problem.

Can you please change the C# code to show the green and red buttons backgrounds 

as gradients? (in the Office 2007 visual style if possible).

Another question:

How to change the size and alignment of the default buttons in the GridCommandCellElement?

This code doesn't change the buttons' size.

The buttons size change only when we call MessageBox.Show("Text"), and then the alignment is top-left and not middle-center as in my code.

Thank you!

private void grdMsgs_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            if (((GridViewDataColumn)e.CellElement.ColumnInfo).UniqueName == "Delete")
            {
                RadButtonElement commandButton = ((RadButtonElement)((GridCommandCellElement)e.CellElement).Children[0]);
                (commandButton.Children[0] as FillPrimitive).BackColor = Color.Red;
                (commandButton.Children[0] as FillPrimitive).GradientStyle = GradientStyles.Solid;

                commandButton.Image =  Properties.Resources.Delete;
                commandButton.ImageAlignment = ContentAlignment.MiddleCenter;
                commandButton.Size = new Size((int)(e.CellElement.Size.Width * 0.75),
                                              (int)(e.CellElement.Size.Height * 0.75));
                e.CellElement.Alignment = ContentAlignment.MiddleCenter;
                commandButton.Alignment = ContentAlignment.MiddleCenter;
            }
            else if (((GridViewDataColumn)e.CellElement.ColumnInfo).UniqueName == "Read")
            {
                RadButtonElement commandButton = ((RadButtonElement)((GridCommandCellElement)e.CellElement).Children[0]);
                (commandButton.Children[0] as FillPrimitive).BackColor = Color.Green;
                (commandButton.Children[0] as FillPrimitive).GradientStyle = GradientStyles.Solid;

                commandButton.Image = Properties.Resources.Read;
                commandButton.ImageAlignment = ContentAlignment.MiddleCenter;
                commandButton.Size = new Size((int)(e.CellElement.Size.Width * 0.75),
                                              (int)(e.CellElement.Size.Height * 0.75));
                e.CellElement.Alignment = ContentAlignment.MiddleCenter;
                commandButton.Alignment = ContentAlignment.MiddleCenter;
            }
        }

[Deyan]

Hi Ofer,

Thanks for getting back with me.

You can easily change the FillPrimitive to draw gradient by setting the following properties:

RadButtonElement commandButton = ((RadButtonElement)((GridCommandCellElement)e.CellElement).Children[0]);

(commandButton.Children[0] as FillPrimitive).GradientStyle = GradientStyles.Linear;
(commandButton.Children[0] as FillPrimitive).NumberOfColors = 4;
(commandButton.Children[0] as FillPrimitive).BackColor = Color.FromArgb(200,219,238);
(commandButton.Children[0] as FillPrimitive).BackColor2 = Color.FromArgb(201,221,246);
(commandButton.Children[0] as FillPrimitive).BackColor3 = Color.FromArgb(192,212,237);
(commandButton.Children[0] as FillPrimitive).BackColor4 = Color.FromArgb(208,225,247);

(commandButton.Children[0] as FillPrimitive).GradientPercentage = 0.34F;
(commandButton.Children[0] as FillPrimitive).GradientPercentage2 = 0.64F;

Basically, I have set the GradientStyle property of the FillPrimitive to Linear, and also the NumberOfColors property of the FillPrimitive to 4. This means that 4 colors will be used when building a linear gradient which will be drawn as a background of the button. I have also set the four BackColor properties of the FillPrimitive with values which resemble the Office 2007 Blue theme. I have also adjusted the gradient stops by setting the GradientPercentage properties.

I hope this is helpful. Do not hesitate to write back if you need further assistance.

Sincerely yours,
Deyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Harry]

Hello sir,
I need one winform button in which user has the close button like in image and when hover on it image should be changed with little bit expanding effect and on mouse out on its original state.

Please reply.
Thanks and Regards,
Amritpreet S.

[Hristo]

Hello Harry,

Thank you for writing.

The easiest solution would be to add the images as project resources and subscribe your button to the MouseHover and MouseLeave events. Then in the handlers you could use our AnimatedPropertySetting class and apply the animation to your ButtonElement.ImagePrimitive instance. Additional information on the animations in TPF can be found here. Please see my code example below:

public partial class Form1 : Form
{
    private AnimatedPropertySetting animationSetting;

    public Form1()
    {
        InitializeComponent();

        this.Load += Form1_Load;
        this.radButton1.MouseHover += radButton1_MouseHover;
        this.radButton1.MouseLeave += radButton1_MouseLeave;
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        this.radButton1.ButtonElement.ButtonFillElement.GradientStyle = GradientStyles.Solid;
        this.radButton1.ButtonElement.ButtonFillElement.BackColor = Color.White;
        this.radButton1.Text = "";
        this.radButton1.ButtonElement.Image = Properties.Resources.btn;
        this.radButton1.ButtonElement.ImageAlignment = ContentAlignment.MiddleCenter;

        this.animationSetting = new AnimatedPropertySetting();
        this.animationSetting.Property = RadElement.ScaleTransformProperty;
        this.animationSetting.StartValue = new SizeF(1, 1);
        this.animationSetting.EndValue = new SizeF(2, 2);
        this.animationSetting.NumFrames = 28;
        this.animationSetting.Interval = 60;
    }

    private void radButton1_MouseHover(object sender, EventArgs e)
    {
        this.radButton1.ButtonElement.Image = Properties.Resources.btn_hover;

        this.animationSetting.StartValue = new SizeF(1, 1);
        this.animationSetting.EndValue = new SizeF(2, 2);
        this.animationSetting.ApplyValue(this.radButton1.ButtonElement.ImagePrimitive);
    }

    private void radButton1_MouseLeave(object sender, EventArgs e)
    {
        this.radButton1.ButtonElement.Image = Properties.Resources.btn;

        this.animationSetting.StartValue = new SizeF(2, 2);
        this.animationSetting.EndValue = new SizeF(1, 1);
        this.animationSetting.ApplyValue(this.radButton1.ButtonElement.ImagePrimitive);
    }
}

I am also sending you a .gif file showing the result on my end.

I hope this information is useful. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik

 

 

[Harry]

Hi Hristo Merdjanov,

Thank you very much for this example.

I will let you know if i have any concern again.

Thanks,
Harry