Multiple plot controls in a listbox (WPF)

Jun 27, 2013 at 7:13 PM
Edited Jun 27, 2013 at 8:39 PM
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
Jul 2, 2013 at 1:59 PM
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... :-)
Jul 2, 2013 at 2:29 PM
Edited Jul 2, 2013 at 2:29 PM
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));
    }
  }
Jul 2, 2013 at 10:24 PM
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>
Jul 3, 2013 at 1:28 PM
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.