How to add new view when instantiating a new view model - wpf

Question

New to WPF and not sure how to programmatically instantiate a new viewmodel that wraps a new chart and its data collection. Right now, it consists of the following, but not sure the optimal way to set it up.
class ChartViewModel
{
public ChartViewModel()
{
CartesianChart chart = new CartesianChart();
chart.Series = new SeriesCollection
{
new GLineSeries
{
Title = "Pressure",
Values = new GearedValues<double>(),
},
new GLineSeries
{
Title = "Pulse",
Values = new GearedValues<int>(),
}
};
}
}
And then, I need to add the new chart to the view. The CartesianChart object is the UIElement and it works as follows when I just test it in main window without this class.
stackPanel.Children.Add(chart);
But the class can't access the xaml it seems and I can't add the actual view model class since thats not a UIElement, only the chart is. Basically need to create a new chart instance every time the previous chart fills up with something like this:
ChartViewModel tempChart = new ChartViewModel();
chartRepo.Add(tempChart); //chart repo is a list of ChartViewModels
So it needs its own SeriesCollection and UIElement. Thanks for any recommendations.

Answer 1

If you want to dynamically add new charts you have to make use of DataTemplate to template the chart data.
The DataTemplate which consists of the chart is bound to a ChartDataModel. We can use a ListView to display the charts (data templates). A view model ChartViewModel serves as the ListView.ItemsSource and holds a set of ChartData.
Each ChartData maps to a new chart.
Whenever you create a new ChartDataModel in the ChartViewModel and add it to ChartModels, the ListView will automatically create a new chart.
The view:
<ListView ItemsSource="{Binding ChartModels}">
<ListView.DataContext>
<ChartViewModel />
</ListView.DataContext>
<ListView.ItemTemplate>
<DataTemplate DataType="ChartDataModel">
<CartesianChart>
<CartesianChart.Series>
<LineSeries Title="Pressure" Values="{Binding PressureValues}" />
<LineSeries Title="Pulse" Values="{Binding PulseValues}" />
</CartesianChart.Series>
</CartesianChart>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The model:
class ChartDataModel
{
public ChartDataModel()
{
this.PressureValues = new ChartValues<double>();
this.PulseValues = new ChartValues<double>();
}
public ChartValues<double> PressureValues { get; set; }
public ChartValues<double> PulseValues { get; set; }
}
The view model:
class ChartViewModel : INotifyPropertyChanged
{
public ChartViewModel()
{
this.ChartModels = new ObservableCollection<ChartDataModel>();
CreateNewChart();
}
private void CreateNewChart()
{
var newChartDataModel = new ChartDataModel()
{
PressureDataValues = new ChartValues<double>()
{
10, 20, 30, 40, 50
},
PulseDataValues = new ChartValues<double>()
{
100, 200, 300, 400, 500
}
};
this.ChartModels.Add(newChartDataModel);
}
private ObservableCollection<ChartDataModel> chartModels;
public ObservableCollection<ChartDataModel> ChartModels
{
get => this.chartModels;
set
{
if (Equals(value, this.chartModels)) return;
this.chartModels = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}

Answer 2

That ViewModel is instantiating a Chart, which is a UI element. ViewModels should only expose simple properties with public getters (and sometimes setters). Views should read those properties and change its UI elements accordingly. ViewModels usually don't contain UI elements.
That's to say, you should instantiate your chart inside the xaml (or xaml.cs), then bind its properties to the ViewModel. To link View and ViewModel, the view's DataContext property must be the ViewModel instance.
The ViewModel has direct access to your data source (e.g. a database) and translates that source into values ready to be consumed by the UI elements.
For example, your view may contain something like:
<livechart:CartesianChart>
<livechart:CartesianChart.Series>
<Series Title="{Binding FirstSeriesTitle}" Values="{Binding FirstSeriesValues}"/>
</livechart:CartesianChart.Series>
</livechart:CartesianChart>
While your ViewModel will have
public class ChartViewModel
{
public string FirstSeriesTitle { get; set; }
public IEnumerable<ChartPoint> FirstSeriesValues { get; set; }
}
I advise you to read some articles about the MVVM pattern to get a better grasp at it!
EDIT: :Since you need a variable number of charts, you should probably add an ItemsControl, and set its ItemsSource binded to an ObservableCollection of chartviewmodels. Set the itemscontrol's itemTemplate property to set the appearance of each item! (that's to say, chart and other ui elements)