Selection
The chart selection behavior enables interactions with the data point visual elements.
If the feature is enabled, clicking on a data point will select or deselect it, based on the selection mode and the current selection state of the point. There is no default visual feedback for the selection. This article shows how to use the selection behavior, enable the visual feedback and customize it.
To enable the selection, add a ChartSelectionBehavior element in the Behaviors collection of the chart control. The following example shows how to create a sample data binding setup and enable the feature.
Example 1: Define the data point model
Example 2: Populating with data
Example 3: Using the ChartSelectionBehavior
Figure 1: Selected data point
The selected data points can be accessed using the __Selected
Visual Feedback
By default selecting a data point doesn't highlight it on the plot area. To enable this, you can use the chart palettes. The Palette property of the chart defines the fill color of the data points. The SelectionPalette property defines the colors of the data points when selected.
Example 4: Setting the selection palette
Figure 2: Palette based selection coloring
To define selection colors different than the ones provided by the predefined palettes, you can create a custom palette and assign it to the SelectionPalette property of the chart. Or alternatively, use the DefaultVisualStyle or PointTemplate of the chart series.
The following example shows one way to change the selected point's background using a PointTemplate. In this case the palette won't be used so there is no need to set the palette propreties.
Example 5: Customizing the data point visual
The data context of the element in the PointTemplate is an object of type DataPoint
Figure 3: PointTemplate based selection coloring
An additional way of customizing the selection's visual feedback is to data bind the color property of the default visual element (via DefaultVisualStyle) or the element in the PointTemplate. Then update the underlying property in case the selection changes, using the SelectionChanged event of the ChartSelectionBehavior.
Selection Mode
ChartSelectionBehavior supports two selection modes - Single (default) and Multiple. Also, there is a None selection mode which disables the selection.
When the Single mode is used, the click on a data point selects it. If a data point was previously selected, it gets deselected.
When the Multiple mode is used, the click on a data point includes it in the selection. Multiple data points are selected. A click on a selected data point will deselect it.
The selection mode is controlled with the DataPointSelectionMode property of ChartSelectionBehavior.
Example 6: Setting DataPointSelectionMode
Figure 4: Multiple selection
Hit Test Area
The hit test area is the space in the data point visual where you can click to select it. By default the area matches the layout slot (position and size) of the data point visual.
To change expand the size of the hit test area, set the HitTestMargin property of ChartSelectionBehavior. This is useful when showing small data point visuals that are hard to click.
Example 7: Setting HitTestMargin
Events
ChartSelectionBehavior exposes the SelectionChanged event which is raised when a data point is selected or deselected.
Example 8: Subscribing to SelectionChanged
Example 9: SelectionChanged event handler
Programmatic Selection
To get the selected data points, use the SelectedPoints collection of the chart control. The collection is read-only, so it cannot be replaced, data bound or modified.
Example 10: Getting the selected data points
To select or deselect a data point, set the IsSelected property of the corresponding DataPoint object.
Example 11: Selecting a data point from a PointSeries
See how to implement a custom behavior allowing SelectedPoints data binding in the BindingSelectedItemsToViewModel SDK example.