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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfDiagram and ViewModel with Nodes

Thread ID:





111103 Sep 7,2013 03:03 PM UTC Sep 10,2013 10:20 AM UTC WinRT 2
Tags: SfDiagram
Asked On September 7, 2013 03:03 PM UTC

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.

Replied On September 7, 2013 08:01 PM UTC

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

Ramya Thirugnanam [Syncfusion]
Replied On 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.





This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon