How can I add only textbox to SfDiagram?

Earlier you provided an example where I could resize nodes to their size. I want to add only textbox in this example. I created a template like below.

     <DataTemplate x:Key="TextboxTemplate">

                                <Grid HorizontalAlignment="Center"

                                      VerticalAlignment="Center">

                                    <TextBox Text="XXXX"/>

                                </Grid>

                            </DataTemplate>


I added this template to the stencil as follows.

          <viewModels:StencilSymbolViewModel Key="Textboxes"

                                                       SymbolTemplateKey="TextboxTemplate"/>

I added the operations I made to the previous sample code and shared it in the appendix.

Problems I'm facing, unfortunately, I can't change the position of the textbox after dragging it to the field. Annotation comes with Textbox and I cannot destroy this annotation.


I could do a trick, but that just doesn't make sense. The trick is to add a blank image and use the annotation as a textbox.


How can I add only one textbox to the diagram?


Attachment: DiagramSampleSymbol_15d78d73.rar

3 Replies 1 reply marked as answer

SU Sumathi Uthayakumar Syncfusion Team March 16, 2023 12:04 PM UTC


Hi Özgür


Dragging nodes with textboxes is not feasible as clicking on the textbox will shift the focus away from the node. Therefore, we propose using a node with an annotation that is stretched to match the dimensions of the node. This will allow you to move the text around the diagram and activate edit mode with a double-click. We have shared the sample which we tried at our end.


If we have misunderstood your needs, kindly provide us with further information.



Regards,

Sumathi U.


Attachment: DiagramSampleSymbol_87d9500f.zip


ÖZ Özgür March 23, 2023 12:07 PM UTC

Hello,


Thank you for your answer. Yes, it works, but when I want to add text behind the code, I cannot change parameters such as FontSize, Foreground,FontFamily etc. I added an AddText button to the attached example and the process is unfortunately not working. Unfortunately, I did not understand the cause of the problem. Can you help me ?



Attachment: DiagramSampleSymbol_a8072f8d.rar


KR Karkuvel Rajan Shanmugavel Syncfusion Team March 24, 2023 10:19 AM UTC

Hi Özgür,


We have analyzed the provided sample and discovered that both node’s content and annotation properties were used. However, when setting the value for annotation, the text was left null. As a result, any text-related properties are not working. To resolve the issue, use the below codes to add the annotation text.


Code Example:


 

node.Annotations = new AnnotationCollection()

{

    new TextAnnotationViewModel() { Text = "XXXXXXXXXXXX", ReadOnly = true, FontSize = 30}

};

 

//These codes are not necessary to add text node

 

//node.Content = null;

//node.ContentTemplate = App.Current.Resources["TextboxTemplate"] as DataTemplate;

 


Regards,

Karkuvel Rajan S


Marked as answer
Loader.
Up arrow icon