Hi,
I would like to add an Icon to DiagramNode, I am adding custom category to toolbox, and then under that category I am adding Item which contains the Diagram Node, in this Node I would like to show the Icon, I also want that user should be able to Add the text to this Node(whatever default behaviour is now), I tried lots of permutaion and combination and finally I am ran out of ideas, can anyone please help.
Hello Manoj,
Thank you for contacting Infragistics!
The default template could be modified by creating templates that are set for the DisplayTemplate property. You may have a look at the following forum thread where Gergana shared a sample: http://es.infragistics.com/community/forums/t/93312.aspx. In order to change the template for the toolbox you can set that in the custom category e.g.:<ig:DiagramToolboxCategory Name="Custom Shapes" IsExpanded="True"> <ig:DiagramToolboxCategory.Items> <ig:DiagramToolboxItem Title="Custom"> <ig:DiagramToolboxItem.Item> <ig:DiagramNode Width="30" Height="30"> <ig:DiagramNode.ConnectionPoints> <ig:DiagramConnectionPointCollection> <ig:DiagramConnectionPoint Name="Point" Position="0.5,0.5" /> </ig:DiagramConnectionPointCollection> </ig:DiagramNode.ConnectionPoints> <ig:DiagramNode.DisplayTemplate> <ItemContainerTemplate> <StackPanel Orientation="Horizontal"> <Image Source="Tools2.png" Height="50" Width="50"/> <TextBox Text="Custom" Height="20"/> </StackPanel> </ItemContainerTemplate> </ig:DiagramNode.DisplayTemplate> </ig:DiagramNode> </ig:DiagramToolboxItem.Item> </ig:DiagramToolboxItem> </ig:DiagramToolboxCategory.Items> </ig:DiagramToolboxCategory> </ig:XamDiagramToolbox.CustomCategories>
Thanks for reply,
I did go through the sample as well as I did tried the approach metioned above, however the problem is mainly around EditTemplate, so if I take your sample above and apply it in my test, it shows up the icon and text when I drop, but when I double click on diagramNode on designer, it activate an edit template, when I add some text, it takes the text but doest not update the DisplayTemplate, could you please provide me implementation how to do that?
Really Apprciate your help.
Hi Manoj,
Here is a code snippet for the same. Please note that the TextBox is bind to the Content property of the DiagramNode in order to get it displayed in the DisplayTemplate:<DataTemplate x:Key="NodeContentTemplate"> <TextBlock Margin="5 3" Text="{Binding Mode=OneWay}" TextWrapping="Wrap" TextAlignment="Center"/> </DataTemplate>
<DataTemplate x:Key="NodeContentEditTemplate"> <StackPanel Orientation="Horizontal"> <Image Source="Tools2.png" Height="25" Width="25"/> <TextBox x:Name="txt_edit" Text="{Binding Content, RelativeSource={RelativeSource AncestorType=ig:DiagramNode}}" Height="20"/> </StackPanel> </DataTemplate>Let me know if I could assist you with anything else.
You are welcome! Thank you for the feedback.
Thanks it worked well.... thanks for assitance...