How to add TreeView to AvalonDock?

Question

I am using perfect library AvalonDock and would like to show TreeView inside docking layout. So my TreeView should be dockingable.

I cannot figured out how TreeView should be added to AvalonDock. For example, I have standard layout.

I've tried this old approach, however this code is not working as I'm using AvalonDock 2.0 and there is no ResizingPanel, DockableContent:

<avalonDock:ResizingPanel Orientation="Horizontal">
        <avalonDock:DockablePane>
            <avalonDock:DockableContent x:Name="fileFrame" Title="File List">
                <TreeView Name="fileTree"/>                        
            </avalonDock:DockableContent>
            <avalonDock:DockableContent x:Name="viewFrame" Title="View List">
                <TreeView Name="viewTree"/>
            </avalonDock:DockableContent>
        </avalonDock:DockablePane>
  </avalonDock:ResizingPanel>

My goal is to have TreeView at the left side at start of program like in Visual Studio:

How to add TreeView to AvalonDock to see TreeView at start of MainWindow?

Edit:

Now I can see TreeView in Visual Studio:

However, there is no TreeView in started program(just yellow screen):

How to show TreeView with dummy data at the left side at start of program like in Visual Studio?

Philip W · Accepted Answer · 2015-10-21T18:32:41.100

You can't add a control directly to the LayoutAnchorablePane - you have to wrap it in a LayoutAnchorable:

<avalonDock:DockingManager x:Name="dockManager" >
    <avalonDock:LayoutRoot>
        <avalonDock:LayoutPanel Orientation="Vertical">
            <avalonDock:LayoutDocumentPane/>
            <avalonDock:LayoutAnchorablePane Name="ToolsPane" DockHeight="150">
                <avalonDock:LayoutAnchorable>
                    <TreeView Name="viewTree"/>
                </avalonDock:LayoutAnchorable>
            </avalonDock:LayoutAnchorablePane>
        </avalonDock:LayoutPanel>
    </avalonDock:LayoutRoot>
</avalonDock:DockingManager>

Edit:

If you want your treeview on the leftside, here a snippet with some dummy data:

<avalonDock:DockingManager x:Name="dockManager">
    <avalonDock:LayoutRoot>
        <avalonDock:LayoutPanel Orientation="Horizontal">
            <avalonDock:LayoutAnchorablePane Name="ToolsPane" DockWidth="150">
                <avalonDock:LayoutAnchorable>
                    <TreeView Name="viewTree">
                        <TreeViewItem Header="North America">
                            <TreeViewItem Header="USA" />
                            <TreeViewItem Header="Canada" />
                            <TreeViewItem Header="Mexico" />
                        </TreeViewItem>
                        <TreeViewItem Header="South America">
                            <TreeViewItem Header="Argentina" />
                            <TreeViewItem Header="Brazil" />
                            <TreeViewItem Header="Uruguay" />
                        </TreeViewItem>
                    </TreeView>
                </avalonDock:LayoutAnchorable>
            </avalonDock:LayoutAnchorablePane>
            <avalonDock:LayoutDocumentPane />
        </avalonDock:LayoutPanel>
    </avalonDock:LayoutRoot>
</avalonDock:DockingManager>

it is really strange:), however I can see TreeView in Visual Studio, however if I run my proramm, then I cannot see TreeView. How to show TreeView in started program? — StepUp, Oct 21 '15 at 12:58
Anyway, I cannot see my TreeView in program, but TreeView can be seen perfectly In Visual Studio. Please, see my updated question. — StepUp, Oct 22 '15 at 05:43

How to add TreeView to AvalonDock?

1 Answers1