c# - 您可以使用 MVVM 模式将多个 LineSeries 绑定(bind)到 WPF 中的 oxyplot 吗？

Question

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

模型

汽车.cs

看法

DisplayView.xaml

DisplayView.xaml.cs

View 模型

DisplayViewModel.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>

这将按预期显示三个单独的汽车名称，因此我知道我已正确连接数据源。然而，包装这个 <ItemsControl>...</ItemsControl>带有 <oxy:Plot><oxy:Plot.Series>...</oxy:Plot.Series></oxy:Plot> 的元素并更改 <TextBlock />元素到 <oxy:LineSeries />元素并绑定(bind)其 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". .

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}" /> .我还创建了一个 PlotModel在 DisplayViewModel.cs ，据我了解，MVVM 模式很好。我循环浏览 Cars通过执行以下操作添加不同的系列:

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

我现在在哪里制作 PlotData一个 LineSeries在 Car.cs .这在一张图中显示了三条线。