Using Expander in Grid, having expanded area use all space

Question

I have an Expander in a Grid. Is there an easy way to let the expander use the avaible space (perhaps a full row in the grid)?

Here is an example of what I am trying to do:

<Window x:Class="WpfExpanderSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*"  />
            <ColumnDefinition Width="1*"  />
            <ColumnDefinition Width="1*"  />
            <ColumnDefinition Width="1*"  />
            <ColumnDefinition Width="2*"  />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Text="11111" />
        <TextBlock Grid.Column="1" Text="22222" />
        <TextBlock Grid.Column="2" Text="33333" />
        <TextBlock Grid.Column="3" Text="44444" />
        <TextBlock Grid.Column="4" Text="55555" />
        <Expander Grid.Column="5" Header="Expand me" ExpandDirection="Down" FlowDirection="RightToLeft" >
            <TextBlock Grid.Row="1" Text="Expanded text which is eventually very long and shall take all space available" />
        </Expander>
    </Grid>
</Window>

Now I want the expanded area to "occupy" a full row in the grid. It seems to only take the remaining space that is in that one GridCell. Can the expanded content be displayed anywhere else?

Do I have to make an extra Button to achieve what I want? (setting some visible attribute for the expanded area or something like that)?

Answer 1

I would say the easiest way of doing what you're asking for is not to use Expander. You can just put Grid on top with some ToggleButton to the right and control below which Visibility will depend on ToggleButton.IsChecked

<StackPanel>
   <StackPanel.Resources>
       <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
   </StackPanel.Resources>
   <Grid>
       <Grid.ColumnDefinitions>
           <ColumnDefinition/>
           <ColumnDefinition/>
           <ColumnDefinition/>
           <ColumnDefinition/>
           <ColumnDefinition/>
       </Grid.ColumnDefinitions>
       <TextBox Text="0" Grid.Column="0"/>
       <TextBox Text="1" Grid.Column="1"/>
       <TextBox Text="2" Grid.Column="2"/>
       <TextBox Text="3" Grid.Column="3"/>
       <ToggleButton Content="V" Grid.Column="4" x:Name="btnExpander"/>
   </Grid>
   <Grid Visibility="{Binding ElementName=btnExpander, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
       <TextBlock Text="LongText"/>
   </Grid>
</StackPanel>

of course ToggleButton needs some decent Template but it's just to give you an example