Setting Icon for DiagramNode | Infragistics Forums

State See Verified Answer
Replies 5 replies
Subscribers 6 subscribers
Views 1360322 views
Users 0 members are here

xamDiagram

305

Setting Icon for DiagramNode

Mahesh Gaware posted over 9 years ago

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.

17475

Offline Maria Tsvyatkova posted over 9 years ago in reply to Mahesh Gaware

You are welcome! Thank you for the feedback.
Cancel
Reply

Cancel
305

Offline Mahesh Gaware posted over 9 years ago in reply to Maria Tsvyatkova

Thanks it worked well.... thanks for assitance...
Cancel
Reply

Cancel
17475

Verified Answer
Offline Maria Tsvyatkova posted over 9 years ago in reply to Mahesh Gaware

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.
Cancel
Reply

Reject Answer

Cancel
305

Offline Mahesh Gaware posted over 9 years ago in reply to Maria Tsvyatkova

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.
Cancel
Reply

Cancel
17475

Offline Maria Tsvyatkova posted over 9 years ago

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://ko.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>
Cancel
Reply

Cancel