Multiple plot controls in a listbox (WPF)

Oystein Bjorke 5 років тому • оновлено jcevangelista 3 роки тому 1
This discussion was imported from CodePlex

cpuserdi wrote at 2013-06-27 20:13:

I would like to show multiple independent plots using a listbox. I have a collection of PlotModels (collection derives from ObservableCollection) as my resource and ItemsSource for the ListBox. I set the ItemTemplate of the ListBox to a DataTemplate containing just the Plot control binding Model to the item. The PlotModels are initialized in the Window constructor in code behind. Rather than seeing the Plot at runtime, there is blank space. If I take the Plot out of the ListBox, it works fine on its own.

Is this possibly related to this issue? DataTemplate Issue

objo wrote at 2013-07-02 14:59:

This sounds like a bug, and I guess it is related to the DataTemplate issue.
Can you try to turn off virtualization in the ListBox control?
Does the same thing happen if you use an ItemsControl?
Can you create a small example we can use to test (I know it only takes 10min... :-)

cpuserdi wrote at 2013-07-02 15:29:

The XAML:
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:oxy="clr-namespace:OxyPlot.Wpf;assembly=OxyPlot.Wpf"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <local:PlotCollection x:Key="Plots" />
  </Window.Resources>
  <ListBox ItemsSource="{DynamicResource Plots}" ScrollViewer.CanContentScroll="False"
           VirtualizingStackPanel.IsVirtualizing="False">
    <ListBox.ItemTemplate>
      <DataTemplate>
        <oxy:Plot Model="{Binding}" />
      </DataTemplate>
    </ListBox.ItemTemplate>
  </ListBox>
</Window>
Additional code:
  public class PlotCollection : System.Collections.ObjectModel.ObservableCollection<OxyPlot.PlotModel> {
    public PlotCollection() {
      this.Add(new OxyPlot.PlotModel("Title 0"));
      this.Add(new OxyPlot.PlotModel("Title 1"));
      this.Add(new OxyPlot.PlotModel("Title 2"));
      this[0].Series.Add(new OxyPlot.Series.LineSeries("Series 0"));
      this[1].Series.Add(new OxyPlot.Series.LineSeries("Series 1"));
      this[2].Series.Add(new OxyPlot.Series.LineSeries("Series 2"));
      (this[0].Series[0] as OxyPlot.Series.LineSeries).Points.Add(
        new OxyPlot.DataPoint(0, 0));
      (this[0].Series[0] as OxyPlot.Series.LineSeries).Points.Add(
        new OxyPlot.DataPoint(1, 1));
      (this[1].Series[0] as OxyPlot.Series.LineSeries).Points.Add(
        new OxyPlot.DataPoint(0, 0));
      (this[1].Series[0] as OxyPlot.Series.LineSeries).Points.Add(
        new OxyPlot.DataPoint(1, 1));
      (this[2].Series[0] as OxyPlot.Series.LineSeries).Points.Add(
        new OxyPlot.DataPoint(0, 0));
      (this[2].Series[0] as OxyPlot.Series.LineSeries).Points.Add(
        new OxyPlot.DataPoint(1, 1));
    }
  }

objo wrote at 2013-07-02 23:24:

Thanks for the code!
I think you have to set the height of the plot control. But there is also something else that must be done...
It works for ItemsControl, but I am not sure why it doesn't for a ListBox.
    <ItemsControl ItemsSource="{DynamicResource Plots}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <oxy:Plot Model="{Binding}" Height="200"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

cpuserdi wrote at 2013-07-03 14:28:

The height requirement makes sense, it needs something to determine the size. I'm at a loss concerning the ListBox, but I think the ItemsControl will be good enough for what I needed.
CodePlex

@cpuserdi Sir I just wanna ask how do you convertn ObservableCollection to PlotModel?