CODEWITHSUNDEEP
c#wpfxamlstackpanelexpander
SG_90
SG_90

Reputation: 305

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

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?

Upvotes: 1

Views: 2952

Answers (2)

Sheridan
Sheridan

Reputation: 69985

As I mentioned in my comment, using the StackPanel there could cause you problems as they don't resize their children like Grids do. Furthermore, a StackPanel won't let you display content outside its bounds. The Canvas control on the other hand will, if you set the ClipToBounds property to False.

Here is a very simple example that shows how you can do this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Canvas Background="Blue" Width="100" ClipToBounds="False">
        <Border Background="Red" Width="200" Height="50" Panel.ZIndex="10" />
    </Canvas>
</Grid>

enter image description here

Upvotes: 1

Roel van Westerop
Roel van Westerop

Reputation: 1440

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.

Upvotes: 4

Related Questions