SfDiagram and ViewModel with Nodes

[Vladimir]

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.

[Vladimir]

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

[Ramya Thirugnanam]

Hi Vladimir,

Thanks for using Syncfusion Products.

Requirement:

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.

Regards,

Ramya

111103_e6775a0c.zip