Setting Canvas Properties in ItemControl DataTemplate

Question

I am trying to bind data to this ItemsControl :

 <ItemsControl ItemsSource="{Binding Path=Nodes, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> 

Using this DataTemplate , I am trying to individually position my Node elements in Canvas correctly:

 <DataTemplate DataType="{x:Type Model:EndNode}"> <Controls:EndNodeControl Canvas.Left="{Binding Path=XPos}" Canvas.Top="{Binding Path=YPos}" /> </DataTemplate> 

However, it does not work as expected. All my node elements are drawn one above the other in the same position. Any suggestions on how to do this?

Answer 1

The attached properties only work with direct children of the canvas. ItemsControl will place the ContentPresenter controls as its direct children, so you can also add a style for this:

 <ItemsControl ItemsSource="{Binding Path=Nodes}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemContainerStyle> <Style TargetType="ContentPresenter"> <Setter Property="Canvas.Left" Value="{Binding Path=XPos}" /> <Setter Property="Canvas.Top" Value="{Binding Path=YPos}" /> </Style> </ItemsControl.ItemContainerStyle> </ItemsControl> 

Hope this helps