How to access the SfDiagram nodemodelview in C# Code behind?

[S.Bhaskar Rao]

I have created the XAML Page using following XAML Code

<syncfusion:SfDiagram x:Name="diagram" >

            <syncfusion:SfDiagram.Nodes>

                <syncfusion:NodeViewModel ID="Node1" OffsetX="100" OffsetY="100" UnitWidth="100" UnitHeight="50" x:Name="Node1">

                    <syncfusion:NodeViewModel.Annotations>

                        <syncfusion:AnnotationEditor Content="Nodes" />

                    </syncfusion:NodeViewModel.Annotations>

                </syncfusion:NodeViewModel>

            </syncfusion:SfDiagram.Nodes>

        </syncfusion:SfDiagram>

I am trying to change the background color of the node id="Node1" from Code behind file like

public MainWindow()

        {

            InitializeComponent();

            var targetNode=(diagram.Nodes as NodeCollection).OfType<NodeViewModel>().FirstOrDefault(n => n.ID.ToString() == "Node1");

            string nodeId = targetNode.ID.ToString();

            MessageBox.Show("Found Node ID: {nodeId}");

       }

I am getting the error "

System.ArgumentNullException: 'Value cannot be null.

Parameter name: source'"

Please help how to access the node with ID and change its fill color?

[Arun Kumar Sivakumar]

Hi Bhaskar,

Requirement: How to get the ID of a node and change its fill color

In our SfDiagram control, the view of the node is internal and cannot be accessed directly. However, you can access the ViewModel of the node.

We validated your requirement using the provided code snippet and found that the node was not added to the NodeCollection. As a result, the node is missing from the diagram, preventing you from retrieving its ID.

We have provided the modified code snippet for your reference.

 <syncfusion:SfDiagram x:Name="diagram">

     <syncfusion:SfDiagram.Nodes>

         <syncfusion:NodeCollection>

             <syncfusion:NodeViewModel ID="Node1" OffsetX="100" OffsetY="100" UnitWidth="100"  Shape="{StaticResource Rectangle}"  UnitHeight="50" x:Name="Node1">

                 <syncfusion:NodeViewModel.Annotations>

                     <syncfusion:AnnotationEditor Content="Nodes" />

                 </syncfusion:NodeViewModel.Annotations>

             </syncfusion:NodeViewModel>

         </syncfusion:NodeCollection>

     </syncfusion:SfDiagram.Nodes>

 </syncfusion:SfDiagram>

In our SfDiagram control, if you set a common Style for the node (View)  in XAML, you will be unable to change the NodeViewModel's fill color.

To modify the fill color, you need to define a separate Style specifically for the node (ViewModel) and assign it to the ShapeStyle property of the NodeViewModel. This will allow you to update the fill color dynamically.

For more details, please refer to the following User Guide (UG) link and sample:

UG link: Node in WPF Diagram control | Syncfusion®

Regards,

Arun Kumar S

Attachment: Simple_node_sample_b702a5c6.zip