UWP Diagram (SfDiagram) Overview

26 Mar 2021 / 1 minute to read

Overview control is used to display a preview (overall view) of the entire content of a Diagram. This helps you to look overall picture of large Diagram and also to navigate (pan or zoom) to a particular position of the page.

When you work on a very large Diagram, You may not know the part where you are actually working or navigation from one part to another might be a difficult. To navigation, you can zoom out entire Diagram and find where you are. This solution is not suitable when you need some frequent navigation.

Overview control solved this problem by displaying a preview (overall view) of the entire Diagram. A rectangle indicated viewport of the Diagram. Navigation becomes easy by dragging this rectangle.


Supported platform: WPF, WinRT 8.1, Universal, UWP

Create Overview

The following code example explains how to add Overview to an Application.

  • xml
  • <!--Initializes the overview control-->
    <overview:Overview Source="{Binding ElementName=diagramControl}" Height="300" Margin="0,25,0,0"/>

    Overview control

    Refer to the Overview Sample from the following link.

    Sample Link: Overview.

    Zoom Pan

    In overview, the view port of the Diagram is highlighted with a red colored rectangle. Diagram can be zoomed/panned by interacting with that. You can interact with overview as follows.

    Property Description Type DataType
    Constraint Gets or Sets the OverviewConstraints. Dependency property Enum OverviewConstraints OverviewConstraints.None OverviewConstraints.Pan OverviewConstraints.TapFocus OverviewConstraints.DrawFocus OverviewConstraints.Zoom
    FocusBrush Specifies the color of the viewport area in the preview. Dependency Property Brush
    UnFocusBrush Specifies the background of the extended area in the preview. Dependency Property Brush