Manipulating Data in View Templates with Converters

Sometimes a property should be visualized and presented to the user differently from the way it is stored in the graph. In this case a converter can be used to convert a value from one type to another.

This is a list of the most important converters:

StringFormatConverter

This converter can be used to convert multiple values into one string.
The Expression attribute is used as a template were {0}, {1}, … are replaced with the corresponding Value from the nested Values tag.

<Value Expression="{0}: {1}€" Converter="StringFormatConverter">
 <Values>
  <Value IsReference="true">name</Value>
  <Value IsReference="true">price</Value>
 </Values>
</Value>

If name contains the value “Gearbox” and price the value 5000 this will generate the string value “Gearbox: 5000€”.

Formatter Options

It is also possible to modify the way the values are formatted by specifying options behind the parameter number.
For example the example from above can be modified to use {1:n} instead of {1} to achieve a more currency like formatting. So this:

<Value Expression="{0}: {1:n}€" Converter="StringFormatConverter">
 <Values>
  <Value IsReference="true">nameAttribute</Value>
  <Value IsReference="true">priceAttribute</Value>
 </Values>
</Value>

will result in the value “Gearbox: 5,000.00€” instead of “Gearbox: 5000€”.

There are many more formatting options the are supported. Please look here and here for a list and detailed explaination of all of them.

The StringFormatConverter is often useful to change the LabelText or ToolTip of a graph element. This could look similar to this:

    <Property Name="LabelText" IsReadOnly="true">
      <Value Expression="{0}: {1:n}€" Converter="StringFormatConverter">
        <Values>
          <Value IsReference="true">name</Value>
          <Value IsReference="true">price</Value>
        </Values>
      </Value>
    </Property>

Note that the Property has a IsReadOnly=”true”, this is important since the StringFormatConverter can not back propagate changes the user would make to the label back to the source attributes. Making the LabelText readonly avoids confusion and problems on the user side.

MathConverter

This converter  performs arithmetic calculations over its argument(s)
The converter Expression must contain an arithmetic expression over converter arguments. Operations supported are +, -, * and /
To a single argument of a value converter may be referred as x, a, or {0}
To arguments of a multi value converter may be referred as x,y,z,t (first to fourth argument), or a,b,c,d, or {0}, {1}, {2}, {3}, {4}, …

The converter supports arithmetic expressions of arbitrary complexity, including nested subexpressions.

For example the following convertion calculates a price for a number of products with a discount applied.

<Value Expression="{0}*{1}*(1-{2})" Converter="MathConverter">
 <Values>
  <Value IsReference="true">price</Value>
  <Value IsReference="true">quantity</Value>
  <Value IsReference="true">discount</Value>
 </Values>
</Value>

For the attributes
price=5000.0
quantity=100 and
discount=0.15 so 15% this will generate the value 425000.

ExcelDateConverter

This converter can convert a double value in the excel date format (1 equals 01.01.1900, 2 equals 02.01.1900 and so on) to a DateTime value and back. One hour is represented as 1/24 and in the same way for minutes and seconds.

For example 21.09.2015 is represented as 42268

<Value Converter="ExcelDateConverter">
 <Values>
  <Value IsReference="true">date</Value>
 </Values>
</Value>

StringToDateTimeConverter

This converter can convert a string value to a DateTime value and back.
The Expression can optionally contain a format description for the date in the format described in the article “Custom Date and Time Format Strings”.

For example:

<Value Expression="dd.MM.yyyy" Converter="StringToDateTimeConverter">
 <Values>
  <Value IsReference="true">date</Value>
 </Values>
</Value>

In this configuration the converter will be able to read and write string attributes of a format like 21.09.2015

Or, if the format should include the time as in 21.09.2015 16:48 as well it would look like this:

<Value Expression="dd.MM.yyyy HH:mm" Converter="StringToDateTimeConverter">
 <Values>
  <Value IsReference="true">date</Value>
 </Values>
</Value>

RGBColorConverter

Note that in most cases this Converter is not needed since the default mechanism already supports different formats to specify colors. See Overview over all View Properties for more detail.

This converter can convert three or four int values in the range from 0 to 255 into one color value.
If three values are given they should represent the R G B components of the color in that order, the opacity of the color is set to 255.
If four values are given the order is A R G B.

The following example creates Color from the four attributes defined in the Metamodel colorAttributeAcolorAttributeRcolorAttributeGcolorAttributeB.

<Value Converter="RGBColorConverter">
 <Values>
  <Value IsReference="true">colorAttributeA</Value>
  <Value IsReference="true">colorAttributeR</Value>
  <Value IsReference="true">colorAttributeG</Value>
  <Value IsReference="true">colorAttributeB</Value>
 </Values>
</Value>

MappingConverter

This converter allows you to map property values to view values. For example you want to color a node according to the value of one of its attributes. With this converter you are able to define the colors for specific situations.

The example below shows how the values of the property quality are mapped to a certain color. The mapping format is “[PropertyValue]:[MappedValue];…”. So if the value of quality is “NotScreened”, the FillColor of the node will be “#F2FDCA” and so on.

<Property Name="FillColor">
  <Value Converter="MappingConverter" 
    Expression=
      "NotScreened:#F2FDCA;
      AlrightDetected:#92CF95; 
      ErrorDetected:#FF8893; 
      HasError:#D50013; 
      IsAlright:#B2E209"
    IsReference="true">
   quality
 </Value>
</Property>

Was this article helpful?

Related Articles