This is a migrated thread and some comments may be shown as answers.

Button hover image and 'click' image

7 Answers 810 Views
Buttons, RadioButton, CheckBox, etc
This is a migrated thread and some comments may be shown as answers.
Eli
Top achievements
Rank 1
Eli asked on 15 Apr 2008, 08:56 AM
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?

7 Answers, 1 is accepted

Sort by
0
Martin Vasilev
Telerik team
answered on 15 Apr 2008, 05:44 PM
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
0
Eli
Top achievements
Rank 1
answered on 15 Apr 2008, 06:22 PM
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)?
0
Martin Vasilev
Telerik team
answered on 16 Apr 2008, 03:06 PM
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
0
Eli
Top achievements
Rank 1
answered on 24 Apr 2008, 08:42 AM
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.
0
Martin Vasilev
Telerik team
answered on 25 Apr 2008, 12:38 PM
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
0
Neil
Top achievements
Rank 1
answered on 12 Jun 2009, 07:43 AM
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
0
Martin Vasilev
Telerik team
answered on 17 Jun 2009, 08:31 AM
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.
Tags
Buttons, RadioButton, CheckBox, etc
Asked by
Eli
Top achievements
Rank 1
Answers by
Martin Vasilev
Telerik team
Eli
Top achievements
Rank 1
Neil
Top achievements
Rank 1
Share this question
or