Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
How to customize connection line between orgchart nodes
posted

Hi,

Is it possible to customize connection line between orgchart nodes depend on different logic? For example, I need to connect two nodes with solid line (default line style), but in some scenario I need to connect two nodes with dotted line. 

However, the option LineEffect only have BlurEffect and DropShadowEffect. To do dotted line, do I need to look at other property?

I am using XamOrgChart Version 17.2

By the way, I looked at the other post about the similar issue. Just would like to see if there is any update on that.

https://www.infragistics.com/community/forums/f/ultimate-ui-for-wpf/85986/implementing-custom-line-style-between-particular-node-in-infragistics-xamorgchart

Thank you very much for your help. 

  • 26325
    Offline posted

    Hello, 

    Advanced customization to the OrgChart's connection lines is considered to be a product idea. However I recommend using the XamDiagram control instead because you have more flexibility. 

    The connection in the first node below has a StrokeDashArray property set to make the line appear dotted. Please visit our online documentation for more details about styling diagram nodes and connection lines. 

    https://www.infragistics.com/help/wpf/xamdiagram-styling-items

    eg. 

            <ig:XamDiagram x:Name="Diagram">
                <ig:DiagramNode Key="node1" Fill="{StaticResource DiagramNodeBrush1}" Stroke="{StaticResource DiagramNodeBrush2}" StrokeThickness="1" ShapeType="RoundedRectangle" Height="60" Width="90" Content="{x:Static res:DiagramStrings.BasiConfiguration_NewPosition}" Position="50,50" Foreground="White" />
                <ig:DiagramConnection StrokeDashArray="5 1" StartNodeKey="node1" Stroke="{StaticResource DiagramNodeBrush2}" Fill="{StaticResource DiagramNodeBrush2}" EndNodeKey="node2" ConnectionType="Straight" />
    
                <ig:DiagramNode Key="node2" Position="200,50" Fill="{StaticResource DiagramNodeBrush3}" Stroke="{StaticResource DiagramNodeBrush4}" StrokeThickness="1" ShapeType="RoundedRectangle" Height="60" Width="90" Content="{x:Static res:DiagramStrings.BasiConfiguration_HardWork}" Foreground="White"/>
                <ig:DiagramConnection StartNodeKey="node2" Fill="{StaticResource DiagramNodeBrush4}" Stroke="{StaticResource DiagramNodeBrush4}" EndNodeKey="node3" ConnectionType="Straight" />
    
    
                <ig:DiagramNode Key="node3" Fill="{StaticResource DiagramNodeBrush5}" Stroke="{StaticResource DiagramNodeBrush6}" StrokeThickness="1" ShapeType="RoundedRectangle" Height="60" Width="90" Content="{x:Static res:DiagramStrings.BasiConfiguration_Experience}" Position="350,50" Foreground="White"/>
                <ig:DiagramConnection Fill="{StaticResource DiagramNodeBrush6}" Stroke="{StaticResource DiagramNodeBrush6}" StartNodeKey="node3" EndNodeKey="node4" />
    
                <ig:DiagramNode Key="node4" Fill="{StaticResource DiagramNodeBrush7}" Stroke="{StaticResource DiagramNodeBrush8}" StrokeThickness="1" ShapeType="RoundedRectangle" Height="60" Width="90" Content="{x:Static res:DiagramStrings.BasiConfiguration_Promotion}" Position="500,50" Foreground="White"/>
                <ig:DiagramConnection Fill="{StaticResource DiagramNodeBrush8}" Stroke="{StaticResource DiagramNodeBrush8}" StartNodeKey="node4" EndNodeKey="node5" />
    
                <ig:DiagramNode Key="node5" Fill="{StaticResource DiagramNodeBrush9}" Stroke="{StaticResource DiagramNodeBrush10}" StrokeThickness="1" ShapeType="RoundedRectangle" Height="60" Width="90" Content="{x:Static res:DiagramStrings.BasiConfiguration_Retirement}" Position="500,200" Foreground="White" >
    
                    <ig:DiagramNode.ConnectionPoints>
                        <ig:DiagramConnectionPoint Position=".5,1" />
                    </ig:DiagramNode.ConnectionPoints>
                </ig:DiagramNode>
                <ig:DiagramConnection StartNodeKey="node4" EndNodeConnectionPointName="Left" StartNodeConnectionPointName="Right" EndNodeKey="node1" />
    
                <ig:DiagramConnection StartNodeKey="node4" EndNodeKey="node5" />
            </ig:XamDiagram>