0

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.

Phil
  • 1,852
  • 2
  • 28
  • 55

1 Answers1

0

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.
loxxy
  • 12,990
  • 2
  • 25
  • 56
  • Thanks, this part is useful, but i guess i'm not finding the mouseover section that trivial. I guess what i'm looking for is something like a three-state expander, one that represents unpinned/collapsed(mouse is NOT over), unpinned/expanded(mouse IS over) and pinned/expanded. Based on the value of that three state, i would know what grid.column to put it in. I won't even get into the issues with rotating the header 90 degrees when unpinned/collapsed, and yet still having it actually collapse (it seems to retain the width when i do that for some reason). – Phil Sep 14 '11 at 20:54