Selection
- 3 minutes to read
Use the mouse or touch gestures on touchscreen devices to select series and series points.
This document consists of the following sections:
- Selection Mode
- Series Selection Mode
- Access the Selected Elements
- Specify Selection Rectangle’s Appearance
Selection Mode
The ChartControl.SelectionMode property value defines whether you can select chart elements. When this property’s value is set to None (default value), end users cannot select a chart’s elements. The ElementSelectionMode enumeration lists all the selection modes. To enable selection, set the SelectionMode property to one of the following modes:
Mode | Example | Description |
---|---|---|
Single | Only one series element can be selected. Click or tap a series element to select it. Set the ChartControl.SelectionMode property to ElementSelectionMode.Single to enable this mode. | |
Multiple | You can select multiple series elements simultaneously. Click or tap a series element to select it. Hold Ctrl and click a series element to deselect it. In this mode, you can also use the Selection Rectangle to select multiple series’s elements. Move the mouse pointer while the Ctrl key and the left mouse button are pressed to mark series elements to be selected. Set the ChartControl.SelectionMode property to ElementSelectionMode.Multiple to enable this mode. | |
Extended | The Extended mode combines the Single and Multiple selection modes’ behaviors.
Set the ChartControl.SelectionMode property to ElementSelectionMode.Extended to enable this mode. |
Series Selection Mode
The ChartControl.SeriesSelectionMode property specifies a series element that is selected when you click a series’s point. The SeriesSelectionMode enumeration contains all the possible modes.
Mode | Example | Description |
---|---|---|
Point (default mode) | You can select only one series point at a time. Set the ChartControl.SeriesSelectionMode property to SeriesSelectionMode.Point to enable this mode. | |
Argument | This mode allows you to select points with the same argument simultaneously. Set the ChartControl.SeriesSelectionMode property to SeriesSelectionMode.Argument to enable this mode. | |
Series | In this mode, click a series’s point to select the entire series. Set the ChartControl.SeriesSelectionMode property to SeriesSelectionMode.Series to enable this mode. |
Access the Selected Elements
Use the ChartControl.SelectedItem or ChartControl.SelectedItems properties to access the selected elements.
<dxc:ChartControl SelectionMode="Single"
SelectedItem="{Binding Path=SelectedCountry, Mode=TwoWay}">
<!-- Other Chart Control's settings. -->
</dxc:ChartControl>
Tip
A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T326360.
Specify Selection Rectangle’s Appearance
Assign a DataTemplate object to the XYDiagram2D.SelectionTemplate property to specify the Selection Rectangle’s appearance:
<dxc:XYDiagram2D EnableAxisXNavigation="True"
EnableAxisYNavigation="True">
<dxc:XYDiagram2D.SelectionTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Gray">
<Rectangle Opacity="0.3" Fill="Gray"/>
</Border>
</DataTemplate>
</dxc:XYDiagram2D.SelectionTemplate>
<!--...-->
</dxc:XYDiagram2D>