XAML List<LineSeries> binding to chart Series

Question

I have MVVM silverlight app with toolkit charts. In view model I created ObservableCollection property:

    private ObservableCollection<LineSeries> _lines = new ObservableCollection<LineSeries>();
    public ObservableCollection<LineSeries> Lines
    {
        get { return _lines; }
        set
        {
            _lines = value;
            NotifyPropertyChanged("Lines");
        }
    }

Then in some method I populate this collection with dynamic count lines:

            List<SolidColorBrush> colors = BS2ColorSetHelper.GetSetColors();
            for (int i = 0; i < remainderData.Count; i++)
            {
                LineSeries line = (colors.ElementAtOrDefault(i) != null)
                    ? CreateNewLineSeriesWithColor(remainderData[i].DenominationName, remainderData[i].Coords, colors[i])
                    : CreateNewLineSeries(remainderData[i].DenominationName, remainderData[i].Coords);

                line.Name = remainderData[i].DenominationName;
                Lines.Add(line);
            }
            .........

Now I want to bind this ObservableCollection to toolkit chart series.

    <toolkit:Chart Name="chart">
        <toolkit:Chart.Series>
            ????
        </toolkit:Chart.Series>
    </toolkit:Chart>

I have tried

Series="{Binding Path=Lines}"

but it doesn't work. Visual Studio shows an error: Object of type 'System.Windows.Data.Binding' cannot be converted to type 'System.Collections.ObjectModel.Collection`1[System.Windows.Controls.DataVisuali‌zation.Charting.ISeries]'. I think it's because Series are not dependency property.

depends on the property that is used in the control Chart you probably have to look at the documentation from the control maker — User1

Oblomingo Oblomingo · Accepted Answer · 2014-10-15T06:43:13

Ok, we can't bind LineSeries to Series because Series are not Dependency property. So we can create new UserControl with this dependency properties:

public class MultiChart : Chart
{
    public IEnumerable SeriesSource
    {
        get
        {
            return (IEnumerable)GetValue(SeriesSourceProperty);
        }
        set
        {
            SetValue(SeriesSourceProperty, value);
        }
    }

    public static readonly DependencyProperty SeriesSourceProperty = DependencyProperty.Register(
        name: "SeriesSource",
        propertyType: typeof(IEnumerable),
        ownerType: typeof(MultiChart),
        typeMetadata: new PropertyMetadata(
            defaultValue: default(IEnumerable),
            propertyChangedCallback: new PropertyChangedCallback(OnSeriesSourceChanged)
        )
    );

    private static void OnSeriesSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        IEnumerable newValue = (IEnumerable)e.NewValue;
        MultiChart source = (MultiChart)d;

        source.Series.Clear();

        foreach (LineSeries item in newValue)
        {
            source.Series.Add(item);
        }
    }
}

Then we just bind LineSeries to newly created property:

    <common:MultiChart Name="chart"
                       Title="{Binding Path=Title}"
                       SeriesSource="{Binding Path=Lines}" />

The View Model will be:

public class ChartDenominationViewModel : ViewModel
{
    private string _title;

    public string Title
    {
        get { return _title; }
        set
        {
            _title = value;
            NotifyPropertyChanged("Title");
        }
    }

    private ObservableCollection<LineSeries> _lines = new ObservableCollection<LineSeries>();

    public ObservableCollection<LineSeries> Lines
    {
        get { return _lines; }
        set
        {
            _lines = value;
            NotifyPropertyChanged("Lines");
        }
    }
}

XAML List<LineSeries> binding to chart Series

2 Answers