SandDock for Silverlight User Guide

Building a Complex Layout

Back to Table of Contents

The Layout

We will take a Visual Studio-like layout of windows similar to that used in the demonstration application and show how to create it.

This layout consists of six tool windows and three document windows. There are three DockedSplitContainers, one docked to each side of the container, which hold the various window groups. There is a DocumentContainer as the content of the DockSite since we want to use tabbed documents.

Building it with XAML

The code used to create the window shown above in XAML is below. We've made all the windows empty for clarity.

<sd:DockSite Name="dockSite"> 
    <sd:DockedSplitContainer> 
        <sd:WindowGroup> 
            <sd:ToolWindow Title="Solution Explorer" /> 
            <sd:ToolWindow Title="Class View" /> 
        </sd:WindowGroup> 
        <sd:WindowGroup> 
            <sd:ToolWindow Title="Properties" /> 
        </sd:WindowGroup> 
    </sd:DockedSplitContainer> 
    <sd:DockedSplitContainer Dock="Left" ContentSize="150"> 
        <sd:WindowGroup IsPinned="False"> 
            <sd:ToolWindow Title="Toolbox" /> 
            <sd:ToolWindow Title="Server Explorer" /> 
        </sd:WindowGroup> 
    </sd:DockedSplitContainer> 
    <sd:DockedSplitContainer Dock="Bottom" ContentSize="120"> 
        <sd:WindowGroup> 
            <sd:ToolWindow Title="Output" /> 
        </sd:WindowGroup> 
    </sd:DockedSplitContainer> 

    <sd:DocumentContainer Margin="2"> 
        <sd:WindowGroup> 
            <sd:DocumentWindow Title="Welcome" /> 
            <sd:DocumentWindow Title="Document 2" /> 
            <sd:DocumentWindow Title="Document 3" /> 
        </sd:WindowGroup> 
    </sd:DocumentContainer> 

</sd:DockSite>

There are only a few things more complex than what we have already covered. Note that we are specifying the ContentSize attribute on the DockedSplitContainers in order to set their size. A tool window cannot always be precisely sized because its size is a calculation based on the proportions of the elements surrounding it and the container as a whole, but if you have a simple case like the one above, setting the ContentSize property is the solution.

One of the window groups has the IsPinned property set to false. This is how to collapse groups of windows to the side, so they take up virtually no space.

Building it at Runtime

We've tried to reduce the common APIs to a set of very straightforward functions that you can use successively to very easily create layouts at runtime, or indeed just individual windows. In fact, while the designer support for Silverlight is quite poor, it's almost as easy to create a layout at runtime as it is to create one in XAML at design time.

// This code assumes you already have a DockSite defined with nothing inside except an empty DocumentContainer. 
// Alternatively you can create those two items dynamically by uncommenting the lines below. 
//DockSite dockSite = new DockSite(); 
//DocumentContainer documentContainer = new DocumentContainer(); 
//dockSite.Items.Add(documentContainer); 
//LayoutRoot.Children.Add(dockSite); 

LayoutSerialization.ClearLayout(dockSite, false); 

// Windows docked on the right. Start with one, then use OpenWith and OpenBeside to create the rest in relation to it.  
ToolWindow solutionExplorer = new ToolWindow(dockSite, "Solution Explorer"); 
solutionExplorer.Dock(WindowOpenMethod.Background, DockSide.Right); 
ToolWindow classView = new ToolWindow(dockSite, "Class View"); 
classView.OpenWith(WindowOpenMethod.Background, solutionExplorer); 
ToolWindow properties = new ToolWindow(dockSite, "Properties"); 
properties.OpenBeside(WindowOpenMethod.Background, solutionExplorer, DockSide.Bottom); 

// One window docked on the bottom  
ToolWindow output = new ToolWindow(dockSite, "Output"); 
output.Metadata.DockedContentSize = 120; // This tells SandDock what size to use when creating constructs to host the window  
output.Dock(WindowOpenMethod.Background, DockSide.Bottom); 

// Windows docked on the left, which are collapsed  
ToolWindow toolbox = new ToolWindow(dockSite, "Toolbox"); 
toolbox.Metadata.DockedContentSize = 150; 
toolbox.Dock(WindowOpenMethod.Background, DockSide.Left); 
toolbox.IsPinned = false; // Window is shown collapsed by default  
ToolWindow serverExplorer = new ToolWindow(dockSite, "Server Explorer"); 
serverExplorer.OpenWith(WindowOpenMethod.Background, toolbox); 

// Tabbed documents  
DocumentWindow welcome = new DocumentWindow(dockSite, "Welcome"); 
welcome.Open(); // Could also use the Document method, but since it's a DocumentWindow it knows it should open tabbed anyway  
DocumentWindow document1 = new DocumentWindow(dockSite, "Document 1"); 
document1.OpenWith(WindowOpenMethod.Background, welcome); 
DocumentWindow document2 = new DocumentWindow(dockSite, "Document 2"); 
document2.OpenWith(WindowOpenMethod.Background, welcome);

It's as simple as that.

Next: Standalone Windows