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

Question

我在 dockPanel 内有 2 个扩展器，我需要在打开扩展器时填充 de dockPanel 内的所有可用高度，如果它们都打开，我需要每个扩展器占用可用高度的一半，所以他们可以填满所有 space。这是我的代码：

<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

您可以使用 pure 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>

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

Fill remaining space of parent with 2 or more expanders WPF

c#

wpf

expander

dockpanel