How to stretch/maximise an AvalonDock DocumentPane

Question

I am using AvalonDock v 1.3 on .NET 3.5.

I have added two Document Panes at design time to a DockingManager. The first one is set to be visible and the second is hidden/collapsed (see Visibility="Collapsed" below).

When I launch the application, the second Document Pane is not visible, which is the intended behaviour but unfortunately, the visible document panel does not display stretched to the edges of the main window despite the fact that HorizontalAlignment is set to "Stretched". How would I go about making this clip(or maximise) to the edges of the allowed area?

This is the xaml that I am using:

   <ad:DockingManager x:Name="dockManager" Grid.Row="1">
        <ad:ResizingPanel Name="resizePanel" Orientation="Horizontal">
            <ad:DocumentPane Name="visibleDocumentPane" HorizontalAlignment="Stretch" >
                <ad:DocumentContent Title="A"/>
                <ad:DocumentContent Title="B"/>                    
            </ad:DocumentPane>
            <ad:DocumentPane Name="collapsedDocumentPane" Visibility="Collapsed">
                <ad:DocumentContent Title="A"/>
                <ad:DocumentContent Title="B"/>
            </ad:DocumentPane>
        </ad:ResizingPanel>
    </ad:DockingManager>

Thanks, Dave

As per request, here is the full XAML:

    <Window x:Class="AvalonDockSampleProject.MainWindow"
       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"
      Title="MainWindow" Height="421" Width="948">
    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="24"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="24"/>
    </Grid.RowDefinitions>
    <Menu>
        <MenuItem Header="File">
            <MenuItem Header="Create DockableContent" Click="CreateDockableContent"/>
             <MenuItem Header="Layout">
                <MenuItem Header="Save" Click="SaveLayout"/>
                <MenuItem Header="Restore" Click="RestoreLayout"/>                    
            </MenuItem>
            <MenuItem Header="Exit"/>
        </MenuItem>
    </Menu>
    <ad:DockingManager x:Name="dockManager" Grid.Row="1">
        <ad:ResizingPanel Name="resizePanel" Orientation="Horizontal">
            <ad:DocumentPane Name="visibleDocumentPane" HorizontalAlignment="Stretch" >
                <ad:DocumentContent Title="A!"/>
                <ad:DocumentContent Title="B!"/>                    
            </ad:DocumentPane>
            <ad:DocumentPane Name="collapsedDocumentPane" Visibility="Collapsed">
                <ad:DocumentContent Title="A"/>
                <ad:DocumentContent Title="B"/>
            </ad:DocumentPane>
           </ad:ResizingPanel>
        </ad:DockingManager>                  
        <StatusBar Grid.Row="2">
            <StatusBarItem Content="AvalonDock 1.3 Sample Project"/>
        </StatusBar>
    </Grid>
</Window>

Can you show us the Window's properties or any other wrappers? is the `DockingManager` nested under anything but the `Window`? — Shimmy Weitzhandler, Nov 16 '11 at 00:01
Hi Shimmy. I have update the post above with the full contents of the MainWindow.xaml. Would any other details be helpful? — user989046, Nov 16 '11 at 00:10

denis morozov · Answer 1 · 2013-06-12T16:55:00.230

You are right, it seems problematic to define your collapsedDocumentPane in XAML, as AvalonDoc will reserve the space for it (it's tab header or whatever) completely disregarding Visibility="Collapsed", so I ended up adding/removinhg mine in code. So:

First, remove your "collapsedDocumentPane" from XAML (I am commenting it out, so that it can be used as a reference from code behind later):

<ad:DockingManager x:Name="dockManager" Grid.Row="1">
    <ad:ResizingPanel Name="resizePanel" Orientation="Horizontal">
        <ad:DocumentPane Name="visibleDocumentPane" HorizontalAlignment="Stretch" >
            <ad:DocumentContent Title="A"/>
            <ad:DocumentContent Title="B"/>                    
        </ad:DocumentPane>
        <!--<ad:DocumentPane Name="collapsedDocumentPane" Visibility="Collapsed">
            <ad:DocumentContent Title="A"/>
            <ad:DocumentContent Title="B"/>
        </ad:DocumentPane>-->
    </ad:ResizingPanel>
</ad:DockingManager>

And recreated that xaml in code behind (in you xaml.cs file):

private DockablePane _collapsedDocumentPane;

private DockablePane CollapsedDocumentPane
{
  get
  {
    if (_collapsedDocumentPane== null)
    {
        _collapsedDocumentPane= new DockablePane();
        var a = new DockableContent
        {
           Title = "A",
           DataContext = _youViewModel, //if you pass data context
           DockableStyle = DockableStyle.AutoHide,
           Content = new RadGridView(), //just a sample control
         };
         var b = new DockableContent { Title = "B"};

        _collapsedDocumentPane.Items.Add(a);
        _collapsedDocumentPane.Items.Add(b);
     }
     return _errorsDockablePane;
   }
 }

Then a method that adds or removes it:

private void EvaluateCollapsedDocPaneVisibility()
{
   //don't know your scenario
   if (NeedToDisplay_CollapsedDocPane)
   {
       if (!resizePanel.Children.Contains(CollapsedDocumentPane))
         resizePanel.Children.Add(CollapsedDocumentPane);
   }
   else
   {
       if (resizePanel.Children.Contains(CollapsedDocumentPane))
         resizePanel.Children.Remove(CollapsedDocumentPane);
   }
 }

Note, the property is lazy loaded - constructed only when needed. So now all you gotta do is call the method above whenever you need to add or remove. This is just a sample, you can add an arg to the method to tell it what to do, or whatever, hope this helps/gets you going.

How to stretch/maximise an AvalonDock DocumentPane

1 Answers1