When using ItemsControl ItemsControl.ItemsPanel is set to Canvas, ContenPresenter comes in and break my Canvas properties on the children [WPF]

Question

I am using an ItemsControl where the ItemsPanel is set to Canvas (see this question for more background information). The ItemsControl is performing as I want, and it works like a charm when adding a child element manually by putting it into ItemsControl.Items:

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Items>
        <Button Canvas.Left="500" Content="Button Text" />
    </ItemsControl.Items>
</ItemsControl>

Note the Canvas.Left property on the Button. This works like a charm, and the Button is placed 500 pixels from the left of the ItemsControl left side. Great!

However, When I am defining a ItemsSource binding to a List, the Canvas.left doesn't have any effect:

<ItemsControl ItemsSource="{Binding Elements}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Canvas.Left="500" Content="Button Text" />
        </DataTemplate>     
    </ItemsControl.ItemTemplate>
</ItemsControl>

By inspecting the application during run time, I see one difference. The container ContentPresenter has been added between the Canvas and the button..

How can I set the Canvas.Left property on the ContentPresenter itself? Or is there another way to solve this problem?

Thanks to all!

score 25 · Answer 1 · answered May 09 '10 at 17:21

It is possible to set the Canvas.Left property using ItemContainerStyle:

<ItemsControl ItemsSource="{Binding Elements}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Content="Button Text" />
            </DataTemplate>     
        </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style>
             <Setter Property="Canvas.Left" Value="500" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

You can also bind the value within the ItemContainerStyle and it will use the same item as the DataTemplate uses as the source. :-) — Russell Giddings, Jun 20 '13 at 13:53

score 4 · Accepted Answer · answered Mar 10 '10 at 09:13

there are several solutions coming to my mind:

use a layout/rendertransform instead of the attached property
use margin instead of the attached property
derive from ItemsControl, and override the behavior how the child containers are generated. (GetContainerForItemOverride, IsItemItsOwnContainerOverride). This article is explaining quite nicely how it works: http://drwpf.com/blog/2008/07/20/itemscontrol-g-is-for-generator/

score 2 · Answer 3 · answered Jan 18 '13 at 13:10

Button Doesn't have a "Canvas" Property, so what you are doing is is making a relative call to the hosting control, however because the item and canvas are in different Templates there is no direct link, because of this the Canvas.Left is meaningless before runtime.

hence your method can't find a left to set so loses the change.

However Setters are only implemented at runtime so

<Setter Property="Canvas.Left" Value="500" />

will only run after the objects have been generated and hence do have a relative relationship.

Otherwise you can use the margin which does belong to the button object but again is only interpreted at runtime

When using ItemsControl ItemsControl.ItemsPanel is set to Canvas, ContenPresenter comes in and break my Canvas properties on the children [WPF]

3 Answers3

Linked