Version

xamOverviewPlusDetailPane

The xamOverviewPlusDetailPane™ is a navigation control used in the SurfaceViewer controls like xamOrgChart™ and xamNetworkNode™. The control provides panning and zooming functionality and an overview of the contents of the Surface Viewer controls.

The following image displays the OverviewPlusDetailPane control with xamOrgChart ™ for panning and zooming in on the network node layout.

xamOverviewPlusDetailPane 01.png

Figure 1: Overview Plus Detail Pane with xamOrgChart

The following image displays the OverviewPlusDetailPane control with xamNetworkNode ™ for panning and zooming in on the network node layout.

xamOverviewPlusDetailPane 02.png

Figure 2: Overview Plus Detail Pane with xamNetworkNode

User Interaction and Usability of the xamOverviewPlusDetailPane

With the xamOverviewPlusDetailPane, users can:

  • Zoom in and out

  • Perform panning

  • Scale the contents of the Surface Viewer to fit the viewable are or to 100%

xamOverviewPlusDetailPane 03.png

Figure 3: Graphical representation of the main features of the xamOverviewPlusDetailPane

xamOverviewPlusDetailPane 04.png

Figure 4: Hovering the mouse pointer over the control brings it into full view

xamOverviewPlusDetailPane 05.png

Figure 5: Clicking on the visible area and dragging it performs panning

Positioning the xamOverviewPlusDetailPane

To position the Overview Plus Detail Pane control, use the following properties of the Surface Viewer controls:

To style the Overview Plus Detail Pane, use the OverviewPlusDetailPaneStyle property.

The following code snippets show how to work with the Surface Viewer’s properties related to the Overview Plus Detail Pane control:

Code Example: xamOrgChart

Description

Code example below illustrates the surface viewer properties specified in xamOrgChart control.

Code

In XAML:

Code
<ig:XamNetworkNode
              OverviewPlusDetailPaneVisibility="Visible"
              OverviewPlusDetailPaneStyle="{StaticResource OPDPStyle }"
              HorizontalOverviewPlusDetailPaneAlignment="Center"
              VerticalOverviewPlusDetailPaneAlignment="Bottom">
</ig:XamNetworkNode>

Code Example: xamNetworkNode

Description

Code example below illustrates the surface viewer properties specified in xamNetworkNode control.

Code

In XAML:

Code
<ig:XamNetworkNode
              OverviewPlusDetailPaneVisibility="Visible"
              OverviewPlusDetailPaneStyle="{StaticResource OPDPStyle }"
              HorizontalOverviewPlusDetailPaneAlignment="Center"
              VerticalOverviewPlusDetailPaneAlignment="Bottom">
</ig:XamNetworkNode>

Related Content

Topics

The following topics provide additional information related to this topic.

Topic Purpose

Getting Started with xamNetworkNode

This topic demonstrates how to add the XamNetworkNode™ control to an application.

Understanding xamOrgChart

This topic introduces the XamOrgChart™ control and explains its elements and features.