multiple items in ItemsControl on a Canvas - wpf

Question

In the XAML below, please fill in the "WhatGoesHere" node and explain to me how that won't mess up the coordinates on the Canvas.
<ItemsControl ItemsSource="{Binding ViewModels}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<WhatGoesHere?>
<Path Stroke="CornflowerBlue" StrokeThickness="2">
<Path.Data>
<PathGeometry Figures="{Binding Figures}"/>
</Path.Data>
</Path>
<Path Stroke="Red" StrokeThickness="2">
<Path.Data>
<PathGeometry Figures="{Binding Figures2}"/>
</Path.Data>
</Path>
</WhatGoesHere?>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
My example has two of the same type of object in the template, but I will have several other control types in there as well.

Answer 1

You have more than one element within a DataTemplate. You would have to put your two Path objects into some kind of Panel, like for example a Grid. The question is where are all your the canvas coordinates computed so that you can bind the Grid to it? In your view model? Then you could bind to it and it could look somewhat like this:
<ItemsControl ItemsSource="{Binding ViewModels}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Canvas.Top="{Binding Y}" Canvas.Left="{Binding X}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Path Stroke="CornflowerBlue" StrokeThickness="2">
<Path.Data>
<PathGeometry Figures="{Binding Figures}"/>
</Path.Data>
</Path>
<Path Stroke="Red" StrokeThickness="2" Grid.Row="1">
<Path.Data>
<PathGeometry Figures="{Binding Figures2}"/>
</Path.Data>
</Path>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
In case you do not have these coordinates, then I would recommend to use another value for ItemsPanelTemplate like a VirtualizedStackPanel. This might look like this:
<ItemsControl ItemsSource="{Binding ViewModels}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizedStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Path Stroke="CornflowerBlue" StrokeThickness="2">
<Path.Data>
<PathGeometry Figures="{Binding Figures}"/>
</Path.Data>
</Path>
<Path Stroke="Red" StrokeThickness="2" Grid.Row="1">
<Path.Data>
<PathGeometry Figures="{Binding Figures2}"/>
</Path.Data>
</Path>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
If you could tell me what your actually trying to achieve, I'm sure I can help you in a better way.