Textbox (UIElement) inside Node Content is not accessible. IsHitTestVisible="True" is not taking effect

[Srikanth]

Hi,

I am trying to add textbox control into Node Content. 

It appears properly. However, I can't access the element. I have tried enabling 'IsHitTestVisible=True', but no luck.

I have attached my sample below. Can you please guide me with the solution to make UIElements (like textboxes, buttons) accessible from node content ?

Thanks,

Srikanth.

Attachment: DiagramTest_(3)_826b0c57.zip

[Keerthivasan Ramamoorthy]

Hi Srikanth, 

Requirement: “Need to Add UI Element (Textbox, Button,..etc) to Node Content”. 

We have a support to achieve your requirement. We have provided a code example to represent this. Please refer the code example as below. 

Code example: 

//AddNode method 

private Node addNode(double offsetx, double offsety, Shapes shape, String label, double width, double height) 

{ 

Node node = new Node(); 

node.OffsetX = offsetx; 

node.OffsetY = offsety; 

node.Shape = shape; 

TextBox b = new TextBox(); 

b.Text = label; 

node.Content = b; 

node.HorizontalContentAlignment = HorizontalAlignment.Center; 

node.VerticalContentAlignment = VerticalAlignment.Center; 

(node.Content as TextBox).IsHitTestVisible = true; 

node.Width = width; 

node.Height = height; 

model.Nodes.Add(node); 

return node; 

} 

 

Note: 

For more information about adding UI Element to Node content, please refer online documentation link as below. 

Documentation link: https://help.syncfusion.com/wpf/diagram/nodes#node-content 

 

 

Regards, 

Keerthivasan R. 

[Srikanth]

Thanks Keerthi.

The example is working from from code behind. However, not working from XAML. Here is my code example.

Cam you please advise what is wrong with this code?  Thanks.

<syncfusion:DiagramControl Name="diagramControl" IsSymbolPaletteEnabled="False">
 
            <syncfusion:DiagramControl.Model>
 
                <syncfusion:DiagramModel   x:Name="diagramModel">
 
                    <syncfusion:DiagramModel.Nodes>
 
                        <syncfusion:Node Width="200" Height="70" Shape="FlowChart_Card">
                            <syncfusion:Node.Content>
                                <Button Content="Click Me!"></Button>
                            </syncfusion:Node.Content>
 
                        </syncfusion:Node>
 
                    </syncfusion:DiagramModel.Nodes>
 
                </syncfusion:DiagramModel>
 
            </syncfusion:DiagramControl.Model>
 
            <syncfusion:DiagramControl.View>
 
                <syncfusion:DiagramView IsZoomEnabled="True" Bounds="0,0,1200,1200" Name="diagramView">
 
                </syncfusion:DiagramView>
 
            </syncfusion:DiagramControl.View>
 
        </syncfusion:DiagramControl>

[Suresh Shanmugam]

Hi Srikanth, 

 

In order to the perform the operations on Node, we have internally set the IsHitTestVisible as false for the Content of the Node. So, Please set the IsHitTestVisible as true in DiagramLoaded event to make Content Editable at runtime. 

 

Please refer the code example for Diagram Loaded event as below. 

 

//Hook the loaded event 

diagramControl.Loaded += diagramControl_Loaded; 

 

private void diagramControl_Loaded(object sender, RoutedEventArgs e) 

{ 

       foreach (Node node in diagrammodel.Nodes) 

       { 

              (node.Content as TextBox).IsHitTestVisible = true;             

       }  

} 

Regards, 

Suresh Shanmugam