Selection

• Apr 01, 2021
• 4 minutes to read

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

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

• Enable Selection
• Access the Selected Items
• Selection Modes
• The Selection Rectangle
• Customize the Selected Item Appearance

Enable Selection

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

XAML

<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.

XAML

<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 = 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.

C#

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

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

VB.NET

' ... 
AddHandler mapControl.SelectionChanged, AddressOf OnSelectionChanged
' ... 

Sub OnSelectionChanged(sender As Object, e As MapItemSelectionChangedEventArgs)
    ' Perform actions that should be done when selection changes. 
End Sub

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.

  

• 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.

  

• 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.

  

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.

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.

• The MapShapeBase.SelectedFill property specifies a brush used to fill a selected item.
• The MapShapeBase.SelectedStroke property defines a brush used to paint the selected item outline.
• The MapShapeBase.SelectedStrokeStyle property specifies a style of the selected item outline.

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

XAML

<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.

• The VectorLayerBase.SelectedShapeFill property specifies a brush used to fill a selected item.
• The VectorLayerBase.SelectedShapeStroke property defines a brush used to paint the selected item outline.
• The VectorLayerBase.SelectedShapeStrokeStyle property specifies a style of the selected item outline.

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

XAML

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