Button Text Background Color

9 posts, 0 answers
  1. Jeff
    Jeff avatar
    66 posts
    Member since:
    May 2005

    Posted 04 May 2009 Link to this post

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

    Posted 05 May 2009 Link to this post

    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.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Ofer
    Ofer avatar
    14 posts
    Member since:
    Apr 2009

    Posted 25 Jun 2009 Link to this post

    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.


  5. Deyan
    Admin
    Deyan avatar
    2038 posts

    Posted 01 Jul 2009 Link to this post

    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.
  6. Ofer
    Ofer avatar
    14 posts
    Member since:
    Apr 2009

    Posted 06 Jul 2009 Link to this post

    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; 
                } 
            } 
     

  7. Deyan
    Admin
    Deyan avatar
    2038 posts

    Posted 07 Jul 2009 Link to this post

    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.
  8. Harry
    Harry avatar
    6 posts
    Member since:
    Aug 2012

    Posted 23 Jan 2015 Link to this post

    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.
  9. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    710 posts

    Posted 27 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Harry
    Harry avatar
    6 posts
    Member since:
    Aug 2012

    Posted 28 Jan 2015 in reply to Hristo Merdjanov Link to this post

    Hi Hristo Merdjanov,

    Thank you very much for this example.

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

    Thanks,
    Harry
Back to Top
UI for WinForms is Visual Studio 2017 Ready