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.
Unfortunately, activation email could not send to your email. Please try again.

SfDiagram and ViewModel with Nodes

Thread ID:

Created:

Updated:

Platform:

Replies:

111103 Sep 7,2013 11:03 AM Sep 10,2013 06:20 AM WinRT 2
loading
Tags: SfDiagram
Vladimir
Asked On September 7, 2013 11:03 AM

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
Replied On September 7, 2013 04:01 PM

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 06:20 AM

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

CONFIRMATION

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.

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.

;