Button hover image and 'click' image in UI for WinForms Buttons, RadioButton, CheckBox, etc

Eli

11 posts

Member since:
Feb 2008

Posted 15 Apr 2008 Link to this post

Hi.
I have a Rad button with an image.
I want to set 'hover' image and 'click' image.

What is the best way to do so?

Martin Vasilev

Admin

1061 posts

Posted 15 Apr 2008 Link to this post

Hello Eli,

Thank you for writing.

The best way to achieve this behavior is to create a custom theme for your RadButton. Just use the Visual Style Builder, navigate to RadButtonElement on the left and create two new states: IsMouseOver and IsMouseDown. After that, set different images for each of them.

You can find more information about creating your own themes using Visual Style Builder in our video section.

If you have additional questions, do not hesitate to contact me again.

All the best,
Martin Vasilev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Eli

11 posts

Member since:
Feb 2008

Posted 15 Apr 2008 Link to this post

Thanks.

1. Can I do it via code?
2. Can I override the behavior of the mouse click (the button gets 'clicked', I don't want that)?

Martin Vasilev

Admin

1061 posts

Posted 16 Apr 2008 Link to this post

Hello Eli,

Thank you for contacting me again.

You can remove the default behavior of RadButton, by setting the ThemeName property to a non-existing theme name.

In order to set different images for the MouseDown and MouseHover via code, you could do it by using the MouseDown, MouseUp, MouseEnter and MouseLeave events.

Please review the code-block below:

    
            private void Form1_Load(object sender, EventArgs e)  
        
            {  
        
                this.radButton2.ThemeName = "NoTheme"; //non-existing theme to remove default one  
        
                this.radButton2.BackgroundImage = global::RadButtonTest.Properties.Resources.closeImage;  
        
                this.radButton2.BackgroundImageLayout = ImageLayout.Stretch;  
        
                this.radButton2.Size = new Size(24, 24);  
        
                this.radButton2.ButtonElement.Visibility = ElementVisibility.Collapsed;  
        
            }  
        
            private void radButton2_MouseDown(object sender, MouseEventArgs e)  
        
            {  
        
                this.radButton2.BackgroundImage = global::RadButtonTest.Properties.Resources.closeImage_clicked;  
        
            }  
        
            private void radButton2_MouseUp(object sender, MouseEventArgs e)  
        
            {  
        
                this.radButton2.BackgroundImage = global::RadButtonTest.Properties.Resources.closeImage;  
        
            }  
        
            private void radButton2_MouseEnter(object sender, EventArgs e)  
        
            {  
        
                this.radButton2.BackgroundImage = global::RadButtonTest.Properties.Resources.closeImage_hovered;  
        
            }  
        
            private void radButton2_MouseLeave(object sender, EventArgs e)  
        
            {  
        
                this.radButton2.BackgroundImage = global::RadButtonTest.Properties.Resources.closeImage;  
        
            }

I hope this helps. Please let me know if you need additional assistance.

Sincerely yours,
Martin Vasilev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Eli

11 posts

Member since:
Feb 2008

Posted 24 Apr 2008 Link to this post

Thank you for your replay.
It seems that creating a windows.forms button control will give the same results exactly, if I need to implement everything, so what is the point...?

Setting image for hover and click is a very common task and it think it should be implemented inside your button.

Thanks anyway.

Martin Vasilev

Admin

1061 posts

Posted 25 Apr 2008 Link to this post

Hi Eli,

Thank you for share your opinion with me.

The main difference of our button control and the ordinary one is that RadButton supports theming. You may create a custom theme or collection of themes, store them as XML files and change them depending on your scenario. Nevertheless, your suggestion is reasonable and we will consider implementing such functionality of adding hovered and clicked image to the RadButton control.

I have updated your Telerik points for the suggestion. If you have any other questions, do not hesitate to contact me again.

Best wishes,
Martin Vasilev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Neil

18 posts

Member since:
Oct 2006

Posted 12 Jun 2009 Link to this post

Hi,

I'm also trying to make a hover over button. I'm getting some strange behaviour and I hope you can help.

I've created a theme with three RadButtonElement States

IsMouseOver            Picture 1
IsMouseDown            Picture 2
Initial State                Picture 2

When the theme is place on the RadButton control using the IDE it works first time.   However if I close and reload the form in the IDE i begin to get strange behaviour. When compiled the hover functionality no longer works.   The only way I have found to resolve this is to make the Image on the button control Null again using the IDE control property.   If I then recompile and run the hover button theme works fine.

I hope you can point me in the right direction to resolving this as it is becoming problematic having to keep doing this.

The Theme Files are in the project and configured to Embedded Files with a RadManager Control loading them as resources.

Look forward to hearing your thoughts

Neil

Martin Vasilev

Admin

1061 posts

Posted 17 Jun 2009 Link to this post

Hello Neil,

Thank you for writing. I am afraid that I cannot understand your scenario in detail. When you are using a custom theme you have to add ThemeManager component to your form, add theme xml file to the project, set its Build Action to Embedded Resource, and add the theme into the ThemeManager. You can find detailed description how to use custom themes in our documentation.

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

Sincerely yours,
Martin Vasilev
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.