Nirav's Blog

Tuesday, April 13, 2010

Silverlight Image Button Control

Hi Guys,
If you came across certain requirements where you need to use an ImageButton control, you will notice that there is no out of box image button available in Silverlight. Actually it is very simple to use out of box Button control as Image button control. You just need to modify the control template of Button control to make it an ImageButton control.
          When you assign an ImageBrush as background of a button, you will not be able to see the image as background of the button because there lies certain xaml elements in front of the image. To achive such look you need to tweak the control template of the button a little bit.

I am providing you the style which will help you to achive the desired Image Button look for button control.

If you edit the control template of a button, you will see a Rectangle(BackgroundGradient) and a Border(BackgroundAnimation) as shown below:
Make visibility property of both of these control to 'Collapsed'.

Now, set image as background of the button.




Similarly, you can use the similar idea for ToggleButton also.
In case of ToggleButton you may need to require to switch the background image based on whether ToggleButton's property 'IsChecked' is True or False.

Here is a sample which convers both of these scenarios.

http://cid-cd9cdbf38105503c.skydrive.live.com/self.aspx/Blog%20Posts/ButtonStyleDemo.zip

No comments:

Post a Comment