Wiązanie płótna WPF Canvas Children to an ObservableCollection

Question

W mojej aplikacji WPF mam Canvas, w którym robię trochę rysunku. Wcześniej zajmowałem się rysunkiem w kodzie, ale teraz wszystko zapisałem na ViewModelu. To daje mi pewne wyzwania ..

Mam kilka obiektów InkPresenter zawierających obrysy. Earier dodałem je jako dzieci na płótnie w kodzie tyłu - tak:

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

Teraz - nie budować InkPresenter w kodzie opóźnieniem w XAML, który przechowuje _myCanvas muszę to zrobić inaczej. Co chciałbym zrobić, to stworzyć InkPresenter i dodać go do kolekcji:

public ObservableCollection<InkPresenter> Drawings; 

Mój problem jest teraz jak związać płótna do tego ObservableCollection - i mają InkPresenters wyświetlany po dodaniu do kolekcji. Czy mogę to w jakiś sposób osiągnąć za pomocą Wiązania Danych?

Answer 1

Myślę, że możesz to zrobić pod numerem ItemsControl + ItemsPanelTemplate. Tak:

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

Aby dowiedzieć się więcej na temat tej metody można znaleźć w Dr.WPF: ItemsControl: A to Z (P is for Panel)

Answer 2

Rozwiązanie Anvaka sugerowane jest super, ale jak John Bowen podkreślić trzeba wiedzieć nieco więcej , jeśli chcesz faktycznie powiązać swoje produkty z właściwościami dołączonymi do Canvas.

Oto przykład, w jaki sposób wiążą się Canvas.Left i Canvas.Top:

<ItemsControl ItemsSource="{Binding YourCollection}"> 
<ItemsControl.ItemsPanel> 
    <ItemsPanelTemplate> 
     <Canvas /> 
    </ItemsPanelTemplate> 
</ItemsControl.ItemsPanel> 
<ItemsControl.ItemContainerStyle> 
    <Style TargetType="ContentPresenter"> 
     <Setter Property="Canvas.Left" Value="{Binding YourModelLeft}" /> 
     <Setter Property="Canvas.Top" Value="{Binding YourModelTop}" /> 
    </Style> 
</ItemsControl.ItemContainerStyle> 

BTW, znalazłem rozwiązanie na this question po Próbowałem sugestię Anvaka, w którym wiązania nie działa .

Mam nadzieję, że to pomoże innym, szukając tej samej odpowiedzi.