Binding WPF Canvas Children to an ObservableCollection

Question

In my WPF application I have a Canvas in which I do some drawing. Earlier I handled the drawing in the code behind, but now I've factored everything out to a ViewModel. This gives me some challenges..

I have a few InkPresenter objects holding Strokes. Earier I added them as children to the Canvas in the code behind - like this:

// Build an InkPresenter: 
var someInkPresenter = BuildInkPresenter(..); 
//_myCanvas is the <Canvas> I want to display it in: 
_myCanvas.Children.Add(someInkPresenter); 

Now - not building the InkPresenter in the code-behind of the XAML that holds _myCanvas I need to do this differently. What I'd like to do is to create an InkPresenter and add it to a collection:

public ObservableCollection<InkPresenter> Drawings;

My problem now is how to bind the Canvas to this ObservableCollection - and have the InkPresenters displayed when added to the collection. Can I achieve this using Data Bindings somehow?

Answer 1

Hi Stian,

I think you can do this with ItemsControl + ItemsPanelTemplate. Like this:

  <ItemsControl ItemsSource="{Binding YourCollection}">
    <ItemsControl.ItemsPanel>
     <ItemsPanelTemplate>
      <Canvas />
     </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
   </ItemsControl>

To read more about this approach refer to Dr.WPF: ItemsControl: A to Z (P is for Panel)