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}" /> 
    </telerik:RadDiagram> 
</Grid>        

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"  
                    ScrollViewer.HorizontalScrollBarVisibility="Visible"  
                    ScrollViewer.VerticalScrollBarVisibility="Visible"> 
  ... 
</telerik:RadDiagram>          

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

In this article