Fill remaining space of parent with 2 or more expanders WPF

Question

I have 2 expanders inside a dockPanel, i need to fill all the height available inside de dockPanel when a expander is opened and if both of them are open, i need each expander to take the half of the available height so they can fill all the space. Here is my code:

<DockPanel Background="Black">
                    <Expander Name="articlesExpander" Template="{StaticResource ExpanderHeaderImage}" DockPanel.Dock="Top">
                        <Grid Name="articlesGridExpander" ShowGridLines="True" Background="#FFEC0000">
                            <TextBlock>Hello</TextBlock>
                        </Grid>
                    </Expander>
                    <Expander Name="turneroExpander" Template="{StaticResource ExpanderHeaderImage}" DockPanel.Dock="Bottom">
                        <Grid Name="turneroGridExpander" ShowGridLines="True" Height="{Binding ElementName=DummyExpanderHeight, Path=Height}" Background="#FF0AE400">
                            <TextBlock>Bye</TextBlock>
                        </Grid>
                    </Expander>
                </DockPanel>

Here i describe the 3 possible states of the expanders:

1) the first expander is open and the second is closed. As you can see the first expander does not take all the avialble height:

2) The second expander is open and the first expander is closed. This is the right behaviour i would like to have with both expanders:

3) Both expanders are open. I need them to take half and a half height:

How can i achieve the right behaviour of the expanders?

Answer 1

You can achieve what you want using pure XAML if using a Grid instead of DockPanel. I don't see the purpose of using DockPanel in this case. Otherwise you need code behind (some Converter) to resize the Expanders correctly.

The idea here is we need a Grid having 2 rows, when the contained Expander is collapsed, the row's Height should be Auto, otherwise the row's Height should be *. When the 2 Expanders are expanded, both the rows have Height of * and each one will share half the whole Height of the Grid:

<Grid Background="Black">
      <Grid.Resources>
         <Style TargetType="RowDefinition">
             <Setter Property="Height" Value="Auto"/>
             <Style.Triggers>
                 <DataTrigger Binding="{Binding Tag.IsExpanded, RelativeSource={RelativeSource Self}}" 
                              Value="True">
                     <Setter Property="Height" Value="*"/>
                 </DataTrigger>
             </Style.Triggers>
         </Style>
      </Grid.Resources>
      <Grid.RowDefinitions>
         <RowDefinition Tag="{Binding ElementName=articlesExpander}"/>
         <RowDefinition Tag="{Binding ElementName=turneroExpander}"/>
      </Grid.RowDefinitions>
      <Expander Name="articlesExpander" Template="{StaticResource ExpanderHeaderImage}">
            <Grid Name="articlesGridExpander" ShowGridLines="True" Background="#FFEC0000">
              <TextBlock>Hello</TextBlock>
            </Grid>
      </Expander>
      <Expander Name="turneroExpander" Template="{StaticResource ExpanderHeaderImage}" Grid.Row="1">
            <Grid Name="turneroGridExpander" ShowGridLines="True" Height="{Binding ElementName=DummyExpanderHeight, Path=Height}" Background="#FF0AE400">
               <TextBlock>Bye</TextBlock>
            </Grid>
      </Expander>
 </Grid>