Nesting and layout question - Docking/MDI for WPF Forum

Posted 16 years ago by Michael Micheletti - Seattle, WA

Version: 4.5.0471

I'm evaluating the Actipro WPF Studio Docking & MDI capabilities for a project, and have struggled to accomplish a specific sort of nested structure. A short XAML mockup of what I'm after using standard (no Actipro) controls follows, then my questions:


<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="M2Tabs2.Window1"
  x:Name="Window"
  Title="Window1"
  Width="300" Height="300">

  <Grid x:Name="LayoutRoot">
    <TabControl IsSynchronizedWithCurrentItem="True" Margin="8,8,8,8">
    
      <!-- container for packages -->
      <TabItem Header="Container 1">
            
        <!-- wrap panel allows packages to reposition when window is resized -->
        <WrapPanel>

          <!-- package A  - can drag at this level between containers -->
          <TabControl IsSynchronizedWithCurrentItem="True" Width="200" Height="100" 
            TabStripPlacement="Bottom" Padding="0,0,0,0">
            <TabItem Header="Pkg A tab 1">
              <Grid>
                <Label Content="Package A" VerticalAlignment="Top" 
                  Background="#FFDBDBDB"/>
              </Grid>
            </TabItem>
            <TabItem Header="Pkg A tab 2">
              <Grid>
                <Label Content="Package A" VerticalAlignment="Top" 
                  Background="#FFDBDBDB"/>
              </Grid>
            </TabItem>
          </TabControl>

          <!-- package B - can drag at this level between containers -->
          <TabControl IsSynchronizedWithCurrentItem="True" Width="200" Height="100" 
            TabStripPlacement="Bottom" Padding="0,0,0,0">
            <TabItem Header="Pkg B tab 1">
              <Grid>
                <Label Content="Package B" VerticalAlignment="Top" 
                  Background="#FFDBDBDB"/>
              </Grid>
            </TabItem>
              <TabItem Header="Pkg B tab 2">
                <Grid>
                  <Label Content="Package B" VerticalAlignment="Top" 
                    Background="#FFDBDBDB"/>
                </Grid>
              </TabItem>
            </TabControl>

          </WrapPanel>
        </TabItem>

        <TabItem Header="Container 2">
          <WrapPanel>
            <Label Content="Packages go here"/>
          </WrapPanel>
        </TabItem>

    </TabControl>
  </Grid>
</Window>

In the mockup, there are outer containers, which contain multiple tabbed packages (probably tool windows). The packages are arranged using a wrap panel so they'll self-arrange when the window is resized. Packages can be dragged between the outer containers and moved around, but the bottom tabs from one package can't be dragged to another package.

I'm an Actipro WPF tools n00b (XAML too really), but after struggling for some hours to create something like this using your API decided it was time to ask for help. Suggestions much appreciated, thanks,

Michael Micheletti

Comments (5)

Posted 16 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Michael,

Hmm, that is a bit complex. :) You are looking at either 2 or 3 levels of DockSites here.

Maybe the top level is just a DockSite with tabbed MDI, one document window for each package container.

Then each package container is a DockSite with tool window inner fill mode (no Workspace) where each tool window contains a package.

Within the package tool windows, you could use a standard TabControl (since there isn't any dragging here I assume).

One note is that you said packages can be moved around within various containers. However that wouldn't be possible since tool windows are tied to a specified DockSite and each container would have its own DockSite. So they could be dragged around within their parent container or rafted but that's it.

Does that help?

Actipro Software Support

Posted 16 years ago by Michael Micheletti - Seattle, WA

Let me give it a try and see how close I get, thanks for the tips, this is very helpful. I'll post another example if it's going in the right direction.

Michael

Posted 16 years ago by Michael Micheletti - Seattle, WA

Ok here's what I came up with. It's closer. The window size wrapping behavior works. But whenever I try to drag one of the inner tool windows around it crashes. I tried replacing the WrapPanel with a SplitContainer but the crashes still happened. Am I doing something wrong here, or have I found something that's busted? Thanks again,

Michael


<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared" 
  xmlns:docking="http://schemas.actiprosoftware.com/winfx/xaml/docking" 
  xmlns:themes="http://schemas.actiprosoftware.com/winfx/xaml/themes" 
  x:Class="M2Tabs2.Window1"
  x:Name="Window"
  Title="Window1"
  Width="640" Height="480">

  <Grid x:Name="LayoutRoot">
    <docking:DockSite HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
      Width="Auto" Height="Auto" Margin="8,8,8,8">
      <docking:Workspace>
        <docking:TabbedMdiHost>
          <docking:TabbedMdiContainer>
    
            <!-- first MDI tab container -->
              <docking:DocumentWindow Title="Container 1">
                <docking:DockSite>
                  <docking:Workspace HorizontalAlignment="Stretch">
                    <WrapPanel>

                      <docking:ToolWindowContainer Width="200" Height="100">
                        <docking:ToolWindow HorizontalAlignment="Stretch" 
                          VerticalAlignment="Stretch" Title="Package A-1"/>
                        <docking:ToolWindow HorizontalAlignment="Stretch" 
                          VerticalAlignment="Stretch" Title="Package A-2"/>
                      </docking:ToolWindowContainer>

                      <docking:ToolWindowContainer Width="200" Height="100">
                        <docking:ToolWindow HorizontalAlignment="Stretch" 
                          VerticalAlignment="Stretch" Title="Package B-1"/>
                        <docking:ToolWindow HorizontalAlignment="Stretch" 
                          VerticalAlignment="Stretch" Title="Package B-2"/>
                      </docking:ToolWindowContainer>

                    </WrapPanel>    
                  </docking:Workspace>
                </docking:DockSite>
              </docking:DocumentWindow>

              <!-- second MDI tab container -->
              <docking:DocumentWindow Title="Container 2">
                more packages here
              </docking:DocumentWindow>
            </docking:TabbedMdiContainer>

          </docking:TabbedMdiHost>
        </docking:Workspace>
      </docking:DockSite>
    </Grid>
</Window>

Posted 16 years ago by Actipro Software Support - Cleveland, OH, USA

Right the stucture is a bit off, you'd need the first MDI tab container to be this code:

<!-- first MDI tab container -->
  <docking:DocumentWindow Title="Container 1">
    <docking:DockSite>
        <docking:SplitContainer>

          <docking:ToolWindowContainer>
            <docking:ToolWindow HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch" Title="Package A-1"/>
            <docking:ToolWindow HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch" Title="Package A-2"/>
          </docking:ToolWindowContainer>

          <docking:ToolWindowContainer>
            <docking:ToolWindow HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch" Title="Package B-1"/>
            <docking:ToolWindow HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch" Title="Package B-2"/>
          </docking:ToolWindowContainer>

        </docking:SplitContainer>    
    </docking:DockSite>
  </docking:DocumentWindow>

Actipro Software Support

Posted 16 years ago by Michael Micheletti - Seattle, WA

Thanks for the help, now I know what makes it break. I may be able to use the Actipro tools for other pieces of the application, but I need a wrap panel for this area - a splitter (SplitContainer) won't be an appropriate layout method when many ToolWindowContainer assemblies (10 or more potentially) are added.

Appreciate your assistance, continuing to experiment,

Michael

The latest build of this product (v24.1.3) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.