WPF DevComponents Dock Control will not fill screen.

Question

I am using the DevComponents third-party control to create a screen with multiple docking components organized in three rows, the last row having three columns. I have been successful in creating this layout, however I cannot figure out how to expand the height of the DockSite to the borders of the screen.

I have posted the XAML below:

<UserControl x:Class="Docking_UC"
xmlns:my="clr-namespace:DevComponents.WpfDock;assembly=DevComponents.WpfDock"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="714" Width="1057">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MinHeight="83"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid HorizontalAlignment="Stretch" Margin="0" Name="bodyGrid" Width="Auto" Grid.Row="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="71" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <WrapPanel>
            <Label>Dock Test #</Label>
            <Label>1</Label>
        </WrapPanel>
        <Rectangle Height="12" Name="menuRectangle" Stroke="Black" VerticalAlignment="Bottom" Fill="SteelBlue" Opacity="0.25" Grid.Row="1" />
    </Grid>
    <my:DockSite Background="Transparent" Name="dashDockSiteAll" Grid.Row="1">
        <my:DockSite.SplitPanels>
            <my:SplitPanel Orientation="Vertical" my:DockSite.Dock="Top" my:DockSite.DockSize="714">
                <my:SplitPanel Orientation="Vertical">
                    <my:DockWindowGroup my:SplitPanel.RelativeSize="50,135">
                        <my:DockWindow Header="Top" Name="dockWindowTop">
                            <Label>2</Label>
                        </my:DockWindow>
                    </my:DockWindowGroup>
                    <my:DockWindowGroup my:SplitPanel.RelativeSize="50,220">
                        <my:DockWindow Header="MidWindowTab1" Name="dockWindowMid1">
                            <Label>3</Label>
                        </my:DockWindow>
                        <my:DockWindow Header="MidWindowTab2" Name="dockWindowMid2">
                            <Label>4</Label>
                        </my:DockWindow>
                    </my:DockWindowGroup>
                    <my:DockWindowGroup my:SplitPanel.RelativeSize="50,150">
                        <my:DockWindow Header="Bottom" Name="dockWindowBottom">
                            <my:SplitPanel Orientation="Horizontal" my:SplitPanel.RelativeSize="50,150">
                                <my:DockWindowGroup>
                                    <my:DockWindow Header="BottomLeft">
                                        <Label>5</Label>
                                    </my:DockWindow>
                                </my:DockWindowGroup>
                                <my:DockWindowGroup>
                                    <my:DockWindow Header="BottomMid">
                                        <Label>6</Label>
                                    </my:DockWindow>
                                </my:DockWindowGroup>
                                <my:DockWindowGroup>
                                    <my:DockWindow Header="BottomRight">
                                        <Label>7</Label>
                                    </my:DockWindow>
                                </my:DockWindowGroup>
                            </my:SplitPanel>
                        </my:DockWindow>
                    </my:DockWindowGroup>
                </my:SplitPanel>
            </my:SplitPanel>
        </my:DockSite.SplitPanels>
    </my:DockSite>
</Grid>

I have tried removing the DockSite.Site property but then the DockSite defaults to a Left Docked. Also, upon docking one window to the Bottom site there still remains an empty area about the height of the cursor that I cannot remove. This has been giving me trouble for about a day now and any thoughts and help would be greatly appreciated.

Thank you in advance,

Patrick

Answer 1

OK, so after another day of troubleshooting/messing around with the control I finally discovered what I have been trying to accomplish. I have added a my:SplitPanel to the DockSite outside of the tag and apparently this SplitPanel will automatically dock to the remaining white space.

The corrected code is below and the additions are obscenely tabbed over:

<UserControl x:Class="Docking_UC" xmlns:my="clr-namespace:DevComponents.WpfDock assembly=DevComponents.WpfDock" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="714" Width="1057">
<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" MinHeight="83"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" Margin="0" Name="bodyGrid" Width="Auto" Grid.Row="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="71" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <WrapPanel>
        <Label>Dock Test #</Label>
        <Label>1</Label>
    </WrapPanel>
    <Rectangle Height="12" Name="menuRectangle" Stroke="Black" VerticalAlignment="Bottom" Fill="SteelBlue" Opacity="0.25" Grid.Row="1" />
</Grid>
<my:DockSite Background="Transparent" Name="dashDockSiteAll" Grid.Row="1">
    <my:DockSite.SplitPanels>
        <my:SplitPanel Orientation="Vertical" my:DockSite.Dock="Top" my:DockSite.DockSize="714">
            <my:SplitPanel Orientation="Vertical">
                <my:DockWindowGroup my:SplitPanel.RelativeSize="50,135">
                    <my:DockWindow Header="Top" Name="dockWindowTop">
                        <Label>2</Label>
                    </my:DockWindow>
                </my:DockWindowGroup>
                <my:DockWindowGroup my:SplitPanel.RelativeSize="50,220">
                    <my:DockWindow Header="MidWindowTab1" Name="dockWindowMid1">
                        <Label>3</Label>
                    </my:DockWindow>
                    <my:DockWindow Header="MidWindowTab2" Name="dockWindowMid2">
                        <Label>4</Label>
                    </my:DockWindow>
                </my:DockWindowGroup>
            </my:SplitPanel>
        </my:SplitPanel>
    </my:DockSite.SplitPanels>
                 <my:SplitPanel Orientation="Horizontal" my:DockSite.DockSize="100">
                       <my:SplitPanel Orientation="Horizontal" my:SplitPanel.RelativeSize="50,100">
                            <my:DockWindowGroup>
                                <my:DockWindow Header="BottomLeft">
                                    <Label>5</Label>
                                </my:DockWindow>
                            </my:DockWindowGroup>
                            <my:DockWindowGroup>
                                <my:DockWindow Header="BottomMid">
                                    <Label>6</Label>
                                </my:DockWindow>
                            </my:DockWindowGroup>
                            <my:DockWindowGroup>
                                <my:DockWindow Header="BottomRight">
                                    <Label>7</Label>
                                </my:DockWindow>
                            </my:DockWindowGroup>
                        </my:SplitPanel>
                     </my:SplitPanel>
</my:DockSite>
</Grid>

Hope this helps anyone else having the same issue.

Also, if anyone with enough reputation reads this, would you please add a DevComponents tag?