Search code examples
c#wpfxamlwpftoolkit

How to customize a tooltip for each individual datapoint in a wpf toolkit lineseries chart?


I have seen several questions about doing a custom tooltip for a single line series.

I need a custom tool-tip for each data-point. I would like to add more to the tool-tip than just the dependent value path and the independent value path.

Example I have 2 data points on the same line one with a value(Y-axis) of 2, date(x-axis) of 4/28/2016, and configuration of A. The other has a value of 3, date of 4/29/2016, and configuration of B.

How would I also show the configurations? This is all done in code behind because I have a dynamic number of lineseries. So I can't just assign a style to each lineseries in the xaml.

var MyLineSeries = new LineSeries();
lMyLineSeries.DependentValuePath = "Y";
lMyLineSeries.IndependentValuePath = "X";
lMyLineSeries.DataPointStyle = lToolTipDataPointStyle;

This is my code for creating the tool tip style.

var lToolTipDataPointStyle = new Style(typeof(LineDataPoint));
var lTemplate = new ControlTemplate(typeof(LineDataPoint));
var lGridElement = new FrameworkElementFactory(typeof(Border));

//Tooltip
var lStackPanel = new StackPanel();

var lValueContentControl = new ContentControl();
lValueContentControl.SetBinding(ContentControl.ContentProperty, new Binding(myLineSeries.DependentValuePath));
lValueContentControl.ContentStringFormat = "Value: {0}";

var lConfigurationContentControl = new ContentControl();
lConfigurationContentControl.SetBinding(ContentControl.ContentProperty, new Binding())//This is what Idk what to bind to???

lConfigurationContentControl.ContentStringFormat = "Configuration: {0}";

lStackPanel.Children.Add(lValueContentControl);
lStackPanel.Children.Add(lConfigurationContentControl);

lGridElement.SetValue(ToolTipService.ToolTipProperty, lStackPanel);


var lEllipseElement = new FrameworkElementFactory(typeof(Ellipse));
lEllipseElement.SetValue(Ellipse.StrokeThicknessProperty, new TemplateBindingExtension(Border.BorderThicknessProperty));
lEllipseElement.SetValue(Ellipse.StrokeProperty, new TemplateBindingExtension(Border.BorderBrushProperty));
lEllipseElement.SetValue(Ellipse.FillProperty, new TemplateBindingExtension(Grid.BackgroundProperty));

lGridElement.AppendChild(lEllipseElement);
lTemplate.VisualTree = lGridElement;

var lTemplateSetter = new Setter();
lTemplateSetter.Property = LineDataPoint.TemplateProperty;
lTemplateSetter.Value = lTemplate;

lToolTipDataPointStyle.Setters.Add(lTemplateSetter);

return lToolTipDataPointStyle;

Solution

  • I figured it out by using the Tag on the Line series.

    myLineSeries.Tag = "Configuration";
    var lConfigurationContentControl = new ContentControl();
    lConfigurationContentControl.SetBinding(ContentControl.ContentProperty, new Binding(myLineSeries.Tag.ToString()))
    
    lConfigurationContentControl.ContentStringFormat = "Configuration: {0}";