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).

why don't you just create a custom control with a few DP's that correspond to the render type's you require, like `Offices`, `Nodes`, `Points`, then from your VM have these DP's bound to your data and in each DP's propertychanged callback, access the NewValue from incoming args and render your Canvas as you see fit. — Viv, Jul 09 '13 at 13:05

score 1 · Answer 1 · answered Jul 09 '13 at 13:04

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.

Using Canvas with multiple data bindings (and different shapes)

1 Answers1