Adrian Vinca's blog

How to use a custom ValueConverter in Microsoft Expression Interactive Designer

One of the new databinding features in the March CTP of Microsoft Expression Interactive Designer is the ability to handle value converters. This article will explain how to databind 2 TextBox controls using a custom value converter which reverts the text.

Step 1 - Create a custom value converter

We will create a very simple value converter which reverts a string. We will define the custom converter class in the code behind file for Scene1.
So, copy paste the following code into the codebehind file (scene1.xaml.cs), after the closing tag for the Scene1 class.

	[ValueConversion(typeof(string), typeof(string))]
	public class ReverseStringConverter: IValueConverter
	{
		public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
		{
			string source = value as string;
			return ReverseStringConverter.RevertString(source);
		}
 
		public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
		{
			string source = value as string;
			return ReverseStringConverter.RevertString(source);
		}
	
		private static string RevertString(string source)
		{
			int sourceLength = source.Length;
			char[] destination = new char[source.Length];
			
			for (int iterator = 0; iterator < sourceLength; iterator++)
			{
				destination[iterator] = source[sourceLength - iterator - 1];
			}
			
			return new string(destination);
		}
	}

The class ReverseStringConverter implements the IValueConverter converter interface (click the link for more information). In our example, both methods, Convert and ConvertBack call the same private method RevertString which reverts the specified string.

Step 2 - Build project

Currently Microsoft Expression Interactive Designer requires the project to be built in order to use classed defined in the project. For that, in the main menu click on Project -> Build Project

Step 3 - Create 2 TextBox controls in the scene

Switch to the Scene1.
Bring up the Properties palette and create 2 TextBox controls in the scene.

Step 4 - Create the databinding using the custom value converter

We are going to databind the Text property of TextBox to the Text property of TextBox1, using the custom value converter defined previously (ReverseStringConverter). Select the first TextBox (named TextBox) using the Selection tool.
In the Properties palette, click on the Text property and select "Databind" from the menu. The Create Data Binding dialog will be displayed.
Click on the "Element Property". A
Select TextBox1 from the Scene Elements section B
Select Text from the Properties section. C
Click on "More Binding Options" expand button; this will show a few more advanced binding options.
Click on the double arrow button to set the Binding Direction as Two Way D
Click on the "..." button E next to the ValueConverter; the "Add value converter" dialog will be displayed
Expand the node coresponding to your project and select "ReverseStringConverter" from there. Press on the OK Button.
At this point, the Create Data Binding dialog should look like this:

Press the Finish button

Step 5 - Build and run the application

For that, go into the main menu and select Project->Test Project. Microsoft Expression Interactive Designer should build your application and a new window should be displayed
Type in the first textbox. You notice that the text is automatically updated in the second textbox (and it is reverted).
If you type in the second textbox, the first textbox will be updated
.