The following exercises are done in the visualization .

The visualization is a class like any other (valve, engine, mail component, article management ...). Designs for a visualization can therefore be added and edited in the development environment in the BSOVisualisationStudio class (with the usage type or category "Visualization"). Usually, however, you open the program via the menu and add new designs with the symbol   . The effect is the same.

You can therefore carry out the design exercises either in your exercise class in the development environment or in the visualization. The only difference is that the data context is your exercise class in the first case and the visualization itself in the second case. This means that the addressing of properties is different. The exercise class is addressed relatively and absolutely in the visualization.

Another tip:

First create your application (model) and start the application as a server (in the iPlus demo project it is the 00 user). Then you can use the component explorer to change property values ​​and thus immediately see or test the dynamic GUI changes that you programmed in the exercises.

 

The simplest way to set a dependency property to change the graphical presentation of a graphical element (UIElement) is "direct setting". 

In the following example, a rectangle was first  drawn in which the fill is to be changed. To do this, open the properties window and go to the "Fill" property. Open the color window and choose a color:

Switch to the XAML tab. In the XAML code you can see that the "Fill" property was set directly:

The Fill property is of the Brush type, which is a complex class. Therefore, the value should normally be described in the "property element syntax". However, it is also sufficient to write the color value "# FFE57575" directly, because suitable type converters are used during the XAML parsing process, which automatically convert this string into a brush class.

 

But if you want the color value, or an arbitrary graphical property be dependent on the property value of a ACComponent, there are several techniques.

One of them is the use of converters. Converters are classes that implement the IValueConverter interface. They have the task of converting values ​​from source properties (model, source) into the data type of the property of the WPF element (target).

In our example from above, the type of the "Fill" property is Brush. However, we want the color to change when a state of the bound AComponent instance changes. Specifically, this is the ACState property of the "gip.core.autocomponent.PABase" class. However, the type of this property is "gip.core.autocomponent.ACStateEnum". Because Brush and ACStateEnum are completely different types, we need a program logic that performs a conversion. There are two different solutions here:

1. You create a class that implements IValueConverter and programs the desired logic in the Convert method .
2. You use a suitable derivation of the class "gip.core.layoutengine.ConverterBase". The ConverterBase class has the functionality that you can call any client-side method via ACUrlCommand. This can either be hardcoded in an assembly or a client-side scripting method .

In the following example a script method has been defined that converts "ACStateEnum" to "Brush":

 

The method was defined in the "Environment" class so that it can be used "globally". (Of course, script methods can also be defined directly for a specific class, which is the rule.)

In the next step we want to use the script method. To do this, open the tool window and the property window and arrange them side by side:

 

Navigate in the tool window to an instance from an application tree (project) and expand the "Properties" expander to see the properties.

Drag & drop (1) the corresponding property (model) onto the fill property of the selected rectangle (UI element). In the example, it must be the ACState property for our scripting method to be compatible.

In the next step you select the environment instance because the script method "ACStateBrush" was declared there. Here you expand the Methods section and select the "ACStateBrush" method. Next, pull the method by drag and drop (1)to the Fill property of the selected rectangle (UI) element:

 

Now open the sub-windows for the Fill property so that you can see what the designer has generated. By switching to the XAML tab you will see the corresponding XAML code:

 

The following code was generated:

Fill="{vb:VBBinding 
Converter={vb:ConverterBrushSingle vb:ACUrlCommand=!ACStateBrush, vb:GlobalFunction=True},     
vb:VBContent=\\Mixery\\HopScale1\\Discharging\\ACState}"

ConverteBrushSingle is an implementation of the abstract class "gip.core.layoutengine.ConverterBase" because it has Brush as the return value. (There are a number of derivations for the most common UI dependency properties). Then the method call of ACStateBrush is specified in ACUrlCommand. The "GlobalFunction" property is always set automatically when it comes to methods from the Environment class. Otherwise GlobalFunction is not needed if the XAML code is in a design where the data context is the corresponding class itself (normal case).

So you always have to know what the current data context is and accordingly you have to specify the ACUrlCommand string correctly (relative or absolute)!

The VBContent is the ACUrl address for the ACState property. (If you defined the design on the function class yourself, the address would be relatively only "ACState" because the data context is the function class itself.)

Save your changes and close the designer. Open the Component Explorer and test if the colors change when you change the ACState property.

 

If the color value or other graphic property is dependent of more than one ACComponent-property, you need multi bindings .

Multibindings are automatically generated by the designer as soon as they drag and drop another property (model) onto the graphical property of the selected graphical element. In the following example, drag the SensorState property of the Emergency ACC component to the Fill property of the selected rectangle (PropertyWindow)

 

Now open the sub-windows for the Fill property so that you can see what the designer has generated. By switching to the XAML tab you will see the corresponding XAML code:

 

 

Please keep in mind that you also have to provide another method that has two parameters because the multibinding now returns two values. You can also drag and drop this new method onto it, as explained in the previous section. In the example above, the method is "ACStateBrush2Params".