Image Button Using Attached Property In Silverlight

In this post I will show you how to create Image Button using Attached property in silver light application. You can see the output of the example code in the Image 1 and what I want to achieve by using the attached property. Here you can see that i have image and text in a button control of the silver light.

Image 1

Code for the attached property is listed in List 1. Here you can see that I have static class with the name ImageButton. The in the class I have IconProperty. I have pass the property name "Icon" which is of type ImageSource and the owner is the ImageButton class. Then I have the GetIcon and SetIcon property of type ImageSource.

List 1

XAML code is listed in the List 2. Here you can see that I have added the reference of the attached properties which is located in the attached property folder. Next is I have set the Icon property (which is the attached property) of the buttons which are located in the Icon folder and also set the style of the buttons (in this case I have created new style so that I can place icon along the button text). Both buttons are located in the stack panel.

List 2

Next is the ImageButton style which I have created by replace the ContentPresenter of the original button style. In the Image 2 you can see that I have replace the ContentPresenter with the grid layout and  here you can see that I have place image control and also textblock control inside the grid control. I have two columns in the grid.

Image 2

The output of the example can be see in the Image 1. You can download the source code from here. 

All and any comments / bugs / suggestions are welcomed!