How can I use an image instead of a shape for a node in graph view in Soley Studio?

Question

I am setting up my graph view template in Soley Studio. In some pre-installed solutions I saw that nodes in graph view have been visualized with an icon or graphic instead of a circle, rectangle, etc.

I want to define my properties for a node class in such way, that it shows a gear icon or something similar. Which <property> do I have to use?

I copied one from another solution, but it does not change anything:

<Style DataSource=".ProdFunction" VisualTarget=”Node”>
<!-- View Properties --> 
<Properties>
<Property Name="StyleName" Value="ShapeOrImageNodeStyle" />
<Property Name="Image">
<Value IsReference="true">icon</Value>
</Property> 
<Property Name="ColorizeImage" Value = "false" />
<Property Name="Width" Value="60" />
<Property Name="Height" Value="60" /> 
</Properties>
</Style>

I wanted to use <Property Name="Image"> <Value IsReference="true">icon</Value></Property> . But nothing changes. How do I refer to the “icon” I want to have? Adding it to the Images folder did not help.

Answer 1

With <Property Name="Image"> <Value IsReference="true">icon</Value></Property> you are referring to an attribute icon of your node class ProdFunction. The value of this attribute would have to be the path to the image you want to use. e.g. images\gearicon.png (a path from your project on is sufficient)

This way is very useful if you want to have different images/icons visualized for each instance of one class. In your case I would recommend you to simply define one image file for the whole node class. Then you also do not need to define an additional attribute for you ProdFunction class.

Your graph view template style may look like this in the end:

<?xml version="1.0" encoding="utf-8" ?>
<View Provider="Soley.Framework.AddIns.GraphDataViewProvider.GraphDataDisplayBinding">
      <References>
        <Reference Source="DataPresentation::ViewTemplates/Graph.slvt"/>
      </References>

    <Styles>
      <Style DataSource=".ProdFunction" VisualTarget=”Node”>

       <Properties>
         <Property Name="StyleName" Value="ShapeOrImageNodeStyle" />

         <Property Name="Image">
           <Value>images\gearicon.png</Value>
         </Property> 

         <Property Name="ColorizeImage" Value = "false" />

         <Property Name="Width" Value="60" />
         <Property Name="Height" Value="60" /> 
      </Properties>  

    </Style>
   </Styles>
</View>

Here is also a list with available view properties in Soley Studio: Help Center - View Templates