Using Canvas with multiple data bindings (and different shapes)

Question

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.

To display only the warehouse (which is described by a ObservableCollection<Point>) I use the following code snippet

    <Canvas Width="{Binding StorageWidth, Mode=OneWay}" Height="{Binding StorageHeight, Mode=OneWay}">
     <Polygon Points="{Binding StorageVertices, Mode=OneWay, Converter={StaticResource PointCollectionConverter}}" Stroke="Gray" StrokeThickness="30">
      <Polygon.Fill>
       <SolidColorBrush Color="DarkRed" Opacity="0.25" />
      </Polygon.Fill>
     </Polygon>
    </Canvas>

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:

class Node
{
 // ...
 Point Position { get; private set; }
}

class Office
{
 // ...
 ObservableCollection<Point> Vertices { get; private set; }
}

public class ViewModel : ViewModelBase
{
 // ...
 ObservableCollection<Node> Nodes { get; private set; }
 ObservableCollection<Office> Offices { get; private set; }

 ObservableCollection<Point> StorageVertices { get; private set; } // Already displayed on the canvas
}

How can I display these on the canvas, alongside with the storage area by using data bindings? I know that I could have used ItemsControl normally, but now I have several different collections/sources and they are supposed to be described in different ways (Nodes are Circles whilst Offices are Rectangles).

Answer 1

Since you cannot use one Canvas as ItemsPanel for multiple ItemsControls, you might find a way to make them into one List, at least Nodes and Offices. You might try to find an abstraction for them or use Object instead.

Now you have an ObservableCollection with a Storage. You can use ItemsControl with Canvas as ItemsPanel using DataTemplate to draw all Nodes and Offices on it. Next is adding Storage. I think you have two choice, maybe other people have better, either put it into the list also and add another DataTemplate or write your customized Canvas, exposing a dependency property for binding to Storage and override OnManipulationDelta method. Frankly I never tried second and cannot say it will work but you can refer to this article for details: http://blogs.msdn.com/b/mim/archive/2013/04/16/winrt-create-a-custom-itemspanel-for-an-itemscontrol.aspx

Hope it will help.