Adrian Vinca's blog : Tutorials

How to use a custom ValueConverter in Microsoft Expression Interactive Designer

adrianvinca — Fri, 10 Mar 2006 04:10:00 GMT

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
.

Creating a simple style with one trigger

adrianvinca — Thu, 16 Feb 2006 05:11:00 GMT

This article describes how to create a simple style with one trigger in Microsoft Expression Interactive Designer. We will create a blue rectangle which becomes red when the mouse is over it.

Step 1 - Create a rectangle

Draw a rectangle using the "Rectangle" tool from the Tools palette
Click on the "Selection" tool on the tools palette

Step 2 - Clear the Fill property

EID by default sets a Fill to your rectangle which would override our Style settings, so we need to delete that property (if you switch to the xaml view, you will notice that there is a Fill attribute specified for the rectangle):
In the Properties palette, Click on the Fill property and Select "Clear/Default" -
this should clear the property

Step 3 - Create a Style for the rectangle

In the timeline, right click on your rectangle->Edit Style->Create Empty Style (usually you should be able to do this in the scene, but now, because the Fill property is not set, the rectangle may not selectable in the scene - known issue)

Click "Ok" in the "Create Style Resource" dialog

Step 4 - Set a default Fill for the rectangle inside the Style

Bring up the "Timeline" palette - note that we are currently editing the style (the node displayed should be "Style"). In order to get the mouse events at runtime, our rectangle will need a Fill; so we will set a Fill in the Style.

In the Appearance palette, set the Fill to "blue" (because we are in the Style editing mode, this will create a Setter inside the style)

Step 5 - Add a Trigger for the IsMouseOver

Click on the "Create New State" button; a new tab called "[No Triggers]" is displayed in the timeline; Click on it
Bring up the "Timeline Properties" palette (using the "View" menu)
Create a new trigger: Click on the "Add" button in the "Timeline Properties" to add a new trigger; in the first textbox type "IsMouseOver" and "true" in the second one; now the tab is called "IsMouseOver"
Ensure that the "IsMouseOver" tab is selected and change the "Fill" color in the "Appearance" palette to your desired color (e.g. "red")
Click the "Return Scope To Root" button (in the Timeline palette) to end the style editing mode

The final xaml

The final xaml looks like:

	<Grid.Resources>
		<Storyboard x:Key="OnLoaded"/>
		<Style x:Key="RectangleStyle1" TargetType="{x:Type Rectangle}">
			<Setter Property="Fill" Value="sc#1, 0, 0, 1"/>
			<Style.Triggers>
				<MultiTrigger>
					<MultiTrigger.Conditions>
						<Condition Property="IsMouseOver" Value="True"/>
					</MultiTrigger.Conditions>
					<Setter Property="Fill" Value="sc#1, 1, 0, 0"/>
				</MultiTrigger>
			</Style.Triggers>
		</Style>
	</Grid.Resources>

<Rectangle Stroke="#FF000000" Style="{DynamicResource RectangleStyle1}"
	Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
	MinWidth="0" MinHeight="0" Margin="128,99,183,202" x:Name="Rectangle"
	RenderTransformOrigin="0.5,0.5"/>

Creating a simple master details list

adrianvinca — Wed, 15 Feb 2006 13:37:00 GMT

This article describes how to create a master details list using Microsoft Expression Interactive Designer (and guess what: no code needed!). We are going to use databinding to achieve this.

The data-source

We will use a simple xml, containing the list of products from the Expression family, and a short description for each of them. Download the attached "products.xml" and save it on your local machine.

Start Microsoft Expression Interactive Designer. We will use the empty project created by default

Add products.xml as an XML Data source. For that, in the "Data" palette, click on the "Add XML Data Source" and Browse to the "products.xml". Press Ok. Now the Data Palette will show the new data source (its default name is "ProductsDS").

The master list

Expand the "ProductsDS" data source and "Product[n]" node on the scene. Choose ListBox from the context menu. Press "Ok" at the first dialog; in the second one, uncheck "Description" (we want to show only the name in the list) and press Ok. At this point, you should have a list displaying the names of the products.

The details

We want to display the description of the selected item in a separate TextBox.

Create a TextBlock control from the Library Palette

In the "Properties" palette, click on the "Data Context" property and select "Databind". Click on the "Element Property" button, select the "ListBox" as the scene element (left side) and "Selected Item" as the property (right side). Press "Finish". This way we set the Data Context to the Selected Item of the Listbox.

In the "Properties" palette, click on the "Text" property and select "Databind". Click on the "Explicit Data Context" button and expand the tree and select "Description". Press Finish. This way we specify what exactly we want to display as the Text.

Run the project

The only thing left: run the project (In the main menu, Project click on "Run Project"). The application will be compiled and executed. The Description textbox shows the Description of the selected item.

Why is the textbox empty in Expression Interactive Designer ?

That's because, by default, there is no item selected in the list. To do that, select the listbox and set the SelectedIndex property to 0 (by default it is -1).