Useful tips on using XAML in EventIDE

05 December 2016 19:18:00

EventIDE utterly supports the XAML data binding that allows monitoring and modifying variables and object properties at runtime via the XAML-based GUI. However, the XAML data binding mechanism has some limitations, which can be counter-intuitive in real-life scenarios. Here, we show you several workarounds for common binding problems in EventIDE. The workarounds are available in the latest EventIDE versions (starting from 03-Feb-2016).

Binding to fields of the .NET structs

.NET structural type is special data type that made of multiple custom fields. For example, EventIDE uses clSize struct to store sizes of visual objects. clSize struct contains double fields Width and Height, which you can monitor in XAML:

<StackPanel>
    <TextBox Text="{Binding Path=Size.Width,StringFormat='Width: {0}'}"/>
    <TextBox Text="{Binding Path=Size.Height,StringFormat='Height: {0}'}"/>
 </StackPanel>

However, if you try to enter new value into a textbox, the Size variable will be not updated, because the XAML data-binding does not support the two-way (modifiable) binding to struct fields. If you are interested why, the reason is explained in this discussion.

We equipped EventIDE with a workaround for this problem. You need simply add a special XAML converter when you want to bind to a struct field. You can copy and use the converter declaration from these examples:

<TextBox Text="{Binding Size,
		 Converter='{eventide:FieldConverter}',ConverterParameter='Width'}"/>

or

<Slider Value="{Binding Size, 
		Converter='{eventide:FieldConverter}',ConverterParameter='Height'}"/>

To allows the two-way binding, you need to add 2 comma-separated definitions, Converter and ConverterParameter, inside your binding statement. The Converter parameter must contains a name of the selected struct’s field (‘Width’), whereas the binding itself should be linked to the parent variable (‘Size).

You can use the FieldConverter with all EventIDE built-in structs, such as clPoint, clSize, stColor as well as with your custom structs.

Binding to array elements

Another limitation of the XAML data binding is that it does not allow two-way binding to array elements. You can overcome it with another syntax workaround involving the ArrayConverter:

<TextBox Text="{Binding Frequencies, 
		Converter='{eventide:ArrayConverter}',ConverterParameter='2'}"/>

Note that in this case the converter parameter explicitly defines an index of the bound element in ‘Frequencies’ array.

Updating a variable bound to textbox

Another common problem arises when you bind a variable to textbox and type a new value there. By default, the XAML textbox updates the bound variable after loosing focus. It mean that you have to click somewhere out of TextBox to submit a change. If you wish to update the variable in a more intuitive way by pressing the Enter, add the special attached property to the TextBox element:

<TextBox Text="{Binding ColorMask,Mode=TwoWay}" 
		  eventide:XAMLHelper.UpdateTextOnEnter="true" Width="100"/>

Binding examples with the Color Property

EventIDE uses the built-in type, called stColor, for color properties among all elements. If you need to adjust colors at runtime without code, you can do with data-bound GUI controls on the status screen. The simplest way is to use the TextBox, which changes the color on pressing Enter:

<TextBox Text="{Binding ColorMask,Mode=TwoWay}" 
		 eventide:XAMLHelper.UpdateTextOnEnter="true"/>

Note that in this case you don’t really need binding to single fields of the ColorMask struct variable. The stColor type knows how to get a color from values you type in the textbox. You can define a color in different formats:

‘Human’ color name (check this link for the full list)
HEX-coded color
space-separated RGB byte values (or, 4 ARGB bytes)
space-separated normalized RGB values (or, 4 ARGB values)

Formatting values in data—binding

In some cases you may prefer to format the bound values, for instance, by limiting a number of fractional digits or by adding a label before a bound value. The solutions is simple, just add another syntax part, called StringFormat, into the “{Binding …}” statement:

<StackPanel>
	<TextBlock Value="{Binding Position, 
			Converter='{eventide:FieldConverter}',ConverterParameter='Theta',
			StringFormat='Stimulus polar position (Theta):{0:N2} dva'
			}"/> 
	<TextBlock Value="{Binding Position, 
			Converter='{eventide:FieldConverter}',ConverterParameter='R',
			StringFormat='Stimulus polar position (R):{0:N2} dva'
			}"/> 
</StackPanel>

The above code produces the following formatted output on the status screen:

Also, check this short overview of the StringFormat capacities.

Other references

Using the XAML data-binding, you can create a powerful, flexible and comfortable GUI to control a logic of your experiments. We encourage you to explore on XAML and data-binding using the following references: