Selection Mode and Point/Series highlighting

I have been looking at the SelectionMode for Charts and DataSeries, and it seems to work nicely for points. However, it would also be very nice if when all points of a series are selected the corresponding point in the Legend is also highlighted, and vice-versa. This makes it much easier for the user to visualize a particular series when many series are displayed (my users always seem to want to graph a gazillion things at once). Is this possible? Beyond this, it would be nice if the lines for a line series (or even bars or whatever) could also be highlighted in a similar way--i.e., if the user clicks on a line the entire line is highlighted, as well as the legend entry. And when a user clicks on a legend entry the corresponding line is also highlighted. Maybe this is asking for a lot, but the Windows Forms chart control I have been using (ChartFX) does this and my users are accustomed to it.

Thanks

Peter

Hello Peter

I have attached a sample that demonstrates the behaviour you have described. To run the sample, make sure to include a reference to your copy of the Mindscape.WpfElements.dll. You can run the sample right now, but the behaviour for the scatter-series will require an update from the next nightly builds (available from about 1200 GMT).

So when you run the sample, move the mouse over the legend and you will see it has interactivity. Click on one of the legend items and it will become selected, as well as the data line that corresponds to it. Click on one of the lines on the chart, and the matching legend item will become selected.

All data series have an IsSelected property which was added a little while ago. This property is to say that the series itself is selected as opposed to individual data points. In MainWindow.xaml of the sample I attached, I have defined a custom legend item template which includes a toggle button behind the icon and legend label. The LegendItem class has a DataSeries property which gets the data series that it corresponds to. This gives you access to the IsSelected property. The IsChecked property of the toogle button simply has a TwoWay binding to DataSeries.IsSelected which gets you the behaviour of linking legend item selection to data series selection.

To include this custom legend item template into the chart, you need to create a small Legend style and use a setter to set the ItemTemplate property to be the custom legend item template. Then set the LegendStyle property of the chart to be this Legend style. This is all shown in the sample.

To give lines a selection visual state, you need to create a custom line style like the following:

<Style x:Key="SelectableLineStyle" TargetType="Path">
  <Setter Property="StrokeThickness" Value="2" />
  <Style.Triggers>
    <DataTrigger Binding="{Binding IsSelected}" Value="True">
      <Setter Property="StrokeThickness" Value="5" />
    </DataTrigger>
  </Style.Triggers>
</Style>

The DataContext of the Path/line is the data series it belongs to. Again this gives you access to the IsSelected property so you can use a trigger to change the thickness or color of the line. You can use this custom style to set the LineStyle property of a line based data series.

Please let me know if you have any questions about this. - Jason

Hi Jason,

Your solution works great. Thanks!

Peter

Hi Jason,

I did notice one issue of minor concern with this solution. In the sample project you attached and in the my own project when I use the SelectableLineStyle I always get the following type of message in the output:

System.Windows.Data Error: 39 : BindingExpression path error: 'IsSelected' property not found on 'object' ''LegendItem' (HashCode=52786977)'. BindingExpression:Path=IsSelected; DataItem='LegendItem' (HashCode=52786977); target element is 'Path' (Name=''); target property is 'NoTarget' (type 'Object')

This is repeated for each series that the style applies to. Everything seems to work, but I find these kinds of messages distracting because I have to figure out whether they are important or not. Is there any way to avoid such messages? I am building many charts with many series and it can produce a lot of such output that slows thing up (at least in debug mode).

Thanks

Peter

Hello Peter

I agree, those kinds of messages can be quite distracting. A solution to avoiding them would be to set the LegendIconTemplate property of the troublesome series. Here is an example of a line series legend icon:

<ms:LegendItemToChartSymbolBorderBrushConverter x:Key="ChartSymbolBorderConverter" />
<ms:LegendItemToChartSymbolBackgroundConverter x:Key="ChartSymbolBackgroundConverter" />
<ms:LegendItemToLineStrokeConverter x:Key="LineStrokeConverter" />
<ms:LegendItemToDashArrayConverter x:Key="DashArrayConverter" />

<DataTemplate x:Key="LineSeriesLegendIcon">
  <Grid Margin="0,2,0,2" SnapsToDevicePixels="True">
    <Path Data="M 0 0 L 38 0" Stroke="{Binding Converter={StaticResource LineStrokeConverter}}" StrokeThickness="2"
          StrokeDashArray="{Binding Converter={StaticResource DashArrayConverter}}" Stretch="None"
          VerticalAlignment="Center" HorizontalAlignment="Center" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" />
    <ms:ChartSymbol IsHitTestVisible="False" Style="{Binding DataSeries.SymbolStyle}" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center"
                    BorderBrush="{Binding Converter={StaticResource ChartSymbolBorderConverter}}" SnapsToDevicePixels="True"
                    Background="{Binding Converter={StaticResource ChartSymbolBackgroundConverter}}" />
  </Grid>
</DataTemplate>

The difference between this template and the default one provided with WPF Elements is this one does not apply the LineStyle to the path. This prevents the IsSelected trigger from being used in the legend icon. To use this template, simply set the LegendIconTemplate property of all the line series.

Please let me know if you need code examples for legend icon templates for other series. - Jason

Hi Jason,

Your solution worked great. Thanks.

Peter