WPF: How to make a Expander overflow and fill window.

Question

I'm trying to create a expander that has a togglebutton/header as a slim bar to the left but when expanded fills over the rest of the window, even over material that's already there.

I'm not really sure what the best way to do it is. I thought perhaps of a grid with 2 columns. First would have the expander, second the other material. Next I would have a trigger that would set the second column width to zero when the Expander IsExpanded.

I'm not really sure how to get that to work or even how to do it properly.

Here is some code example:

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


        <Expander ExpandDirection="Right" IsExpanded="True">

            <Expander.Resources>
                <Style TargetType="Expander">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Expander" >

                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsExpanded" Value="True" >
                                        <Setter TargetName="SecondColumn" Property="ColumnDefinition.Width" Value="0" />
                                    </Trigger>
                                </ControlTemplate.Triggers>

                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Expander.Resources>

            <ListBox >
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
        </Expander>

        <TabControl Grid.Column="1" />

    </Grid>

I wan't the listbox to be seen when expanded, otherwise the TabControl

Any ideas?

Answer 1

It sounds like you're wanting to do something similar to Karl Shifflett's example here. He's just modifying the z-index of the content control in this case and setting the row height manually to give the illusion of a popup, so you'd want to make sure you're not trying to ZIndex other visual elements similarly.

You will want to make sure you're setting ColumnSpan and RowSpan on your Expander so that when it does expand it covers the content of those rows.