Button hover image and 'click' image

[Eli]

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]

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]

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]

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]

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]

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]

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]

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.