Dynamically Add Custom Control with Binding ObservableCollection

• I am tring to add Custom controls(live chart) by using stack panel dynamically. I have tried many times with below code and just text datas it looks fine but piechart does not.

when run as like below VS Designer hangs. If someone have experience about this, any help would be appreciated.

In XAML

<ItemsControl Grid.Row="2" ItemsSource="{Binding Model.PieChartnode}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>
                        <lvchart:PieChart Grid.Row="0" LegendLocation="None" Style="{StaticResource PieChartStyle}" Margin="10,10"
                                      Series="{Binding PieChartSeries}"/>
                        <TextBlock Grid.Row="1" Text="{Binding PieChartName}" Style="{StaticResource TextBlockAccentContent}"/>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

and code

public class PieChartNode
    {
        public SeriesCollection? PieChartSeries { get; set; }
        public string? PieChartName { get; set; }
        public PieChartNode(SeriesCollection? pieChartSeries, string? pieChartName)
        {
            PieChartSeries = pieChartSeries;
            PieChartName = pieChartName;
        }
    }
    public class PieChartDisplayModel : ViewModelBase
    {
        private SeriesCollection? pieChartSeriesCollection;
        public SeriesCollection? PieChartSeriesCollection
        { get => pieChartSeriesCollection; set => pieChartSeriesCollection = value; }

        private ObservableCollection<PieChartNode>? pieChartNode;
        public ObservableCollection<PieChartNode>? PieChartnode
        { get => pieChartNode; set => pieChartNode = value; }
        public PieChartDisplayModel()
        {
            PieChartSeriesCollection = new SeriesCollection
            {
                new PieSeries
                {
                    Title = "Chrome",
                    Values = new ChartValues<ObservableValue> { new ObservableValue(8) },
                    DataLabels = true
                },
                new PieSeries
                {
                    Title = "Mozilla",
                    Values = new ChartValues<ObservableValue> { new ObservableValue(6) },
                    DataLabels = true
                },
                new PieSeries
                {
                    Title = "Opera",
                    Values = new ChartValues<ObservableValue> { new ObservableValue(10) },
                    DataLabels = true
                },
                new PieSeries
                {
                    Title = "Explorer",
                    Values = new ChartValues<ObservableValue> { new ObservableValue(4) },
                    DataLabels = true
                }
            };

            PieChartnode = new ObservableCollection<PieChartNode>();
            for (int i = 0; i < 5; i++)
            {
                string nodeName = string.Format("Pie Chart {0}", i);
                PieChartnode.Add(new PieChartNode(PieChartSeriesCollection, nodeName));
            }

        }

And Result like this Image.

Result

I am expecting those Pies display by feeded datas, but PieCharts gone...

someone has any ideas? I am currently using Nuget packages

• livecharts.wpf 0.97
• materialdesign 4.6.1

you probably need one SeriesCollection for each chart, not one for all charts:

public class PieChartDisplayModel : ViewModelBase
{
    private SeriesCollection GetPieChartSeriesCollection()
    {
        return new SeriesCollection
        {
            new PieSeries
            {
                Title = "Chrome",
                Values = new ChartValues<ObservableValue> { new ObservableValue(8) },
                DataLabels = true
            },
            new PieSeries
            {
                Title = "Mozilla",
                Values = new ChartValues<ObservableValue> { new ObservableValue(6) },
                DataLabels = true
            },
            new PieSeries
            {
                Title = "Opera",
                Values = new ChartValues<ObservableValue> { new ObservableValue(10) },
                DataLabels = true
            },
            new PieSeries
            {
                Title = "Explorer",
                Values = new ChartValues<ObservableValue> { new ObservableValue(4) },
                DataLabels = true
            }
        };
    }

    private ObservableCollection<PieChartNode>? pieChartNode;
    public ObservableCollection<PieChartNode>? PieChartnode
    { get => pieChartNode; set => pieChartNode = value; }
    public PieChartDisplayModel()
    {
        PieChartnode = new ObservableCollection<PieChartNode>();
        for (int i = 0; i < 5; i++)
        {
            string nodeName = string.Format("Pie Chart {0}", i);
            PieChartnode.Add(new PieChartNode(GetPieChartSeriesCollection(), nodeName));
        }
    }
}