Context View in WPF Diagram (classic)

5 May 20213 minutes to read

A context view is a small view of an entire diagram with a new arrangement, where the small view and the arrangement are based on a particular view of the selected node. It provides three views:

  • Successors view—shows all child nodes of the selected node.
  • Predecessors view—displays all parent nodes of the selected node.
  • Neighborhood view—displays the immediate child and parent nodes of the selected node.

Tables for Properties and Methods

Properties

Property Description Type Data Type
ContextViewMode This property is used to get or set the context view mode of the context view manager. Dependency property ContextViewMode
Layout This property is used to manage layout information of the context view manager. CLR property ILayout
SourceControl This property is used to get a Diagram control to be a source of the context view manager. CLR property DiagramControl
TargetControl This property is used to get a Diagram control to be a target of the context view manager. CLR property DiagramControl

Methods

Method Description Parameters Type
public ContextViewManager(DiagramControl source, DiagramControl target) Constructor of the context view manager. source—a Diagram control in which selection changes will be monitored.target—a Diagram control to which a new diagram will be created based on the selected node and the context view chosen. In WPF
RefreshLayout This method is used to update the layout. It will be called automatically and can also be forced to be updated. NA In WPF

Adding ContextViewManager to an Application

ContextViewManager is a class that helps to communicate between a source diagram and a target diagram.

  • Source—it is a Diagram control in which selection changes will be monitored.
  • Target—it is a Diagram control to which a new diagram will be created based on the selected node and the context view chosen.

Steps to create ContextViewManager

  1. Create a Diagram control to be used as a target to show the context view of another Diagram control.
  • HTML
    • <syncfusion:DiagramControl  Height="235" Width="250"  Name="targetDiagramControl">

			<syncfusion:DiagramControl.Model>

			<syncfusion:DiagramModel x:Name="targetDiagramModel"/>

			</syncfusion:DiagramControl.Model>

			<syncfusion:DiagramControl.View>

			<syncfusion:DiagramView EnableFitToPage="True" Name="targetDiagramView"/>

			</syncfusion:DiagramControl.View>

			</syncfusion:DiagramControl>

    1. Create another Diagram control to be used as a source.

    2. Create a ContextViewManager instance to synchronize the source and target diagrams.

  • C#
    • // Create ContextViewManager to attach the source and target diagrams.

			ContextViewManager ContextView = new ContextViewManager(source, target);

			//Set ContextViewMode as Predecessors.

				   ContextView.ContextViewMode =ContextViewMode.Predecessors;

			// Create a layout for ContextView.

			DirectedTreeLayout layout = new DirectedTreeLayout(diagramModel,diagramView);

			diagramModel.HorizontalSpacing = 10;

			diagramModel.VerticalSpacing = 80;

			diagramModel.SpaceBetweenSubTrees = 10;

			// Set the layout of the ContextView.

			ContextView.Layout = layout;
  • VBNET
    • ' Create ContextViewManager to attach source and target diagrams.

			Dim ContextView As New ContextViewManager(source, target)

			'Set ContextViewMode as Predecessors.

			ContextView.ContextViewMode =ContextViewMode.Predecessors

			' Create a layout for ContextView.

			Dim layout As New DirectedTreeLayout(diagramModel,diagramView)

			diagramModel.HorizontalSpacing = 10

			diagramModel.VerticalSpacing = 80

			diagramModel.SpaceBetweenSubTrees = 10

			' Set the layout of the ContextView.

			ContextView.Layout = layout