Setting Canvas properties in an ItemsControl DataTemplate

Question

I'm trying to databind to this ItemsControl:

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

By using this DataTemplate, I'm trying to individually position my Node elements on the Canvas correctly:

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

However, it's not working as expected. All my node elements are drawn on top of each other in the same position. Any suggestions on how to accomplish this?

score 152 · Accepted Answer · edited May 22 '20 at 06:51

152

The attached properties only work on direct children of the Canvas. ItemsControl will place ContentPresenter controls as its direct children, so you might want to add a style for that as well:

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

edited May 22 '20 at 06:51

answered Aug 12 '09 at 10:38

Arcturus

26,677
10
92
107

Thank you. I found this solution myself about 5 minutes ago. I guess I was a bit quick on posting the question. :) – atsjoo Aug 12 '09 at 10:43
11

Hehe.. I love those AHA moment as well ;).. And its not all bad though.. Perhaps can your question help other people too one day.. You'll never know! – Arcturus Aug 12 '09 at 10:45
It helped here as well, +1 for all. :) – Rune Jacobsen Nov 09 '09 at 21:50
1

@skb I have the same problem, is there a Silverlight workaround for this? – themaestro Jun 25 '11 at 02:38
5

What if my X and Y Position should be inside one of the objects of ItemsSource? I got a Point object in my ItemsSource. – El Mac May 18 '15 at 08:35
1

I found a workaround for metro/UWP apps - http://stackoverflow.com/a/37821355/3431319 – Arctic Vowel Jun 14 '16 at 20:20
@ElMac `` – Dominic Jonas Oct 17 '18 at 11:14
1

Even 14 yrs later. ;) – Thomas Mutzl Jan 31 '23 at 01:22

Setting Canvas properties in an ItemsControl DataTemplate

1 Answers1

Linked

Related