Skip to main content Skip to footer

How To: Use Mouse Events on PlotElements with ChartPanel

ChartPanel makes C1Chart for Silverlight quite flexible and helps in laying several elements over chart view. This helps in implementing features like Mouse Markers. However, if one uses the ChartPanel for enabling mouse markers, the events added to PlotElements don't work because ChartPanel listens to these events and doesn't pass them to the PlotElements. We may simply set the ChartPanel background to null to workaround the issue; however we lose the marker feature. Lets see how one can realistically workaround this behavior. Say, I need to show a message box showing DataPoint values when a specific PlotElement is clicked. And obviously, I want markers enabled too. The workaround is to set the ChartPanel background to null on MouseLeftButtonDown event on ChartPanel. One can then listen to the MouseLeftButtonUp event on PlotElement, do the required stuff there and set the ChartPanel background back to transparent, so this way ‘marker’ feature still remains enabled. Following code snippet shows the above implementation.


chart.Data.Children[0].PlotElementLoaded += (s, e) =>  
{  
  if (!(s is Lines))  
  {  
    var pe = s as PlotElement;  
    pe.MouseLeftButtonUp += (s1, e1) =>  
    {  
      MessageBox.Show(string.Format("Point Clicked {0}:{1}", (pe.DataPoint as C1.WPF.C1Chart.XYDataSeries.XYDataPoint).X,       (pe.DataPoint as C1.WPF.C1Chart.XYDataSeries.XYDataPoint).Y));  
      pnl.Background = new SolidColorBrush(Colors.Transparent);  
    };  
  }  
};  


chart.PreviewMouseLeftButtonUp += (s, e) =>  
{  
  // to handle the scenario when ChartPanel is directly clicked  
  pnl.Background = new SolidColorBrush(Colors.Transparent);  
};  

pnl.MouseLeftButtonDown += (s, e) =>  
{  
  pnl.Background = null;  
};  

Refer to the attached sample for complete implementation. Download Sample

MESCIUS inc.

comments powered by Disqus