c# - 用 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

如果使用 Grid 而不是 DockPanel，您可以使用纯 XAML 实现您想要的。在这种情况下，我看不到使用 DockPanel 的目的。否则，您需要隐藏代码(某些转换器)才能正确调整扩展器的大小。

这里的想法是我们需要一个有 2 行的网格，当包含的 Expander 折叠时，行的高度应该是 Auto，否则行的高度应该是 * .当 2 个 Expanders 展开时，两行的高度均为 *，每行将共享整个网格高度的一半:

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