Telerik blogs

Today we are going to present one of the new additions to our Windows Phone Controls Suite: RadImageButton. This control inherits from the native Button, so it has all of its properties and events that you are familiar with. What RadImageButton actually does is to allow you to place an image or a set of images that change when the button gets tapped or disabled.
 Default RadImageButton

The RadImageButton can easily become a ToggleButton by setting its ButtonBehavior property to ToggleButton. Another cool feature is provided by the ButtonShape property. Changing its value to Ellipse will make the button similar to the buttons that are used in the ApplicationBar.

Ellipse ButtonShape

Now let’s see how you can get rid of the magnifier that is the default image in RadImageButton.

One thing you can do is change the ButtonType to “Clear”, instead of “Search”. The Clear Button has an image of an “X”. Of course, probably you’d like to have custom images in your RadImageButton. Here comes the best part: You can decide whether you want to provide a set of images for each of the button's visual states or just a single image that will automatically change when the state changes.

Let’s see the single image option first. In order to make it work, the image should have a transparent background. This image should be set to the RestStateImageSource property and the ButtonShape should be Rectangle or Ellipse, depending on what shape you want for the RadImageButton. The colors in the image will not be taken into consideration, so if you want the shape to be different than the default values, you can change the Foreground and Background properties of the RadImageButton:

<telerikPrimitives:RadImageButton
   BorderThickness="3"
   BorderBrush="Blue"
   Foreground="Blue"
   Background="Yellow"
   RestStateImageSource="Images/Pin.png"
   ButtonShape="Ellipse" />

Here the "Pin.png" image is black with transparent background, but the button that you get is this:

RadImageButton with custom image

The other option you have is to provide different images for the RestState, PressedState and DisabledState of the RadImageButton. You can have whatever pictures you want, just set them to the RestStateImageSource, PressedStateImageSource and DisabledStateImageSource respectively. Here the shape of the button will be the same as the shape of the provided images, so the ButtonShape property should be set to Image, which will tell the RadImageButton to use the images as they are and will take into consideration their colors, unlike the other Rectangle and Ellipse options:

<telerikPrimitives:RadImageButton
                RestStateImageSource="Images/Green.png"
                PressedStateImageSource="Images/Yellow.png"
                DisabledStateImageSource="Images/Red.png"
                ButtonShape="Image" />

 

Well, basically that’s it. If you still haven’t downloaded RadControls for Windows Phone Q2 2012, now it’s a good time to do so. If you have some feedback or questions, you can make us happy by sharing them in our forums. See you there!


TodorPhoto
About the Author

Todor Petrov

Todor Petrov has been with Telerik since 2011, working on the Android and Windows Phone UI suites. He is passionate about technologies, movies and music.

 



Comments

Comments are disabled in preview mode.