Managing the View

Introduction to the View

The view refers to what the user can see. Users might look at an entire graph, or zoom in to focus on smaller sections of the graph. To present the user with the information they want as they zoom and pan around the graph, you will need to manage the view.

The view consists of two parts:

  • The viewport is the rectangle that defines the part of the graph that is currently visible. Its upper left corner is called the view point.
  • The content rectangle is the rectangle which defines the bounds of the graph to which you can navigate via scrolling.

Figure 3.12. Viewport and Content Rectangle

Viewport and Content Rectangle

Whenever you add new elements to your graph that extend beyond the existing bounds, you'll need to update your content rectangle. You can then fit the viewport to show the full new content rectangle. Or if you prefer, you can do both at once.

Fitting the Bounds

You must update the content rectangle manually when you add new graph elements programmatically that extend beyond the bounds of the existing content rectangle. When the content rectangle is not updated, you may be unable to scroll to the new element when it is not currently visible.

To update the content rectangle, use the CanvasControl's UpdateContentRect method.

Example 3.11. Fitting the Bounds

// Re-calculate the content rectangle

Optionally, you can provide insets which enlarge the content rectangle. This helps you avoid having elements touch the borders of the viewport.

Example 3.12. Fitting the Bounds with Insets

// Re-calculate the content rectangle using insets
graphControl.UpdateContentRect(new InsetsD(10, 10, 10, 10));

Fitting the Viewport

Fitting the viewport adjusts the zoom and the visible area such that the entire graph is displayed. Again, it's the CanvasControl which offers the method to fit the viewport: FitContent:

Example 3.13. Fitting the Viewport

// Fit the graph into the view

Fitting Both Bounds and Viewport

Although it sometimes makes sense to fit the bounds without fitting the viewport and vice versa, the most common use case is to fit both at the same time. GraphControl offers a method to do both with one single call: FitGraphBounds:

Example 3.14. Fitting Both Bounds and Viewport

// Re-calculate the content rectangle and fit the graph into the view

This method has the same effect as calling UpdateContentRect and FitContent subsequently.