How to make a control from a StackPanel visible on top of another control

Question

In my window I have a DockPanel with a StackPanel holding a custom UserControl on the left, and a Grid with a ListBox on the right. My UserControl contains an Expander with a ListBox.

This is the code from the window:

<Window ...>
    <DockPanel>
        <StackPanel Width="100" DockPanel.Dock="Left">
            <localp:NeumesPanel/> <!-- This is the UserControl -->
        </StackPanel>
        <Grid Margin="10" DockPanel.Dock="Right">
            <ListBox .../>
        </Grid>
    </DockPanel>
</Window>

Right now, when I expand the Expander, part of it doesn't show since the StackPanel's Width is narrower than the Width of Expander's content. Like this: http://screenshooter.net/100101493/xfcfxau

What I'd like to achieve is to have the Expander show over my Grid without compromising on the Grid's Width - I don't want the StackPanel wider than it currently is. How to do it? Is it possible?

Answer 1

Karl Shifflet has done something like that: Expander with popup

Summary of the solution:

• Wrap the Expander control inside a Canvas control.
• Constrain the Canvas height to the desired height when the Expander control is collapsed.
• Set the Canvas Panel.ZIndex higher than controls you want to overlay.
• Style and design your Expander Content so that it looks like a PopUp.

Edit:

In your case, you need to set the Panel.ZIndex on the StackPanel containing your UserControl.