Selection

  • 4 min to read

The Map control provides the capability to select items on the map surface.

SelectedMapItems

To learn more about selection in maps, refer to the following sections.

Enable Selection

Set the VectorLayerBase.EnableSelection property to true to allow end users to select vector layer items.

<dxm:VectorLayer EnableSelection="True">
      <!--…-->
</dxm:VectorLayer>

In the case, when it is necessary to display the selected item above other layer items, set the VectorLayerBase.IncreaseItemZIndexInInteraction property to true.

<dxm:VectorLayer EnableSelection="True"
      IncreaseItemZIndexInInteraction="True">
      <!--…-->
</dxm:VectorLayer>

The following table demonstrates the IncreaseZIndexInInteraction property in action.

The property value The resulting image
IncreaseItemZIndexInInteraction = true IncreaseItemZIndexInInteraction_True
IncreaseItemZIndexInInteraction = false IncreaseItemZIndexInInteraction_False

Access the Selected Items

Specify or obtain a selected item using the VectorLayerBase.SelectedItem property. When the Multiple or Extended selection mode is enabled, it is possible to access selected items using the VectorLayerBase.SelectedItems property.

In addition, you can handle the MapControl.SelectionChanged event to provide specific actions each time the end user selects map control items.

// ... 
mapControl.SelectionChanged += OnSelectionChanged;
// ... 

void OnSelectionChanged(object sender, MapItemSelectionChangedEventArgs e) {
    // Perform actions that should be done when selection changes. 
}

Selection Modes

The selection behavior is defined by its mode. The MapControl.SelectionMode property specifies which mode is enabled.

  • Single Selection Mode

    Set the SelectionMode property to Single. In this mode, the only single map item can be selected on the Map control surface.

    To select an individual item on a map, perform one of the following actions.

    • Tap a map item on a touchscreen device.
    • Hover over a map item with the mouse pointer and click it.

    MapItemsSelection

  • Multiple Selection Mode

    The Map control makes it possible to mark any number of scattered vector items. To use this functionality:

    • set the SelectionMode property to Multiple;
    • select or deselect the desired vector layer items by left-clicking on them.

    MapItemsSelectionUsingCtrlKey

  • Extended Selection Mode

    The Extended mode joins the Single and Multiple modes functionality. To enable the Extended mode, set the SelectionMode property to Extended.

    • Select/deselect a single map item by left-clicking on it.
    • Select/deselect multiple map items by left-clicking on them while pressing Ctrl key.

    MapExtendedSelectionMode

The Selection Rectangle

If necessary, select several map items at the same time using the selection rectangle. For this, perform the following steps.

  • Set the SelectionMode property to Multiple or Extended.
  • Hold the Shift key and left mouse button.
  • Drag the mouse pointer to mark an area that includes the required map items.
  • Release the left mouse button. All map items, falling into this area, will be selected.

MapItemsMultiselection

NOTE

Note, it is possible to select or deselect separate map items by left-clicking on them while pressing the Ctrl key.

Customize the Selected Item Appearance

To configure the appearance of each individual item while it is selected, use the following properties.

Use XAML below to add a MapEllipse object with defined selection settings to a map.

<dxm:VectorLayer>
      <dxm:MapItemStorage>
            <dxm:MapEllipse Location="70, -33" 
                     Width="3500" Height="3500" 
                     Fill="AliceBlue" 
                     SelectedFill="Red" 
                     SelectedStroke="Black">
                     <dxm:MapEllipse.SelectedStrokeStyle>
                             <dxm:StrokeStyle DashArray="10 2 4" 
                                     Thickness="5" 
                                     DashCap="Round"/>
                     </dxm:MapEllipse.SelectedStrokeStyle>
            </dxm:MapEllipse>
      </dxm:MapItemStorage>
</dxm:VectorLayer>

When you need to specify the common appearance settings for all selected items on a vector layer, use the following properties.

Use the XAML below to set the common appearance for selected vector layer items.

<dxm:VectorLayer SelectedShapeFill="Coral" 
      SelectedShapeStroke="Black"/>
      <dxm:VectorLayer.SelectedShapeStrokeStyle>
            <dxm:StrokeStyle DashArray="1 3" 
                 Thickness="2" 
                 DashCap="Round"/>
      </dxm:VectorLayer.SelectedShapeStrokeStyle>
     <!--…-->
</dxm:VectorLayer>
See Also