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

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


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 ?


Attachment: DiagramTest_(3)_826b0c57.zip

3 Replies

KR Keerthivasan Ramamoorthy Syncfusion Team January 27, 2017 11:53 AM UTC

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; 
return node; 
For more information about adding UI Element to Node content, please refer online documentation link as below. 
Keerthivasan R. 

SR Srikanth January 27, 2017 03:26 PM UTC

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:DiagramModel   x:Name="diagramModel">
                        <syncfusion:Node Width="200" Height="70" Shape="FlowChart_Card">
                                <Button Content="Click Me!"></Button>
                <syncfusion:DiagramView IsZoomEnabled="True" Bounds="0,0,1200,1200" Name="diagramView">

SS Suresh Shanmugam Syncfusion Team January 30, 2017 09:39 AM UTC

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;             

Suresh Shanmugam 

Live Chat Icon For mobile
Up arrow icon