Z-Order Commands in WPF SfDiagram

18 Nov 20183 minutes to read

Z – Order commands are used to visually arrange the selected objects such as Nodes and Connectors on the WPF Diagram page with its Z-order values.

Z-order determines the visual stacking order of diagram elements on the page. When two or more elements overlap, the element with a higher Z-order value appears in front of elements with lower Z-order values. Z-Order commands can be used to change this stacking order and control the visibility of overlapping elements.

BringToFront

The BringToFront command is used to visually bring the selected element to the front over all other overlapped elements.

NOTE

If the selected element is already at the highest Z-order level, executing the BringToFront command will not produce any visible change.

<Button Height="50" Content="BringToFront" Name="BringToFront" Command="Syncfusion:DiagramCommands.BringToFront"></Button>
//Initialize the SfDiagram 
SfDiagram diagramcontrol = new SfDiagram();

IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

//Brings to front
graphinfo.Commands.BringToFront.Execute(null);

SendToBack

The SendToBack command visually moves the selected elements behind all other overlapped elements.

NOTE

If the selected element is already at the lowest Z-order level, executing the SendToBack command will not produce any visible change.

<Button Height="50" Content="SendToBack" Name="SendToBack" Command="Syncfusion:DiagramCommands.SendToBack"></Button>
//Initialize the SfDiagram 
SfDiagram diagramcontrol = new SfDiagram();

IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

// Send To Back
graphinfo.Commands.SendToBack.Execute(null);

Represents the send to back

SendBackward

The SendBackward command visually moves the selected elements behind the underlying element.

NOTE

The SendBackward command moves the selected element one level backward in the Z-order stack. If no element exists behind it, the command will not produce any visible change.

<Button Height="50" Content="SendBackward" Name="SendBackward" Command="Syncfusion:DiagramCommands.SendBackward"></Button>
//Initialize the SfDiagram 
SfDiagram diagramcontrol = new SfDiagram();

IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

// Send To Backward
graphinfo.Commands.SendBackward.Execute(null);

BringForward

The BringForward command visually moves the selected element over the nearest overlapping element.

NOTE

The BringForward command moves the selected element one level forward in the Z-order stack. If no element exists in front of it, the command will not produce any visible change.

<Button Height="50" Content="BringForward" Name="BringForward" Command="Syncfusion:DiagramCommands.BringForward"></Button>
//Initialize the SfDiagram 
SfDiagram diagramcontrol = new SfDiagram();

IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

// Brings To Forward
graphinfo.Commands.BringForward.Execute(null);

Represents the bring forward

View sample in GitHub