Telerik UI for Windows Phone by Progress

This topic describes how the RadImageButton can be used with custom images.

Default 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:

<telerikPrimitives:RadImageButton RestStateImageSource="Images/white.jpg"
                                  ButtonShape="Image" />

Please note that when you want to provide different images for the different states the ButtonShape 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:

<telerikPrimitives:RadImageButton RestStateImageSource="Images/Pin.png" 

And here is how it looks when pressed (on the right) and when not (on the left):

Image Button-Pin

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 the ButtonShape property with one of these options: Rectangle (default) or Ellipse.