Make DockableContent Stack in AvalonDock

Question

How do I make the initial startup state of two dockable content panes stack instead of being tabbed using AvalonDock?

                <ad:DockableContent x:Name="toolsContent" Title="Materials" Selector.IsSelected="True">
                    <Canvas Background="White">
                    </Canvas>
                </ad:DockableContent>
                <ad:DockableContent x:Name="properties" Title="Properties">
                    <Canvas Background="White">
                    </Canvas>                        
                </ad:DockableContent>

So in this case the app will load as two dockable contents as tabs, one hiding behind the other. Whereas I want one panel above the other (stacked) not behind.

Answer 1

These 2 <ad:DockableContent elements are now inside 1 <ad:DockablePane element. AvalonDock creates a tab inside the Pane for each piece of Content.

You need to make 2 separate <ad:DockablePane elements
- both inside a <ad:ResizingPanel Orientation="Vertical"> -
with 1 <ad:DockableContent element in each.