Content Positioning - Not Possible??

Jun 9, 2009 at 2:31 PM

I'm starting to think this is not possible, maybe someone can confirm/deny.

The app starts in "Default View" with:

1 window; divided into a top and bottom.  The top has a DocumentPane with 3 Dockable Content objects...lined up next to each other (like Demo.xml)

The bottom has 1 Dockable Pane. 

The user wants to be able to switch views (via the menu) which in turn closes the bottom Dockable Pane, and replacing it with a Dockable Pane with 2 Dockable Content objects side-by-side.

It seems like no matter what setting I try, the Dockable Contect Panes end up Stacked on top of each other rather than side-by-side.  I tried a ResizingPanel, no luck.  I manually move the contect and call SaveLayout, come back in, and try to switch views by calling LoadLayout, still no luck.  Any suggestions??  I've run out of ideas :-(

Thanks in advance,

Jun 12, 2009 at 4:01 PM

HI,

I suppose you need to adjust properly settings like orientation and children position of the resizingpanel,

could you please post a sample xaml?

 

Ado

Jun 15, 2009 at 2:44 PM

Here is a quick sample, not my exact code:

 <Window x:Class="AvalonDockMyTest.MyWindow"
    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="MyWindow" Height="600" Width="600">
    <DockPanel LastChildFill="True">
        <DockPanel.LayoutTransform>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
        </DockPanel.LayoutTransform>
        <Menu DockPanel.Dock="Top" >
            <MenuItem Header="File">
                <MenuItem x:Name="mnuFlipContent" Header="Flip Content" IsCheckable="True" Click="ShowDockingManager_Click" />
            </MenuItem>
        </Menu>
        <ContentControl x:Name="TestContainer">
            <ad:DockingManager x:Name="_dockingManager">
                <ad:ResizingPanel Orientation="Vertical">
                    <ad:ResizingPanel Orientation="Horizontal">
                        <ad:DockablePane ad:ResizingPanel.ResizeHeight="*">
                            <ad:DockableContent>
                                <TextBox>Content1</TextBox>
                            </ad:DockableContent>
                        </ad:DockablePane>
                        <ad:DockablePane>
                            <ad:DockableContent>
                                <TextBox>Content2</TextBox>
                            </ad:DockableContent>
                        </ad:DockablePane>
                        <ad:DockablePane>
                            <ad:DockableContent>
                                <TextBox>Content3</TextBox>
                            </ad:DockableContent>
                        </ad:DockablePane>
                    </ad:ResizingPanel>
                    <ad:ResizingPanel Orientation="Horizontal" Width="Auto" ad:ResizingPanel.ResizeWidth="*">
                        <ad:DockablePane ad:ResizingPanel.ResizeWidth="*" Width="Auto">
                            <ad:DockableContent Title="FirstWindow" Name="ShowMeFirst" Visibility="Collapsed" ad:ResizingPanel.ResizeWidth="*">
                                <TextBox>This should be visible 1st</TextBox>
                            </ad:DockableContent>
                        </ad:DockablePane>
                        <ad:DockablePane ad:ResizingPanel.ResizeWidth="*" Width="Auto">
                            <ad:DockableContent Title="SecondWindow" Name="ShowMeSecond" Visibility="Collapsed" ad:ResizingPanel.ResizeWidth="*" Width="Auto">
                                <TextBox>This should be visible 2nd</TextBox>
                            </ad:DockableContent>
                        </ad:DockablePane>
                        <ad:DockablePane ad:ResizingPanel.ResizeWidth="*" Width="Auto">
                            <ad:DockableContent Title="ThirdWindow" Name="AlsoShowMeSecond" Visibility="Collapsed" ad:ResizingPanel.ResizeWidth="*" Width="Auto">
                                <TextBox>This should be visible 2nd as well</TextBox>
                            </ad:DockableContent>
                        </ad:DockablePane>
                    </ad:ResizingPanel>
                </ad:ResizingPanel>
            </ad:DockingManager>
        </ContentControl>
    </DockPanel>
</Window>

 When the application starts I wanted to display the "ShowMeFirst" content, then the user switched "views" and the "ShowMeFirst" content is hidden and the "ShowMeSecond" and "AlsoShowMeSecond" content is displayed docked side-by-side on the bottom.

Hope that makes sense,

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<font size="2" color="#0000ff"><font size="2" color="#0000ff">

<

</font></font><font size="2" color="#0000ff">

 

</font>

Window x:Class="AvalonDockMyTest.MyWindow" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"<font size="2">

 

</font>

 

 

xmlns:ad="clr-namespace:AvalonDock;assembly=AvalonDock" <font size="2">

 

</font>

 

Title="MyWindow" Height="600" Width

="600">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<DockPanel LastChildFill

="True">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<DockPanel.LayoutTransform

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ScaleTransform ScaleX="1" ScaleY

="1"/>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</DockPanel.LayoutTransform

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<Menu DockPanel.Dock

="Top" >

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<MenuItem Header

="File">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<MenuItem x:Name="mnuFlipContent" Header="Flip Content" IsCheckable="True" Click

="ShowDockingManager_Click" />

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</MenuItem

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</Menu

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ContentControl x:Name

="TestContainer">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockingManager x:Name

="_dockingManager">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:ResizingPanel Orientation

="Vertical">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:ResizingPanel Orientation

="Horizontal">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockablePane ad:ResizingPanel.ResizeHeight

="*">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockableContent

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<TextBox>Content1</TextBox

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockableContent

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockablePane

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockablePane

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockableContent

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<TextBox>Content2</TextBox

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockableContent

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockablePane

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockablePane

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockableContent

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<TextBox>Content3</TextBox

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockableContent

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockablePane

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:ResizingPanel

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:ResizingPanel Orientation="Horizontal" Width="Auto" ad:ResizingPanel.ResizeWidth

="*">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockablePane ad:ResizingPanel.ResizeWidth="*" Width

="Auto">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockableContent Title="FirstWindow" Name="ShowMeFirst" Visibility="Collapsed" ad:ResizingPanel.ResizeWidth

="*">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<TextBox>This should be visible 1st</TextBox

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockableContent

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockablePane

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockablePane ad:ResizingPanel.ResizeWidth="*" Width

="Auto">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockableContent Title="SecondWindow" Name="ShowMeSecond" Visibility="Collapsed" ad:ResizingPanel.ResizeWidth="*" Width

="Auto">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<TextBox>This should be visible 2nd</TextBox

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockableContent

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockablePane

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockablePane ad:ResizingPanel.ResizeWidth="*" Width

="Auto">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<ad:DockableContent Title="ThirdWindow" Name="AlsoShowMeSecond" Visibility="Collapsed" ad:ResizingPanel.ResizeWidth="*" Width

="Auto">

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

<TextBox>This should be visible 2nd as well</TextBox

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockableContent

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockablePane

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:ResizingPanel

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:ResizingPanel

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ad:DockingManager

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</ContentControl

>

 

<font size="2" color="#a31515"><font size="2" color="#a31515">

 

</font></font><font size="2" color="#a31515">

 

</font>

 

</DockPanel

><font size="2" color="#0000ff"><font size="2" color="#0000ff">

</

</font></font><font size="2" color="#0000ff">

 

</font>

 

Window

>

 

 

Jun 15, 2009 at 3:57 PM
Edited Jun 15, 2009 at 3:59 PM

The simplest way that come in my mind right now is to use layout streaming:

        //backend stream for layout
       MemoryStream savedLayout = new MemoryStream();

        private void _dockingManager_Loaded(object sender, RoutedEventArgs e)
        {
            //at startup save layout with the 3 botton contents
            _dockingManager.SaveLayout(savedLayout);

            //then remove last two
            _dockingManager.Hide(ShowMeSecond);
            _dockingManager.Hide(AlsoShowMeSecond);

        }

        private void ShowDockingManager_Click(object sender, RoutedEventArgs e)
        {
            /repos the stream cursor and reload the original layout
            savedLayout.Position = 0;
            _dockingManager.RestoreLayout(savedLayout);
            _dockingManager.Hide(ShowMeFirst);
            savedLayout.Close();
        }

remember to add a name to every content before serialize a layout, otherwise AvalonDock will discard nameless contents. In my sample I renamed content on top with names like 'content1' 'content2' and 'content3'.

Just for your info, every complicated layout can be stored on memory/disk and then reloaded at runtime at any moment.

Hope this helps,

Ado