您可以使用 MVVM 模式将多个 LineSeries 绑定到 WPF 中的 oxyplot 吗？

Question

我正在尝试在我使用 MVVM 模式的 Oxyplot 中使用 C# 在 WPF 中的一个<oxy:PlotView />元素中绘制多个LineSeries元素。 假设我有一个（假设的）情况，我正在跟踪位置随时间变化的汽车。 假设我有以下文件：

• 模型
  • 汽车.cs
• 看法
  • 显示视图.xaml
  • 显示视图.xaml.cs
• 视图模型
  • 显示视图模型.cs

在初始化时，我创建了三个汽车元素（在DisplayViewModel.cs ： Cars = new List<Car>{ new Car(), ...}; ）以及它们相应的位移与时间数据PlotData = new List<DataPoint>{ new DataPoint(0,1), new DataPoint(1,4), ...}; 和CarName 。

DisplayView.xaml (1)：

<ListBox ItemsSource="{Binding Path=Cars}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <oxy:Plot Title="{Binding CarName}" Height="400" Width="500">
                    <oxy:Plot.Series>
                        <oxy:LineSeries ItemsSource="{Binding Path=PlotData}"/>
                    </oxy:Plot.Series>
                </oxy:Plot>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

这按预期工作。 它显示了一个带有三个（单独的）图形的<ListBox /> 。 然而，这不是我想要实现的目标。 我想做如下事情：

DisplayView.xaml (2)：

<ItemsControl ItemsSource="{Binding Path=Cars}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=CarName}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这会按预期显示三个单独的汽车名称，因此我知道我已正确连接数据源。 但是，使用<oxy:Plot><oxy:Plot.Series>...</oxy:Plot.Series></oxy:Plot>包装这个<ItemsControl>...</ItemsControl>元素并更改<TextBlock />元素到<oxy:LineSeries />元素并将其ItemsSource属性绑定到前面提到的DataPoint字段会产生错误A value of type 'ItemsControl' cannot be added to a collection or dictionary of type 'collection`1'. 和The specified value cannot be assigned to the collection. The following type was expected: "Series". The specified value cannot be assigned to the collection. The following type was expected: "Series". .

DisplayView.xaml（不起作用）：

<oxy:Plot Title="Displacement plot">
    <oxy:Plot.Series>
        <ItemsControl ItemsSource="{Binding Path=Cars}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <oxy:LineSeries ItemsSource="{Binding Path=PlotData}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </oxy:Plot.Series>
</oxy:Plot>

我是 MVVM 模式的新手 - 以及一般的 C# 和 WPF 编程 - 我看到DisplayView.xaml.cs代码隐藏文件需要为空。 使用后面的代码时，我可以将三个 LineSeries 显示在一张图中，但我正在尝试利用 MVVM 的强大功能。 有人可以告诉我应该如何解决这个问题吗？ 我只是没有足够的经验（还）来玩代码，所以一些解释将不胜感激。 我需要添加哪些文件，需要创建哪些方法以及在哪里创建这些文件？ 这甚至可能以我设想的方式实现吗？

亲切的问候，

汤姆

Answer 1

我想我掌握了这个概念（在这篇文章中写下我的想法和问题之后），所以我正在回答我自己的问题。 在DisplayView.xaml我添加了一个<PlotView /> ： <oxy:PlotView x:Name="DisplayPlotView" Model="{Binding PlotModel}" /> 。 我还在DisplayViewModel.cs创建了一个PlotModel ，据我所知，MVVM 模式很好。 我循环遍历Cars以通过执行以下操作添加不同的系列：

foreach(Car car in Cars)
    {
        PlotModel.Series.Add(car.PlotData);
    }

当我现在所做的PlotData一个LineSeries在Car.cs 。 这在一张图中显示了三条线。