[英]Can you bind multiple LineSeries to an oxyplot in WPF using MVVM pattern?
I am trying to plot multiple LineSeries
elements in one <oxy:PlotView />
element in WPF using C# in Oxyplot where I am using the MVVM pattern.我正在尝试在我使用 MVVM 模式的 Oxyplot 中使用 C# 在 WPF 中的一个
<oxy:PlotView />
元素中绘制多个LineSeries
元素。 Say I have the (hypothetical) situation that I am tracking cars with a position as a function of time.假设我有一个(假设的)情况,我正在跟踪位置随时间变化的汽车。 Say I have the following files:
假设我有以下文件:
On initialization I create three car elements (in DisplayViewModel.cs
: Cars = new List<Car>{ new Car(), ...};
) with their corresponding displacement vs. time data PlotData = new List<DataPoint>{ new DataPoint(0,1), new DataPoint(1,4), ...};
在初始化时,我创建了三个汽车元素(在
DisplayViewModel.cs
: Cars = new List<Car>{ new Car(), ...};
)以及它们相应的位移与时间数据PlotData = new List<DataPoint>{ new DataPoint(0,1), new DataPoint(1,4), ...};
and CarName
.和
CarName
。
DisplayView.xaml (1): 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>
This works as expected.这按预期工作。 It shows a
<ListBox />
with the three (separate) graphs.它显示了一个带有三个(单独的)图形的
<ListBox />
。 However this is not what I am trying to achieve.然而,这不是我想要实现的目标。 I would like to do something like the following:
我想做如下事情:
DisplayView.xaml (2): DisplayView.xaml (2):
<ItemsControl ItemsSource="{Binding Path=Cars}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=CarName}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This displays the three individual car names as is expected, so I know I have the data source connected correctly.这会按预期显示三个单独的汽车名称,因此我知道我已正确连接数据源。 However, wrapping this
<ItemsControl>...</ItemsControl>
element with <oxy:Plot><oxy:Plot.Series>...</oxy:Plot.Series></oxy:Plot>
and changing the <TextBlock />
element to a <oxy:LineSeries />
element and binding its ItemsSource
property to the earlier mentioned DataPoint
field yields the errors A value of type 'ItemsControl' cannot be added to a collection or dictionary of type 'collection`1'.
但是,使用
<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'.
and 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".
The specified value cannot be assigned to the collection. The following type was expected: "Series".
. .
DisplayView.xaml (doesn't work): 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>
I am new to the MVVM pattern - and C# and WPF programming in general - and I see the DisplayView.xaml.cs
code-behind file needs to be empty.我是 MVVM 模式的新手 - 以及一般的 C# 和 WPF 编程 - 我看到
DisplayView.xaml.cs
代码隐藏文件需要为空。 I can get the three LineSeries to display in one graph when using the code behind, but I am trying to utilize the power of MVVM.使用后面的代码时,我可以将三个 LineSeries 显示在一张图中,但我正在尝试利用 MVVM 的强大功能。 Can someone give me pointers on how I should fix this?
有人可以告诉我应该如何解决这个问题吗? I am just not experienced enough (yet) to play around with the code, so some explanation would be appreciated.
我只是没有足够的经验(还)来玩代码,所以一些解释将不胜感激。 What files do I need to add, what methods do I need to create and where do I create these?
我需要添加哪些文件,需要创建哪些方法以及在哪里创建这些文件? Is this even possible in the way I envision?
这甚至可能以我设想的方式实现吗?
Kind regards,亲切的问候,
Tom汤姆
I think I grasp the concept (after writing down my thoughts and questions in this post), so I am answering my own question.我想我掌握了这个概念(在这篇文章中写下我的想法和问题之后),所以我正在回答我自己的问题。 In
DisplayView.xaml
I added a <PlotView />
as such: <oxy:PlotView x:Name="DisplayPlotView" Model="{Binding PlotModel}" />
.在
DisplayView.xaml
我添加了一个<PlotView />
: <oxy:PlotView x:Name="DisplayPlotView" Model="{Binding PlotModel}" />
。 I also created a PlotModel
in DisplayViewModel.cs
, which is fine by the MVVM-pattern, as far as I understand.我还在
DisplayViewModel.cs
创建了一个PlotModel
,据我所知,MVVM 模式很好。 I loop through Cars
to add the different series by doing:我循环遍历
Cars
以通过执行以下操作添加不同的系列:
foreach(Car car in Cars)
{
PlotModel.Series.Add(car.PlotData);
}
Where I now made the PlotData
a LineSeries
in the Car.cs
.当我现在所做的
PlotData
一个LineSeries
在Car.cs
。 This shows the three lines in one graph.这在一张图中显示了三条线。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.