We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Control Template for 'syncfusion:Node'


I have a unique requirement to render ports from data template dynamically, so I was trying to create a custom controltemplate for node as following..

It is rendering properly. However, throwing an exception "System.ArgumentNullException" when I move mouse over the node. 

It appears that the exception was coming from 'DragProvider' component, but does not give any details. 

Can you please help me understand what to done in order to create a 'controltemplate' for node ?

I have attached my sample project below.

<Style TargetType="{x:Type syncfusion:Node}">
                    <Setter Property="Template">
                            <ControlTemplate TargetType="{x:Type syncfusion:Node}">
                                <Canvas x:Name="Part_Canvas">
                                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
                            CornerRadius="2"   Effect="{TemplateBinding CustomEffect}" Height="{TemplateBinding Height}" IsHitTestVisible="True" Width="{TemplateBinding Width}">
                                            <DropShadowBitmapEffect x:Name="ShadowEffect" Color="Gray" Direction="355" ShadowDepth="3" Softness="0.5" Opacity="0.3"/>
                                        <Grid IsHitTestVisible="True">
                                            <syncfusion:DragProvider x:Name="PART_DragProvider" IsHitTestVisible="True" Opacity="1" />
                                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentSource="Content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Visible" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                            <Border x:Name="PART_ConectorOver" IsHitTestVisible="False" Style="{Binding HitPathStyle}" Visibility="Collapsed"/>
                                            <syncfusion:Gripper IsHitTestVisible="True" Style="{Binding GripperStyle, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type syncfusion:Node}}}" Visibility="{Binding GripperVisibility, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type syncfusion:Node}}}"/>

Attachment: DiagramTest_23f46d05.zip

3 Replies

KR Keerthivasan Ramamoorthy Syncfusion Team January 26, 2017 06:43 AM UTC

Hi Srikanth,  
Requirement:” Need to override the Template of the Node and ConnectionPort”.  
We have created simple sample to achieve your requirement. Please refer the sample link as below.  
Sample link: CustomNode
Sample Details:  
In our sample, we have override the ControlTemplate of the Node(Default Template) and override the ControlTemplate of the ConnectionPort to display Border and Grid elements inside the ConnectionPort with Label. 
For details about Node Customization movement, please refer online documentation link as below. 
Please let us know if you require further assistance on this. 
Keerthivasan R. 

SR Srikanth January 26, 2017 07:35 AM UTC

Thanks a lot Keerthi. 

Appreciate your prompt response.

KR Keerthivasan Ramamoorthy Syncfusion Team January 27, 2017 08:32 AM UTC

Hi Srikanth,  
Thanks for your update. Please let us know, if you need any further assistance.  
Keerthivasan R. 

Live Chat Icon For mobile
Up arrow icon