title: Using Canvas with multiple data bindings (and different shapes)
body: <p>I'm developing a WPF application using the MVVM pattern. In my application I have a canvas that is supposed to display several different shapes. These shapes describe a warehouse (a.k.a storage) and the warehouse contents.</p>
  
  <p>To display only the warehouse (which is described by a <code>ObservableCollection&lt;Point&gt;</code>) I use the following code snippet</p>
  
  <pre><code>    &lt;Canvas Width="{Binding StorageWidth, Mode=OneWay}" Height="{Binding StorageHeight, Mode=OneWay}"&gt;
       &lt;Polygon Points="{Binding StorageVertices, Mode=OneWay, Converter={StaticResource PointCollectionConverter}}" Stroke="Gray" StrokeThickness="30"&gt;
        &lt;Polygon.Fill&gt;
         &lt;SolidColorBrush Color="DarkRed" Opacity="0.25" /&gt;
        &lt;/Polygon.Fill&gt;
       &lt;/Polygon&gt;
      &lt;/Canvas&gt;
  </code></pre>
  
  <p>To this canvas, I want to add rectangles (for describing offices within the storage) and circles (to describe nodes within the storage). These are defined in my view model:</p>
  
  <pre><code>class Node
  {
   // ...
   Point Position { get; private set; }
  }
  
  class Office
  {
   // ...
   ObservableCollection&lt;Point&gt; Vertices { get; private set; }
  }
  
  public class ViewModel : ViewModelBase
  {
   // ...
   ObservableCollection&lt;Node&gt; Nodes { get; private set; }
   ObservableCollection&lt;Office&gt; Offices { get; private set; }
  
   ObservableCollection&lt;Point&gt; StorageVertices { get; private set; } // Already displayed on the canvas
  }
  </code></pre>
  
  <p>How can I display these on the canvas, alongside with the storage area by using data bindings? I know that I could have used <code>ItemsControl</code> normally, but now I have several different collections/sources and they are supposed to be described in different ways (<code>Node</code>s are <code>Circle</code>s whilst <code>Office</code>s are <code>Rectangle</code>s).</p>