如何使用可折叠项目的网格行和列?

时间:2013-06-30 20:59:07

标签: c# wpf grid

我有一个内部有几个项目的网格,并非所有项目都可见:有些项目已折叠。 WPF是否有一种简单的方法可以在新项目显示时调整网格中已经可见的项目?

实际上我的需求比这简单:我只有两个必须垂直堆叠的物品。大多数时候只有一个可见,但是当第二个出现时,我需要第一个调整大小为网格大小的2/3,第二个放在下面填充剩余的位置:1/3。< / p>

enter image description here

我觉得我必须使用Grid.Row属性(可能还有Grid.RowSpan),但我不知道如何在代码隐藏中搞砸了所需的行为。

我尝试过将自动尺寸与LastChildFill的{​​{1}}属性混合,但没有成功。

1 个答案:

答案 0 :(得分:1)

您可以尝试以下方式:

<Grid Background="Green">
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition>
      <RowDefinition.Style>
        <Style TargetType="{x:Type RowDefinition}">
          <Setter Property="Height"
                  Value="0.25*" />
          <Style.Triggers>
            <DataTrigger Binding="{Binding ElementName=secondRect,
                                            Path=Visibility}"
                          Value="Collapsed">
              <Setter Property="Height"
                      Value="0" />
            </DataTrigger>
          </Style.Triggers>
        </Style>
      </RowDefinition.Style>
    </RowDefinition>
  </Grid.RowDefinitions>
  <!--  Row 1  -->
  <Rectangle Grid.Row="0"
              Fill="Blue" />
  <!--  Row 2  -->
  <Rectangle x:Name="secondRect"
              Grid.Row="1"
              Fill="Tomato" />
</Grid>

所以你在第二个Grid行上设置一个Style.Trigger来检查它包含的元素是否为Collapsed,如果是这样,将它的高度设置为“0”,如果不是,则为“0.25 *”虽然Grid第1行将Height作为*或“所有剩余空间”,但这将与此罚款相关。

<强>替代:

您可以像{0}一样使用Grid.RowSpan

<Grid Background="Green">
  <Grid.RowDefinitions>
    <RowDefinition Height="0.75*" />
    <RowDefinition Height="0.25*" />
  </Grid.RowDefinitions>
  <!--  Row 1  -->
  <Rectangle Grid.Row="0"
              Fill="Blue">
    <Rectangle.Style>
      <Style TargetType="{x:Type Rectangle}">
        <Setter Property="Grid.RowSpan"
                Value="1" />
        <Style.Triggers>
          <DataTrigger Binding="{Binding ElementName=secondRect,
                                          Path=Visibility}"
                        Value="Collapsed">
            <Setter Property="Grid.RowSpan"
                    Value="2" />
          </DataTrigger>
        </Style.Triggers>
      </Style>
    </Rectangle.Style>
  </Rectangle>
  <!--  Row 2  -->
  <Rectangle x:Name="secondRect"
              Grid.Row="1"
              Fill="Tomato"
              Visibility="Collapsed" />
</Grid>

现在你在第1行的“元素”上得到Trigger而不是Grid.RowDefinition,当你检测到第二行的元素变为Collapsed时,你将第一行的RowSpan切换为2否则它会保持在1。