使用2个或更多扩展器WPF填充父级的剩余空间

Question

我在dockPanel内有2个扩展器,我需要填充扩展器打开时de dockPanel内可用的所有高度,如果它们都打开,我需要每个扩展器占用可用高度的一半,这样它们就可以填满所有空间.这是我的代码:

<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>

这里我描述了扩展器的3种可能状态:

1)第一个膨胀器打开,第二个膨胀器关闭.正如你所看到的那样,第一个扩展器没有采用所有可用的高度:

2)第二个膨胀机打开,第一个膨胀机关闭.这是我希望与两个扩展器一起使用的正确行为:

3)两个扩展器都是开放的.我需要他们采取半个半高:

如何实现扩展器的正确行为？

Answer 1

如果使用而不是使用纯 XAML,您可以实现您想要Grid的效果DockPanel.DockPanel在这种情况下,我没有看到使用的目的.否则你需要代码(一些转换器)来正确调整扩展器的大小.

这里的想法是我们需要一个有2行的Grid,当包含的Expander折叠时,行的高度应该是Auto,否则行的高度应该是*.扩展2个扩展器时,两个行都具有高度,*并且每个行将共享整个网格高度的一半:

<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>