How to use Converters in Windows phone app (Silverlight/WinRT)

ValueConverters can be used whenever we need to present data in an easy and controllable way such that it doesn’t interfere with other layers of the application.

Converters are called by the Data Binding mechanism whenever binding actually occurs (for example, when a control is notified about the change in the underlying property).


ValueConverters need to implement IValueConverter, a simple two-method interface. The two methods are

1) Convert – Modifies the source data before passing it to the target for display in the UI.

2) ConvertBack – Modifies the target data before passing it to the source object. This method is called only in TwoWay bindings.

For more reference you can see this link.

In this following blog post I shall be demonstrating you how to create an indexvalue
converter for your Windows phone app. The different steps you need to follow are


Step 1:

First create a class having the name IndexToColorConverter in your Project.



And add the following code to it as shown below.




Note: The only difference between Silverlight and WinRT is that the data type of parameter culture has been changed to string in WinRT.


Step 2:

Open the XAML page where you need to use this converter and add the following code in the namespace of the XAML page.

Note: Here Tips8 is the name of the Project. You need to replace it with your own project name.


Step 3:

Add the following code into PhoneApplicationPage page resources section in the XAML. It will create a Static resource within the XAML page with a specific key which will be used by the UI elements further.


  Note: The name of the key can be same as the Class name of color converter or something else. In order to avoid confusion we have kept both names as same.   Step 4: Now in the UI element just bind the property you wish to do so. For example in our project we have binded the Background Property and have assigned the IndexToColorConverter to it. The code for the following is

Note: Here index is the object property to which button is binded.


If you have any doubts regarding data binding you can refer to the following blog post.

Chetan Gulati

Currently am doing B TECH in IT from Delhi Technological University. App development is my passion. Believe in quality rather than quantity.

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding