Edit this page

Display ScrollViewer Inside the Diagram

This tutorial describes how to display the RadDiagram built-in ScrollViewer.

For the purpose of this tutorial we'll examine the following simple Diagramming structure:

<Grid Height="350" Width="525">
    <telerik:RadDiagram x:Name="xDiagram">
        <telerik:RadDiagramShape x:Name="shape1" Position="20,20" Content="Shape 1" />
        <telerik:RadDiagramShape x:Name="shape2" Position="520,520" Content="Shape 2" />
        <telerik:RadDiagramConnection Source="{Binding ElementName=shape1}"
                Target="{Binding ElementName=shape2}" />

As the Grid hosting our RadDiagram has a limited size, we can't see the second shape in the viewport:
Rad Diagram How To Scroll No Scroll

In such scenarios it's useful to use the RadDiagram built-in ScrollViewer, which you can display to get a better view of the area described by the position and size of your RadDiagramItems.
Rad Diagram How To Scroll Scroll

In order to enable the horizontal and/or vertical ScrollBar you need to add the following attribute(s) to the RadDiagram declaration:

<telerik:RadDiagram Grid.Row="1" x:Name="xDiagram" 

The same operation can be done in code-behind as well:

private void EnableScrollBars()
    ScrollViewer.SetHorizontalScrollBarVisibility(xDiagram, ScrollBarVisibility.Visible);
    ScrollViewer.SetVerticalScrollBarVisibility(xDiagram, ScrollBarVisibility.Visible);
Private Sub EnableScrollBars()
    ScrollViewer.SetHorizontalScrollBarVisibility(xDiagram, ScrollBarVisibility.Visible)
    ScrollViewer.SetVerticalScrollBarVisibility(xDiagram, ScrollBarVisibility.Visible)
End Sub     

See Also