How to set up Avalon docking manager to resize like VS?

Question

Hi

I am using Avalon in my WPF app. I want a window similar to that of Visual Studio, Tools on the left, then the documents in the middle and the Properties on the right. I managed to do that with this code:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ad="clr-namespace:AvalonDock;assembly=AvalonDock"
        xmlns:local="clr-namespace:WpfApplication1"
    Title="Window1" Height="600" Width="800">
    <Grid>
        <ad:DockingManager x:Name="dockManager" RenderTransformOrigin="0,0">
            <ad:ResizingPanel Orientation="Vertical">
                <ad:ResizingPanel Orientation="Horizontal" >
                    <ad:DockablePane>
                        <ad:DockableContent Title="Toolbox" Width="100">
                            <TextBox />
                        </ad:DockableContent>
                    </ad:DockablePane>
                    <ad:DocumentPane x:Name="documentsHost" OverridesDefaultStyle="True">
                        <ad:DocumentContent Title="File1.doc">
                            <RichTextBox/>
                        </ad:DocumentContent >
                        <ad:DocumentContent Title="File2.doc">
                            <RichTextBox/>
                        </ad:DocumentContent >
                    </ad:DocumentPane>
                    <ad:DockablePane>
                        <ad:DockableContent Title="Project Explorer">
                            <TextBox />
                        </ad:DockableContent>
                    </ad:DockablePane>
                </ad:ResizingPanel>
                <ad:DockablePane>
                    <ad:DockableContent Title="Output">
                        <TextBox />
                    </ad:DockableContent>
                </ad:DockablePane>
            </ad:ResizingPanel>
        </ad:DockingManager>
    </Grid>
</Window>

The problem is that when I resize any of them, they all resize to keep their proportion. This is not what I want, I want it to be like VS where just the document window in the middle resizes with.

I would appreciate any help since I have been fighting with this for a few days now :(

Answer 1

Funny, because I started with the Avalon Tutorial from there and replaced the contents for the window with your XAML (very similar by the way). And the problem you describe does not happen.

Then I realized that the tutorial uses AvalonDock 1.1.1692, while the latest release is 1.1.2691 and has the behaviour you describe.

A look at the source code shows an attached property defined by ResizingPanel called ResizeWidth, which is 1* by default => the auto resize.

If you change the first DockablePane like this:

<ad:DockablePane ad:ResizingPanel.ResizeWidth="100" >

You get the behaviour you wanted.

It's never great to use hard-coded widths, so I changed it to

<ad:DockablePane ad:ResizingPanel.ResizeWidth="{Binding ElementName=dc, Path=Width}" >

after naming the inner DockableContent dc