1. Home
  2. Forum
  3. WPF
  4. SfDiagram - Change Decarator Style to show Entity One-To-Many Indication Like Entity Framework EDMX Diagram

SfDiagram - Change Decarator Style to show Entity One-To-Many Indication Like Entity Framework EDMX Diagram

Hi Syncfusion Team,

Our team is using SfDiagram (Organizational Layout) to show the relationship between created Entities in our application.

I have created a sample application which uses the SfDiagram to show the relationship between the Entities using a sample Entity.xml as the source file.

The SfDiagram is showing everything properly, we would like to change the decorator style at the connecting end based on the relationship between the Entities.

For example, if the Child Entity is related to Parent Entity as One-To-Many --> It should change the Decorator style at the target node with One-To-Many indication by using (*) symbol beside the arrow. I've attached the images for more clarity.

Please help us achieve this functionality. 

Check out the attachment section, the attached zip file contains the following files :- 
1. Sample Application (SfDiagramApplication.zip)
2. Screenshots :-
  •      Original Entity Diagram
  •      Expected Entity Diagram

Thanks & Regards,
Vipul Sanmane
SSE, Odessa Technologies


Attachment: Sample_Application_With_Images_6eb5165a.zip

14 Replies
JS Jayanthi Sivabalan Syncfusion Team December 13, 2017 07:36 AM UTC

Hi Vipul, 
 
Thank you for providing clear information to represent your requirement. 
Please find the response for the requested requirement. 
 
Sl.No. 
Requirement 
Response 
1 
The SfDiagram is showing everything properly, we would like to change the decorator style at the connecting end based on the relationship between the Entities. 
 
To make decorator hollow or opaque, set fill with white or black color.. 
 
Please refer the highlighted code example as below. 
 
Code example: 
<!--Style for TargetDecorator--> 
<Style TargetType="Path" x:Key="TargetDecoratorStyle1"> 
   <Setter Property="Stroke" Value="Black"></Setter> 
   <Setter Property="Fill" Value="White"/> 
</Style> 
 
<Style TargetType="diagram:Connector" BasedOn="{StaticResource ConnectorBindingStyle}"> 
   <Setter Property="ConnectorGeometryStyle"> 
       <Setter.Value> 
           <Style TargetType="Path"> 
              <Setter Property="Stroke" Value="Black" /> 
              <Setter Property="StrokeThickness" Value="1" /> 
           </Style> 
       </Setter.Value> 
   </Setter> 
   <Setter Property="SourceDecoratorStyle" Value="{StaticResource SourceDecoratorStyle}" /> 
   <Setter Property="TargetDecoratorStyle" Value="{StaticResource TargetDecoratorStyle1}" /> 
</Style> 
 
Please refer the screenshot to represent the above scenario. 
 
Screenshot: 
 
 
 
For more information, please refer the online documentation link as below. 
 
2 
For example, if the Child Entity is related to Parent Entity as One-To-Many --> It should change the Decorator style at the target. 
 
We can customize the decorator style with different shapes. We have provided code example to represent this. 
 
Please refer the highlighted code example as below. 
 
Code example: 
<Style TargetType="diagram:Connector" BasedOn="{StaticResource ConnectorBindingStyle}"> 
   <Setter Property="ConnectorGeometryStyle"> 
       <Setter.Value> 
           <Style TargetType="Path"> 
              <Setter Property="Stroke" Value="Black" /> 
              <Setter Property="StrokeThickness" Value="1" /> 
           </Style> 
       </Setter.Value> 
   </Setter> 
   <Setter Property="SourceDecoratorStyle" Value="{StaticResource SourceDecoratorStyle}" /> 
   <Setter Property="TargetDecorator" Value="M8,0L16,7.999985 8,16.000001 0,7.999985z"></Setter> 
   <Setter Property="TargetDecoratorStyle" Value="{StaticResource TargetDecoratorStyle1}" /> 
</Style> 
 
Please refer the screenshot to represent the above scenario. 
 
Screenshot: 
 
 
For more information about this, please refer the online documentation link as below. 
 
 
3 
For example, if the Child Entity is related to Parent Entity as One-To-Many --> It should change the Decorator style at the target node with One-To-Many indication by using (*) symbol beside the arrow. 
 
We have annotation support to achieve the requested requirement. We have provided code example and modified sample to represent this. 
 
Please refer the code example as below. 
 
Code example: 
if (targetEntity.ParentRelation == "Reference") 
{ 
   connector.Annotations = new ObservableCollection<IAnnotation>() 
   { 
       new AnnotationEditorViewModel() 
       { 
           Content = "*", 
           Offset = new Point(0.85, 1), 
           Margin = new Thickness(10, 0, 0, 0), 
       } 
   }; 
   child.Style = this.Resources["DashedConnectorStyle"] as Style; 
} 
 
Please refer the screenshot to represent the above scenario. 
 
Screenshot: 
 
 
 
For more information about this, please refer the online documentation link as below. 
 
 
Note: If you need to customize the Content style, use DataTemplate to achieve this. 
 
 
 
Note: We have provided modified sample to represent the requirement.  
 
Please refer the modified sample link as below: 
 
 
Please let us know, if any further assistance on this. 
 
Regards, 
Jayanthi S. 



VS Vipul Sanmane December 13, 2017 01:33 PM UTC

Hi Jayanti,

Thanks for the fast reply, I found your solution very helpful.

I'm able to change the connector style, decorator style and give annotations.
But I'm getting a weird behavior for annotation on the UI when used in the real application. In the place the Annotations its showing its "Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel" Text in Place of given Content in Annotations. Please refer the image (EntityDiagramUsedInApplication.png).

Also, the Nodes is not collapsing. I want the Nodes to be collapsed only when I click the arrow beside Entity Name. Refer image(Entity DiagramExpandCollapseRequirement.png).


Please refer to the same previous sample which was provided in my previous post.


Thanks & Regards,
Vipul Sanmane
SSE, Odessa Technologies

Attachment: Entity_Diagram_3321bbd1.zip

JS Jayanthi Sivabalan Syncfusion Team December 14, 2017 12:34 PM UTC

Hi Vipul, 
 
Thanks for the update. 
 
Please find the response for the requirement. 
 
Sl.No. 
Requirement 
Response 
1 
In the place the Annotations its showing its"Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel" Text in Place of given Content in Annotations. 
We need to initialize the AnnotationBindingStyle to represent this. We forgot to mentioned it on previous update. Sorry for that. Please refer the given code example in RelationshipDiagram.xaml file. 
 
Please refer the code example as below. 
 
Code example: 
<Style TargetType="syncfusion:AnnotationEditor" BasedOn="{StaticResource AnnotationEditorBindingStyle}"></Style> 
 
2 
Nodes is not collapsing. I want the Nodes to be collapsed only when I click the arrow beside Entity Name 
We have confirmed that the reported requirement as a defect. We have created incident for this. Please follow-up with that for further updates regarding this.  
 
Regards, 
Jayanthi S. 



VS Vipul Sanmane replied to Jayanthi Sivabalan December 15, 2017 10:25 AM UTC

Hi Vipul, 
 
Thanks for the update. 
 
Please find the response for the requirement. 
 
Sl.No. 
Requirement 
Response 
1 
In the place the Annotations its showing its"Syncfusion.UI.Xaml.Diagram.AnnotationEditorViewModel" Text in Place of given Content in Annotations. 
We need to initialize the AnnotationBindingStyle to represent this. We forgot to mentioned it on previous update. Sorry for that. Please refer the given code example in RelationshipDiagram.xaml file. 
 
Please refer the code example as below. 
 
Code example: 
<Style TargetType="syncfusion:AnnotationEditor" BasedOn="{StaticResource AnnotationEditorBindingStyle}"></Style> 
 
2 
Nodes is not collapsing. I want the Nodes to be collapsed only when I click the arrow beside Entity Name 
We have confirmed that the reported requirement as a defect. We have created incident for this. Please follow-up with that for further updates regarding this.  
 
Regards, 
Jayanthi S. 



Hi Jayanthi,

I applied the styles provided, still the problem exists. I think there is some other styles which needs to be applied.
Also, I'm not able to apply custom view template to the annotations and not able to increase the size of annotations.

Please help us fix this issue.


Thanks & Regards,
Vipul Sanmane

VS Vipul Sanmane December 18, 2017 06:01 AM UTC

Hi Jayanthi,

The annotations are working fine now. 
I had to Replace this <Style TargetType="syncfusion:AnnotationEditor" BasedOn="{StaticResourceAnnotationEditorBindingStyle}"></Style> 
     
with this   <Style TargetType="diagram:AnnotationEditor" BasedOn="{StaticResourceAnnotationEditorBindingStyle}"></Style> 


Thanks & Regards,
Vipul Sanmane

JS Jayanthi Sivabalan Syncfusion Team December 18, 2017 12:08 PM UTC

Hi Vipul, 
 
Please find the response for the reported issue. 
 
Sl.No. 
Reported issue 
Response 
1 
I applied the styles provided, still the problem exists. I think there is some other styles which needs to be applied. 
Thanks for the update. 
 
2 
I'm not able to apply custom view template to the annotations and not able to increase the size of annotations. 
We have provided sample and code example to represent the customization of the Annotation ViewTemplate. Now we have applied the DataTemplates for Annotations in RelationshipDiagram.xaml and RelationshipDiagram.xaml.cs of the provided sample. 
 
Please refer the code example and sample link as below: 
 
Code example: 
  <!--View DataTemplate--> 
  <DataTemplate x:Key="DataTemplate"> 
      <TextBlock Foreground="Black" Background="Transparent" Text="{Binding Content}" FontSize="20"></TextBlock> 
      </DataTemplate> 
 
  <DataTemplate x:Key="DataTemplate1"> 
      <TextBlock Foreground="Black" Background="Transparent" Text="{Binding Content}" FontSize="15"></TextBlock> 
      </DataTemplate> 
 
if (targetEntity.ParentRelation == "Reference") 
{ 
    connector.Annotations = new ObservableCollection<IAnnotation>() 
    { 
        new AnnotationEditorViewModel() 
        { 
            Content = "*", 
            Offset = new Point(0.85, 1), 
            Margin = new Thickness(10, 0, 0, 0), 
            ViewTemplate = this.Resources["DataTemplate"] as DataTemplate 
        } 
   }; 
   child.Style = this.Resources["DashedConnectorStyle"] as Style; 
} 
else 
{ 
   connector.Annotations = new ObservableCollection<IAnnotation>() 
   { 
       new AnnotationEditorViewModel() 
       { 
           Content = "1", 
           Offset = new Point(0.85, 1), 
           RotateAngle = 270, 
           Margin = new Thickness(10, 0, 0, 0), 
           ViewTemplate = this.Resources["DataTemplate1"] as DataTemplate 
       } 
   }; 
} 
 
 
 
Please let us know, if you have any further assistance on this. 
 
Regards, 
Jayanthi S. 


VS Vipul Sanmane January 3, 2018 09:56 AM UTC

Hi Jayanthi,

Thank you. It worked.

We have another requirement for updating the diagram dynamically. 
For example, we have the SfDiagram populated with Entities, now if I add a new Entity, that should be reflected in the diagram. 
We tried to refresh/update the Contents of the Diagram by calling the UpdateCollection() method in the RelationshipDiagram.xaml.cs file.

Please refer to the sample sent by me to incorporate the changes.

Thanks & Regards,
Vipul Sanmane


SS Suresh Shanmugam Syncfusion Team January 4, 2018 09:46 AM UTC

Hi Vipul, 
 
Requirement : “Update the Layout with new entity” 
 
Size of a node is required to update the layout properly. When new nodes are added into diagram, its size will be known only after they are visually loaded. So, layout cannot be refreshed, immediately after adding nodes and connector. 
 
To overcome this issue, please force update the page visually and then call UpdateLayout as shown in code example. 
 
Code Example, 


sfdiagram.Page.UpdateLayout(); 
(sfdiagram.LayoutManager.Layout as DirectedTreeLayout).UpdateLayout(); 

 


We have modified the sample based on this requirement. Please find the sample location as below, 
 
 
Sample details :  
 
In this sample, We provide the Button on Right side of the application to add the new Entity with UpdateLayout method usage. 
 
Regards, 
Suresh Shanmugam 


VS Vipul Sanmane January 4, 2018 10:58 AM UTC

Hi Suresh,

Thank you so much for the quick response. It worked out well for us.  We have implemented the solution provided in our application.


We have found another issue in the SfDiagram Export functionality. If there are too many entities (i.e. Nodes), then the Exported Image is blurry. 
Please provide a solution to overcome this.

Refer to the sample provided.


Thanks & Regards,
Vipul Sanmane


Attachment: SfDiagramApplication_f6dca279.zip

SS Suresh Shanmugam Syncfusion Team January 8, 2018 12:27 PM UTC

Hi Vipul, 
 
Reported issue : “Image is blurry after export the SfDiagram page” 
 
We are validated the reported issue. We have used the RenderTargetBitmap to export the diagram page. RenderTargetBitmap allows to export as quality image for the particular Diagram Content size. If we try to export large Content area, it should be blurred. Because RenderTargetBimap has some limitations. 
 
Regards,
Suresh Shanmugam 


VS Vipul Sanmane January 10, 2018 11:32 AM UTC

Hi Suresh,

Reported issue : “Image is blurry after export the SfDiagram page”.

Comment - Actually most of the Diagrams in our application will be huge, and we would be exporting the diagram to get clear idea of the context.
Hence, we request you to take the issue as a requirement, may be provide some way for exporting a clear image of the drawn diagram. 
Also, we need the PDF version of the same.

Please take this requirement as a high priority, since we are readying our application for company-wide use in the coming weeks.

Utilize the previous sample provided.

Thanks & Regards,
Vipul Sanmane

SS Suresh Shanmugam Syncfusion Team January 12, 2018 12:09 PM UTC

Hi Vipul, 
 
Image is blurry after export the SfDiagram page 
Currently diagram uses RenderTargetBitmap + VisualBrush to export diagram, we found that visual brush degrades the quality when diagram size grows larger. We are planning to avoid VisualBrush for exporting diagram for our 2018 Vol1 SP1 release.  
 
As a workaround, we have prepared a sample that shifts all the diagram elements to positive co-ordinates and print with higher quality. Please refer to sample link. 
 
Pdf Export  
We can export diagram to xps and it can be converted to pdf using our pdf library. Please refer to sample link. 
 
 
 
Note : While export the diagram page, image will be save in bin folder. 
 
Sample modification details: 
We can use Margin property to move the diagram elements to positive side with higher quality. We have provide the button as “PDF export” to export the Diagram as PDF format. Please find the code example as below, 
 
Code Example, 
 
 
sfdiagram.LayoutManager = new Syncfusion.UI.Xaml.Diagram.Layout.LayoutManager() 
{ 
       Layout = new DirectedTreeLayout() 
       { 
              Type = Syncfusion.UI.Xaml.Diagram.Layout.LayoutType.Hierarchical, 
              HorizontalSpacing = 50, 
              VerticalSpacing = 75, 
              SpaceBetweenSubTrees = 100, 
              Margin = new Thickness(2370, 0, 0, 0) 
       } 
}; 
 
 
Regards, 
Suresh Shanmugam 
 


VS Vipul Sanmane January 16, 2018 10:06 AM UTC

Hi Suresh,

Thank you for considering the Export Image feature. The PDF Export worked out fine.

But, the Image File Export seems to have a problem. For example, if the Diagram is shifted to the center view, then the left part of the diagram is getting cut-off. 
If I keep the diagram to the left-most view, the Image Export works out fine with the entire diagram in the exported image.

Anyways, we will wait for the 2018 Vol1 SP1 release for the Image Export.

Thanks again for the Pdf Export functionality. :-) 

Regards,
Vipul Sanmane

SS Suresh Shanmugam Syncfusion Team January 17, 2018 02:42 PM UTC

Hi Vipul, 
 
Thanks for the update. 
 
Reported issue : “Image is blurry after export the SfDiagram page”. 
 
As promised, we will fix the reported issue and include in the 2018 Vol1 SP1 release. 
 
Regards, 
Suresh Shanmugam 


Loader.
Up arrow icon