ZOrder

RadDiagram gives you the ability to control the Z-Order of shapes and connections by using their ZIndex property. You can also use RadDiagramCommands in order to increase/decrease ZIndex of the selected RadDiagramItems simultaneously.

Please note that the examples in this tutorial are showcasing Telerik Windows8 theme. In the Setting a Theme article you can find more information on how to set an application-wide theme.

Using the ZIndex property

Consider the following code:

XAML

	<telerik:RadDiagram x:Name="diagram" Grid.Row="1">
		<telerik:RadDiagramShape x:Name="shape1" 
								 Width="150"
								 Height="150"
								 Background="DeepSkyBlue"
								 Content="Zindex = 3"
								 Geometry="{telerik:CommonShape ShapeType=EllipseShape}"
								 Position="80 120"
								 ZIndex="3" />
		<telerik:RadDiagramShape x:Name="shape2" 
								 Width="150"
								 Height="150"
								 Background="CadetBlue"
								 Content="Zindex = 2"
								 Geometry="{telerik:CommonShape ShapeType=EllipseShape}"
								 Position="180 120"
								 ZIndex="2" />
		<telerik:RadDiagramShape x:Name="shape3" 
								 Width="150"
								 Height="150"
								 Background="DodgerBlue"
								 Content="Zindex = 1"
								 Geometry="{telerik:CommonShape ShapeType=EllipseShape}"
								 Position="120 20"
								 ZIndex="1" />

		<telerik:RadDiagramConnection Source="{Binding ElementName=shape3}" 
									  SourceConnectorPosition="Right"
									  Target="{Binding ElementName=shape2}"
									  TargetConnectorPosition="Right"
									  ZIndex="4" />

		<telerik:RadDiagramConnection Source="{Binding ElementName=shape3}" 
									  SourceConnectorPosition="Left"
									  Target="{Binding ElementName=shape1}"
									  TargetConnectorPosition="Left"
									  ZIndex="0" />
	</telerik:RadDiagram>

We have reversed the natural ZOrder of the 3 Shapes. On the other hand, the connection on the right is on top of the shapes and connection on the left is below them:

Using the RadDiagram Commands

RadDiagram provides a set of predefined commands for manipulating the selected items' ZIndices. "BringForward" and "SendBackward" allow you to increase/decrease the Z-Indices of the selected RadDiagramItems. If you need to bring the selected item(s) on top of all other items or below them, you can use "BringToFront" and "SentToback":

XAML

	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<StackPanel Orientation="Horizontal">
			<telerik:RadButton Width="200" 
							   Height="30"
							   Command="telerik:DiagramCommands.BringToFront"
							   CommandTarget="{Binding ElementName=diagram}"
							   Content="Bring Up" />
			<telerik:RadButton Width="200" 
							   Height="30"
							   Command="telerik:DiagramCommands.SendToBack"
							   CommandTarget="{Binding ElementName=diagram}"
							   Content="Bring Down" />
		</StackPanel>
		<telerik:RadDiagram x:Name="diagram" Grid.Row="1">
			<telerik:RadDiagramShape x:Name="shape1" 
									 Width="150"
									 Height="150"
									 Background="DeepSkyBlue"
									 Content="Zindex = 3"
									 Geometry="{telerik:CommonShape ShapeType=EllipseShape}"
									 Position="80 120"
									 ZIndex="3" />
			<telerik:RadDiagramShape x:Name="shape2" 
									 Width="150"
									 Height="150"
									 Background="CadetBlue"
									 Content="Zindex = 2"
									 Geometry="{telerik:CommonShape ShapeType=EllipseShape}"
									 Position="180 120"
									 ZIndex="2" />
			<telerik:RadDiagramShape x:Name="shape3" 
									 Width="150"
									 Height="150"
									 Background="DodgerBlue"
									 Content="Zindex = 1"
									 Geometry="{telerik:CommonShape ShapeType=EllipseShape}"
									 Position="120 20"
									 ZIndex="1" />

			<telerik:RadDiagramConnection Source="{Binding ElementName=shape3}" 
										  SourceConnectorPosition="Right"
										  Target="{Binding ElementName=shape2}"
										  TargetConnectorPosition="Right"
										  ZIndex="4" />

			<telerik:RadDiagramConnection Source="{Binding ElementName=shape3}" 
										  SourceConnectorPosition="Left"
										  Target="{Binding ElementName=shape1}"
										  TargetConnectorPosition="Left"
										  ZIndex="0" />
		</telerik:RadDiagram>
	</Grid>

This way configured, the two buttons are ready to bring to front or sent to back the selected items of the RadDiagram:

Here is the result of selecting the shape with ZIndex = 1 and clicking the left button:

See Also

• Structure
• Getting Started
• Populating with Data
• Shapes
• Connections
• Items Editing
• Rotation
• Resizing
• Selection