If you have a chart with multiple series and need to provide UI to show/hide series, you can use styling on the legend box items to display a checkbox for each series.
xmlns:cfxConverters="http://schemas.softwarefx.com/chartfx/wpf/80/converters"
<DataTemplate x:Key="CheckLegend">
<DataTemplate.Resources>
<cfxConverters:VisibilityToBooleanConverter x:Key="VisibilityToBool"
FalseVisibility="Hidden"/>
</DataTemplate.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<CheckBox Margin="2,0" VerticalAlignment="Center"
IsChecked="{Binding Path=Visibility,
Converter={StaticResource VisibilityToBool}}" />
<Rectangle Stroke="{Binding Path=Stroke}" Fill="{Binding Path=Fill}"
Grid.Column="1" Width="12" Height="12" VerticalAlignment="Center"
Margin="2,0" />
<TextBlock FontFamily="{Binding Path=FontFamily}"
FontSize="{Binding Path=FontSize}" Text="{Binding Path=Text}"
Grid.Column="2" VerticalAlignment="Center" Margin="2,0" />
</Grid>
</DataTemplate>
Unfortunately templating items in the legend box has to be done in the code because of our API so we need to add the following line of code to our Window/Page Loaded event (we expect to support a XAML way to set these templates in future builds but you know what they say … shipping is also a feature)
LegendItemAttributes itemAttr = chart1.LegendBox.ItemAttributes[chart1.Series];
itemAttr.Template = (DataTemplate) FindResource("CheckLegend");
Where do all these bindings come from?
Note that you are styling a logical item we create internally in code, this class has information about the specific series (Fill, Stroke, Text) as well as “global” information about the legend box (FontFamily, FontSize, etc.). This class also will pick up individual changes applied to a specific series in the legend box when using the ItemAttributes[collection, index] API.
If you want to see which properties you can bind to you can use the following trick: setup one of your bindings with an invalid path, e.g. Stroke="{Binding Path=FooBar}" , debug your app and note the message in the Visual Studio output window that looks like this
System.Windows.Data Error: 39 : BindingExpression path error: 'FooBar' property not found on 'object'
''LegendSeriesItem' (HashCode=45082239)'. BindingExpression:Path=FooBar;
DataItem='LegendSeriesItem' (HashCode=45082239); target element is 'Rectangle' (Name='');
target property is 'Stroke' (type 'Brush')
This will give you the class name you are styling, in this case is called LegendSeriesItem. Then you can use ildasm or reflector to view all the properties exposed by this class.
The VisibilityToBoolConverter exposed in the ChartFX.WPF.Converters namespace is used to convert between Visibility and booleans and also allows you to specify whether false should be translated as Hidden or Collapsed. A Hidden series will not be plotted but will still interact with the axis while a collapsed series will not interact with the axis. This means that if Series1 goes from 0 to 100 and Series2 goes from 0 to 20 and you collapse Series1, now the Y axis will rescale to show 0 to 20, if Series1 instead was Hidden, the axis would remain showing the 0 to 100 range.
Fine tuning our template
Now is time to make sure our template works in other situations, if you switch the gallery to line you will quicky notice that our legend box items will still show rectangles even though Chart FX would have used markers in the legend box by default. We need to then change the Rectangle in our template as follows
xmlns:cfxControls="http://schemas.softwarefx.com/chartfx/wpf/80/controls"
<cfxControls:MarkerLegendControl Content="{Binding Path=Self}"
Grid.Column="1" Margin="2,0" />
This control requires an extra namespace that you should add to the root of your XAML node. Now a line chart will look like this
If you hover your mouse over one of the lines you will notice that the checkbox and series text do not get dimmed, this can be solved by adding a trigger to our datatemplate
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Dimmed}">
<DataTrigger.Value>
<sys:Boolean>True</sys:Boolean>
</DataTrigger.Value>
<Setter Property="Opacity" Value="0.25"/>
</DataTrigger>
</DataTemplate.Triggers>
Finally even though you might be using just a string to show what a series represents, Chart FX offers Content and ContentTemplate properties that allows you to provide visuals for your series, e.g.
<cfx:Chart.Series>
<cfx:SeriesAttributes Content="US">
<cfx:SeriesAttributes.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="pack://siteoforigin:,,,/Img/US.png" Width="16"/>
<TextBlock Text="United States" Margin="4,0,0,0"/>
</StackPanel>
</DataTemplate>
</cfx:SeriesAttributes.ContentTemplate>
</cfx:SeriesAttributes>
<cfx:SeriesAttributes Content="Canada">
<cfx:SeriesAttributes.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="pack://siteoforigin:,,,/Img/Canada.png" Width="16"/>
<TextBlock Text="Canada" Margin="4,0,0,0"/>
</StackPanel>
</DataTemplate>
</cfx:SeriesAttributes.ContentTemplate>
</cfx:SeriesAttributes>
</cfx:Chart.Series>
In this case, our TextBlock object in the legend box template will clearly be insufficient so we have to replace it with a ContentControl as follows
<Border Background="Transparent" Grid.Column="2"
Margin="2,0" VerticalAlignment="Center">
<ContentControl IsHitTestVisible="False" Content="{Binding Path=Content}"
ContentTemplate="{Binding Path=ContentTemplate}"
Foreground="{Binding Path=Foreground}"
FontFamily="{Binding Path=FontFamily}" FontSize="{Binding Path=FontSize}"
FontStyle="{Binding Path=FontStyle}" FontWeight="{Binding Path=FontWeight}"/>
</Border>
The reason why we set IsHitTestVisible to false in the ContentControl and wrap it in a border is due to highlighting, you can verifiy that if you remove the property and the border and move the Grid.Column and Margin to the ContentControl, hovering your mouse over the flag will not cause a series highlight.
Also important is the fact that we used ContentTemplate instead of setting up our visuals with the Content property. The reason for this is that we will try to use the Series.Content in several places, for example in the tooltips and a visual cannot be hosted in 2 places, by using ContentTemplate we are making sure that a copy of the visual is being created as needed.
JuanC
The following APIs were not harmed during the production of this post
LegendBox.ItemAttributes: To set properties for a collection of items (or specific item) in the legend box.
VisibilityToBoolConverter: Converts from visibility to bool including support to specify which visibility should be used for false.
MarkerLegendControl: To display a marker in the legend box adapting to the series gallery
Series.Content and Series.ContentTemplate: To change series representation in LegendBox, Tooltips and DataView.