AutoScroll in UWP Diagram (SfDiagram)

10 May 20211 minute to read

Autoscroll feature automatically scrolls the Diagram whenever the Node or Connector is moved beyond the boundary of the diagram. So that, it is always visible during dragging, resizing, and multiple selection operations. Autoscroll is automatically triggered when any one of the following is done towards the edges of the Diagram.

  • Node dragging, resizing
  • Connection editing
  • Rubber band selection
  • Label dragging

Autoscroll border

The Autoscroll border is used to specify the maximum distance between the object and Diagram edge to trigger Autoscroll. The default value is set as 20 for all sides (left, right, top, and bottom) and it can be changed by using the AutoScrollBorder property of ScrollSettings. The following code example illustrates how to set Autoscroll border.

  • C#
  • //Specifies AutoScroll Border
    diagram.ScrollSettings.AutoScrollBorder = new Thickness(150, 15, 15, 15);

    Scroll limit

    The scroll limit allows you to define the scrollable region of the Diagram. It includes the following options.

    • Allows to scroll in all directions without any restriction.
    • Allows to scroll within the Diagram content.
    • Allows to scroll within the specified scrollable area.

    ScrollLimit property of ScrollSettings helps to limit the scrolling.

    The following code example illustrates how to specify the scroll limit.

  • C#
  • //Sets the ScrollLimit
    diagram.ScrollSettings.ScrollLimit = ScrollLimit.Infinity;

    Scrollable Area

    You can restrict scrolling beyond any particular rectangle area by using the ScrollableArea property of ScrollSettings. To restrict scrolling beyond any custom region, you have to set the ScrollLimit as “limited”. The following code example illustrated how to customize scrollable area.

  • C#
  • //Sets ScrollLimit as limited
    diagram.ScrollSettings.ScrollLimit = ScrollLimit.Limited;
    //Sets the limited ScrollableArea
    diagram.ScrollSettings.ScrollableArea = new Rect(0, 0, 500, 500);