Category / Section
How to generate Layout with DataSource as NodeViewModel instead of business object class in WPF Diagram (SfDiagram)?
2 mins read
WPF Diagram (SfDiagram) can be populated with the nodes and connectors based on the information provided from an external data source. The DataSource property is used to define the data source either as a collection of any business objects or collection of Nodes. Here, diagram is generated as layout with DataSource as NodeViewModel.
C#
public class Employee : NodeViewModel,INotifyPropertyChanged
{
public string EmpId { get; set; }
public string ParentId { get; set; }
public string Name { get; set; }
public string _Color { get; set; }
}
public class Employees : ObservableCollection<Employee>
{
}
public class DiagramVM : DiagramViewModel
{
public DiagramVM()
{
PageSettings = new PageSettings()
{
PageBorderBrush = new SolidColorBrush(Colors.Transparent),
PageBackground = new SolidColorBrush(Colors.White)
};
ScrollSettings = new ScrollSettings()
{
ScrollLimit = ScrollLimit.Diagram
};
Menu = null;
DataSourceSettings = new DataSourceSettings()
{
ParentId = "ParentId",
Id = "EmpId",
DataSource = GetData()
};
LayoutManager = new Syncfusion.UI.Xaml.Diagram.Layout.LayoutManager()
{
Layout = new DirectedTreeLayout()
{
Type = LayoutType.Hierarchical,
Orientation = TreeOrientation.LeftToRight,
}
};
}
/// <summary>
/// Method to Get Data for DataSource
/// </summary>
/// <param name="data"></param>
private Employees GetData()
{
Employees ItemsInfo = new Employees();
ItemsInfo.Add(new Employee(){ EmpId = "1", ParentId = "", Name = "Plant Manager", _Color = "#034d6d"});
ItemsInfo.Add(new Employee(){ EmpId = "2", ParentId = "1", Name = "Production Manager", _Color = "#1b80c6"});
ItemsInfo.Add(new Employee(){ EmpId = "3", ParentId = "1", Name = "Administrative Officer", _Color = "#1b80c6"});
ItemsInfo.Add(new Employee(){ EmpId = "4", ParentId = "1", Name = "Maintenance Manager", _Color = "#1b80c6"});
ItemsInfo.Add(new Employee(){ EmpId = "5", ParentId = "2", Name = "Control Room", _Color = "#3dbfc9"});
ItemsInfo.Add(new Employee(){ EmpId = "6", ParentId = "2", Name = "Plant Operator", _Color = "#3dbfc9"});
ItemsInfo.Add(new Employee(){ EmpId = "7", ParentId = "4", Name = "Electrical Supervisor", _Color = "#3dbfc9"});
ItemsInfo.Add(new Employee(){ EmpId = "8", ParentId = "4", Name = "Mechanical Supervisor", _Color = "#3dbfc9"});
ItemsInfo.Add(new Employee(){ EmpId = "9", ParentId = "5", Name = "Foreman", _Color = "#2bb28e"});
ItemsInfo.Add(new Employee(){ EmpId = "10", ParentId = "6", Name = "Foreman", _Color = "#2bb28e"});
ItemsInfo.Add(new Employee(){ EmpId = "11", ParentId = "7", Name = "Craft Personnel", _Color = "#2bb28e"});
ItemsInfo.Add(new Employee(){ EmpId = "12", ParentId = "7", Name = "Craft Personnel", _Color = "#2bb28e"});
ItemsInfo.Add(new Employee(){ EmpId = "13", ParentId = "8", Name = "Craft Personnel", _Color = "#2bb28e"});
ItemsInfo.Add(new Employee(){ EmpId = "14",ParentId = "8", Name = "Craft Personnel", _Color = "#2bb28e"});
ItemsInfo.Add(new Employee(){ EmpId = "15", ParentId = "9", Name = "Craft Personnel", _Color = "#76d13b"});
ItemsInfo.Add(new Employee(){ EmpId = "16", ParentId = "9", Name = "Craft Personnel", _Color = "#76d13b"});
ItemsInfo.Add(new Employee(){ EmpId = "17", ParentId = "10", Name = "Craft Personnel", _Color = "#76d13b"});
return ItemsInfo;
}
}
