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
close icon

SfDiagram and ViewModel with Nodes

Hi Sf Team,
I've recently downloaded Winrt components and I've been trying to understand how they fit to our needs.

We have a viewmodel class that contains the following data.
for simplicity sake following classes will be used:

 public class Item


        public Guid Id { get; set; }

        public Item()


            Id = Guid.NewGuid();



    public class StartItem : Item



    public class RedItem : Item



    public class GreenItem : Item



    public class BlueItem : Item



    public  class EndItem : Item



    public class NodeConnection


        public Guid FromItem { get; set; }

        public Guid ToItem { get; set; }


and finally ViewModel

public class TestViewModel : BindableBase
        private ObservableCollection<Item> _nodes;
        private ObservableCollection<NodeConnection> _connectors;

        public ObservableCollection<Item> Nodes
            get { return _nodes; }
            set { SetProperty(ref _nodes, value); }

        public ObservableCollection<NodeConnection> Connectors
            get { return _connectors; }
            set { SetProperty(ref _connectors, value); }

Primary objective is to create a diagram in a SfDiagram component and also use different figures for respective types of items.
For instance:
Rectangle for RedItem
Circle for BlueItem and so on.

What would be the best way to achieve this?

Thanks in advance.

2 Replies

VL Vladimir September 7, 2013 08:01 PM UTC

Well I managed to do it.
I created IValueConverter's for both properties "Nodes" "Connections"
Looks ugly...

RT Ramya Thirugnanam Syncfusion Team September 10, 2013 10:20 AM UTC

Hi Vladimir,

Thanks for using Syncfusion Products.


To apply the different visual to the Node based on the Business Object type (“Item”-class)

Solution to the Requirement:

SfDiagram supports to add any object (UI and Non-UI) in SfDiagram.Nodes collection. A Non-UI element is visualized as a Node by Calling Virtual Methods named “PrepareNodeForItemOverride”. This method will set the Node’s DataContext as the Non- UI Element (Business Object). Now we need to set Content and ContentTemplate of the Node, to achieve the requirement.

1. Setting the Business Object (RedItem, BlueItem etc...) as Content of the Node:

protected override void PrepareNodeForItemOverride(Node element, object item)

            base.PrepareNodeForItemOverride(element, item);
//element is Node and Item is BusinessObject(Item)
            element.Content = item;       

We have overridden this method to set the Business object as content of the Node.

2. ContentTemplate based on the Type of Content (Business Object)

        ContentTemplateSelector is used to update the ContentTemplate of the Node based on the type of its content.

We have prepared a sample that tries to meet your requirement. Please refer to the sample from the attachment.

For further details about the rendering options in SfDiagram, please refer to the following online help documentation link.

Link: http://help.syncfusion.com/UG/winrt/Documents/rendering.htm

Please let us know if you need any further assistance.




Live Chat Icon For mobile
Up arrow icon