Programming Model

DevZest WPF Docking

previous page next page
Programming Model

Although WPF Docking is a very sophisticated UI library, it has a very simple programming model. In most cases, you, as a programmer, only need to deal with two classes: DockControl and DockItem.

This topic contains the following sections:

Implement Your DockItem Objects

Implement your individual window as DockItem object, which derives from ContentControl class. Set the Content property to organize the UI. For example, the following XAML code defines a simple dockable window displays a welcome message:

XAML
Copy 
<dz:DockItem
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dz="http://schemas.devzest.com/presentation/docking"
    TabText="Welcome" Title="Welcome">
        <FlowDocumentScrollViewer>
            <FlowDocumentScrollViewer.Document>
                <FlowDocument FontFamily="Calibri" FontSize="14.5" TextAlignment="Left">
                    <Paragraph FontSize="22" FontWeight="Bold">Welcome to DevZest Docking</Paragraph>
                </FlowDocument>
            </FlowDocumentScrollViewer.Document>
        </FlowDocumentScrollViewer>
      </dz:DockItem>
Note Note
You may define the DockItem object as the root element of the XAML element tree, and add a x:Class attribute to join the code-behind partial class.
Place a DockControl in Your Application Main Form/Window

DockControl is the core of docking window layout. You need to place a DockControl in your application main form/window. For example:

XAML
Copy 
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dz="http://schemas.devzest.com/presentation/docking"
    Title="DockControl Sample"
    WindowState="Maximized">
    <dz:DockControl>
    ...
    </dz:DockControl>
</Window>
Show DockItem by XAML or Code

Show DockItem by XAML

To show DockItem by XAML, add DockItem objects to DockItems collection, with its ShowAction set:

XAML
Copy 
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dz="http://schemas.devzest.com/presentation/docking"
    Title="DockControl Sample"
    WindowState="Maximized">
    <dz:DockControl>
        <dz:DockItem TabText="Welcome" Title="Welcome" ShowAction="{dz:ShowAsDockPositionAction DockPosition=Document}">
            <FlowDocumentScrollViewer>
                <FlowDocumentScrollViewer.Document>
                    <FlowDocument FontFamily="Calibri" FontSize="14.5" TextAlignment="Left">
                        <Paragraph FontSize="22" FontWeight="Bold">Welcome to DevZest Docking</Paragraph>
                    </FlowDocument>
                </FlowDocumentScrollViewer.Document>
            </FlowDocumentScrollViewer>
        </dz:DockItem>
        <dz:DockItem TabText="Saved State" Title="Saved State" ShowAction="{dz:ShowAsDockPositionAction DockPosition=Bottom}">
            <TextBox />
        </dz:DockItem>
        <dz:DockItem TabText="Output" Title="Output" ShowAction="{dz:ShowAsDockPositionAction DockPosition=Bottom}">
            <TextBox />
        </dz:DockItem>
        <dz:DockItem TabText="Solution Explorer" Title="Solution Explorer" ShowAction="{dz:ShowAsDockPositionAction DockPosition=Right}">
            <TextBox />
        </dz:DockItem>
        <dz:DockItem TabText="Properties" Title="Properties" ShowAction="{dz:ShowAsDockPositionAction DockPosition=Right}">
            <TextBox />
        </dz:DockItem>
    </dz:DockControl>
</Window>
List of ShowAction Objects
ShowAction Description
ShowAsDockPositionAction Show DockItem as specified dock position.
ShowAsFloatingAction Show DockItem as floating window.
ShowAsSidePaneAction Show DockItem as side by side DockPane.
ShowAsTabbedAction Show DockItem as tabbed.

Show DockItem by Code

To show DockItem by code is extremely easy: simply call one of the overloaded Show methods. The following code snippet is equivalent of the previous XAML code:

C#
VB
Copy 
... // Code omited: create instance of welcome, savedState, output, solutionExplorer, properties
welcome.Show(dockControl, DockPosition.Document);
savedState.Show(dockControl, DockPosition.Bottom);
output.Show(dockControl, DockPosition.Bottom);
solutionExplorer.Show(dockControl, DockPosition.Right);
properties.Show(dockControl, DockPosition.Right);
... ' Code omited: create instance of welcome, savedState, output, solutionExplorer, properties
welcome.Show(dockControl, DockPosition.Document)
savedState.Show(dockControl, DockPosition.Bottom)
output.Show(dockControl, DockPosition.Bottom)
solutionExplorer.Show(dockControl, DockPosition.Right)
properties.Show(dockControl, DockPosition.Right)

No code example is currently available or this language may not be supported.

Note Note
Calling Show method will implicitly add this DockItem into DockItems collection, you don't need to add it to the collection explicitly.
See Also

Reference

DockControl
DockItem
previous page start next page