This topic describes how the RadImageButton can be used with custom images.
The ButtonType property can be used to choose from the default images that we have provided for image buttons. Currently we have search, clear and custom.
By default this property is set to Search, which provides the magnifier image in RadImageButton. If you need an 'X', you can change this property to Clear. And if you want to manually provide an image
the ButtonType should be Custom.
Custom button with different images for the different states
When the ButtonType is set to Custom, you can provide different images for the different states (Rest, Pressed, Disabled).
When using this approach, when the button is pressed, the image that is currently visible (the one provided as RestStateImageSource)
will be replaced with another (the one provide as PressedStateImageSource)
Three images are necessary for the different states. Here is an example:
Please note that when you want to provide different images for the different states
property should be set to Image.
Custom button with a single image
You don't always need to provide three completely different images for all states. For the ButtonType Search, for example,
we have provided only one magnifier image and you still can feel the change in the look of the button when it is pressed.
This behavior can be achieved when the image that is provided has a transparent background.
This way the background can be changed in each of the states similar to the behavior of the native Button and depending on the theme of the OS.
This image should be set to the
RestStateImageSource property. Here is an example:
And here is how it looks when pressed (on the right) and when not (on the left):
Please note that when you want to provide a single images for the different states, it should have a transparent background, meaning that the shape of the button can't be defined by the image and should be defined manually through
property with one of these options: Rectangle (default) or Ellipse.