Making the TreeView.ItemsPanel a Canvas

Question

I am looking for a way to make my TreeView display items in Canvas panel.

<TreeView>
    <TreeView.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </TreeView.ItemsPanel>
    <TreeViewItem Header="Root" IsExpanded="True" Canvas.Left="50" Canvas.Top="20">
        <TreeViewItem Header="Alpha" Canvas.Left="10" Canvas.Top="50">
            <TreeViewItem Header="Sub"/>
        </TreeViewItem>
        <TreeViewItem Header="Beta"/>
        <TreeViewItem Header="Gamma"/>
    </TreeViewItem>
</TreeView>

This solution allows me to move around Root TreeViewItem, but I want every single item in TreeView to respect Canvas attached properties. What I mean is, when Root {Left = 50, Top = 10} (to here it works) contains Alpha {Left = 0, Top=0}, Root would be at [50,10] and Alpha at [0,0] (coordinates are absolute to Canvas).

The reason why only Root TreeViewItem places itself correctly is, that I use TreeView.ItemsPanel. I have a feeling I should use TreeView.ItemContainerStyle instead, but I really don't know how.

Any help is appreciated of course, preferably incorporating HierarchicalDataTemplate too so _I know how to connect the solution with Binding.

Answer 1

TreeViewItems lay out their own children, they each have their own panel, so you need to change the canvas on the TreeView and the items. To do this apply a style which changes the panel, either implicitly via resources or the ItemContainerStyle.

<Style TargetType="TreeViewItem">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <TreeViewItem.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </TreeViewItem.ItemsPanel>
        </Setter.Value>
    </Setter>
</Style>