WPF pinning option that does not fill height

I'm looking for a WPF option that shows panels on the sides, and allows you to pin/unpin them. Basically this means a Window, with a main control 开发者_运维技巧in the center and multiple different panels on both the left and right sides of this main control. These panels are collapsed by default, with just their headers visible, and if i hover over them they expand out OVER the main control (without displacing the main control), but i also have the option to pin this panel, where it stays permanantly expanded out, this time forcing the main center control to resize.

Now this sounds pretty much like most docking control options, and indeed i've looked at Avalon and MixModes Synergy , but the problem with these options is that their panels fill out the entire height. I want a panel of a specific height to come out when i hover over it, i don't want it to fill out to screen, and i can't really find anything else that does that. Anyone else seen something like this?

Basically my own ideas on how to do this so far involve programmatically moving the panel from one pinned control to another non-pinned control, but this sounds crazy ugly and i'd love alternatives.

Here is a pure XAMl example of how you can achieve Pin/Unpin functionality.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>


    <DockPanel Grid.Column="1">
        <Label Content="Main Content Area" FontSize="22"
               VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </DockPanel>

    <StackPanel HorizontalAlignment="Left">
        <StackPanel.Style>
            <Style>
                <Setter Property="Grid.Column" Value="1"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=LeftPinBtn,Path=IsChecked}" Value="True">
                        <Setter Property="Grid.Column" Value="0"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Style>
        <ToggleButton Content="Pin/Unpin" x:Name="LeftPinBtn"/>
    </StackPanel>

</Grid>

In the above code,

• The left panel lies (floats) on the same grid column of the Main content.
• When the ToggleButton is checked they jump to their respective docking grid column.

You may customize this example & include the mouseover events which will show/hide the panels.

• Adding a Grid column to the right + HorizontalAlignment="Right" will give you right panel.
• Similarly using Rows (instead of columns) & VerticalAlignment will add top/bottom pin functionality.