how to extend WPF GridRow Contents into next row without expanding the current row.

Question

Hello,

I'm new to WPF and I'm trying to build a dropdown menu using the expander. Page layout is being handled with a Grid.

The extender sits inside the first row of the grid and I would I would like the contents of the expander to expand over top of the contents of everything below when it's clicked. Unfortunately, right now, the entire row is expanded to accommodate the height of the expanded control.

I tried playing around with the ZIndex of the Expander but it doesn't seem to have any effect. No matter what, the row always expands forcing everything else on the page to move.

<Expander FontSize="18" Name="moduleSelect" Width="100" Header=" Goto -> " 
              Background="#000033" MouseEnter="moduleSelect_MouseEnter" 
              MouseLeave="moduleSelect_MouseLeave" Foreground="White"
              Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" HorizontalAlignment="Left">
        <StackPanel>
            <Button Name="btnTasks" Width="100" Foreground="White" Background="#000033">Tasks</Button>
            <Button Name="btnNotes" Width="100" Foreground="White" Background="#000033">Notes</Button>
        </StackPanel>
    </Expander>

How can I make this expand 'above' the subsequent rows without distorting the grid?

Answer 1

The built-in drop-down control makes use of a Popup control in its default control template to do a similar thing.

Answer 2

What would happen if you set the Grid.RowSpan of the Expander to 2 (or how ever many rows you'd like it to span when expanded)?

So, for a two-row grid, you'd have something like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="30" /> <!--set this to the height of the expander's header area-->
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <WhateverGoesInRow2 Grid.Row="1" />
    <Expander FontSize="18" Name="moduleSelect" Width="100" Header=" Goto -> " 
        Background="#000033" MouseEnter="moduleSelect_MouseEnter" 
        MouseLeave="moduleSelect_MouseLeave" Foreground="White"
        Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Left"
        Grid.Row=0 Grid.RowSpan="2">
        <StackPanel>
            <Button Name="btnTasks" Width="100" Foreground="White" Background="#000033">Tasks</Button>
            <Button Name="btnNotes" Width="100" Foreground="White" Background="#000033">Notes</Button>
        </StackPanel>
    </Expander>
</Grid>

You may need to adjust your RowDefinition section for your particular situation, but if I'm understanding your problem correctly, I think this will work.

Answer 3

You want something that pops up over the grid, not expands within the grid. A ComboBox, say, or - this being a menu, after all - a ContextMenu.

You could also build some combination of a ToggleButton and a Popup, but that's essentially the same thing as a ComboBox with IsEditable turned off.