Control Template for 'syncfusion:Node'

[Srikanth]

HI,

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}">

                <Style.Setters>
                    <Setter Property="Template">
                        <Setter.Value>
                            <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}">
                                        <Border.BitmapEffect>
                                            <DropShadowBitmapEffect x:Name="ShadowEffect" Color="Gray" Direction="355" ShadowDepth="3" Softness="0.5" Opacity="0.3"/>
                                        </Border.BitmapEffect>
                                        <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}}}"/>
                                        </Grid>
                                    </Border>
                                </Canvas>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style.Setters>
            </Style>

Attachment: DiagramTest_23f46d05.zip

[Keerthivasan Ramamoorthy]

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. 

 

Note: 

For details about Node Customization movement, please refer online documentation link as below. 

Documentation link: https://help.syncfusion.com/wpf/diagram/nodes#customization-of-node-movement 

 

 

Please let us know if you require further assistance on this. 

 

Regards,  

Keerthivasan R. 

[Srikanth]

Thanks a lot Keerthi. 

Appreciate your prompt response.

[Keerthivasan Ramamoorthy]

Hi Srikanth,  

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

  

Regards,  

Keerthivasan R.