WPF:折叠网格分配器



我有一个WPF页面,上面有一个网格。

有三行。 第 0 行包含带有 Height="*" 的网格视图。第 1 行包含一个带有 Height="auto" 的网格拆分器。第 2 行包含带有 Height="2*" 的详细信息表单。

事情是这样的 - 我有一个按钮,应该可以切换详细信息表单的可见性。这很好用。除了它只是隐藏第 2 行中的表单外,它不会展开第 0 行中的网格来填充空间。 我想要的是按钮切换第 0 行中的 GridView 以占用所有空间,然后切换回原来的位置。

显然,在行内玩弄表单的可见性不会实现我想要的。

但是我需要玩什么呢?

如果有人想要纯粹的 XAML 解决方案,我能够想出一种方法来使用样式、资源库和触发器隐藏拆分器和相关行。

我为我的样式使用了静态资源,该资源设置为在设置特定绑定布尔值时更改HeightMaxHeight

<Style x:Key="showRow" TargetType="{x:Type RowDefinition}">
  <Style.Setters>
    <Setter Property="Height" Value="*"/>
  </Style.Setters>
  <Style.Triggers>
    <DataTrigger Binding="{Binding MyShowRowBool}" Value="False">
      <DataTrigger.Setters>
        <Setter Property="Height" Value="0"/>
        <Setter Property="MaxHeight" Value="0"/>
      </DataTrigger.Setters>
    </DataTrigger>
  </Style.Triggers>
</Style>

我只是将样式应用于相关的行定义,它就像一个魅力:

<Grid.RowDefinitions>
  <RowDefinition Height="*"/>
  <RowDefinition Style="{StaticResource showRow}"/>
  <RowDefinition Style="{StaticResource showRow}"/>
</Grid.RowDefinitions>

值得注意的是,我在没有MaxHeight属性的情况下尝试了它,并且它没有正确折叠。 添加它似乎已经为我解决了问题。

假设我有这个 XAML 布局:

  <Grid Name="MyGrid">
      <Grid.RowDefinitions>
          <RowDefinition />
          <RowDefinition Height="Auto" />
          <RowDefinition />
      </Grid.RowDefinitions>
      <MyControl1 ... Grid.Row="0" />
      <GridSplitter Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" ShowsPreview="True" Height="5" />
      <MyControl2 ... Grid.Row="2" />
  </Grid>

然后,我可以使用以下代码隐藏第二个控件(折叠拆分器)(相当于在 XAML 中设置Height="0"):

  MyGrid.RowDefinitions[2].Height = new GridLength(0);

并使用以下代码将其取消折叠(相当于在 XAML 中设置 Height="1*",这是 RowDefinition 的默认值):

  MyGrid.RowDefinitions[2].Height = new GridLength(1, GridUnitType.Star);

这就是拆分器在用户移动它时秘密执行的操作。

我必须引入一个附加依赖项属性才能在我自己的应用程序中处理这个问题:

<Grid c:GridSplitterController.Watch="{Binding ElementName=GS_DetailsView}">
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="200" />
    </Grid.RowDefinitions>
    <SomeControl Grid.Row="0" />
    <GridSplitter x:Name="GS_DetailsView"
                  Height="4"
                  Grid.Row="1"
                  VerticalAlignment="Top"
                  HorizontalAlignment="Stretch"
                  ResizeBehavior="PreviousAndCurrent"
                  ResizeDirection="Rows"
                  Visibility="{Binding ShowDetails,
                                       Converter={StaticResource boolvis}}" />
    <OtherControl Grid.Row="1"
                  Margin="0,4,0,0"
                  Visibility="{Binding ShowDetails,
                                       Converter={StaticResource boolvis}}" />
</Grid>

首先在DependencyObject上定义一个合适的附加属性:

public static GridSplitter GetWatch(DependencyObject obj)
{
    return (GridSplitter)obj.GetValue(WatchProperty);
}
public static void SetWatch(DependencyObject obj, GridSplitter value)
{
    obj.SetValue(WatchProperty, value);
}
public static readonly DependencyProperty WatchProperty =
    DependencyProperty.RegisterAttached(
        "Watch",
        typeof(GridSplitter),
        typeof(DependencyObject),
        new UIPropertyMetadata(null, OnWatchChanged));

然后听IsVisibleChanged

private static void OnWatchChanged(DependencyObject obj,
    DependencyPropertyChangedEventArgs e)
{
    if (obj == null) return;
    if (obj is Grid)
    {
        var grid = obj as Grid;
        var gs = e.NewValue as GridSplitter;
        if (gs != null)
        {
            gs.IsVisibleChanged += (_sender, _e) =>
                {
                    UpdateGrid(
                        grid,
                        (GridSplitter)_sender,
                        (bool)_e.NewValue,
                        (bool)_e.OldValue);
                };
        }
    }
}

监视这些更改后,您需要保存或还原正在监视的行或列中的GridLength值(为简洁起见,我只包括行):

// Given: static Dictionary<DependencyObject, GridLength> oldValues;
private static void UpdateGrid(Grid grid, GridSplitter gridSplitter, bool newValue, bool oldValue)
{
    if (newValue)
    {
        // We're visible again
        switch (gridSplitter.ResizeDirection)
        {
        case GridResizeDirection.Columns:
            break;
        case GridResizeDirection.Rows:
            int ridx = (int)gridSplitter.GetValue(Grid.RowProperty);
            var prev = grid.RowDefinitions.ElementAt(GetPrevious(gridSplitter, ridx));
            var curr = grid.RowDefinitions.ElementAt(GetNext(gridSplitter, ridx));
            if (oldValues.ContainsKey(prev) && oldValues.ContainsKey(curr))
            {
                prev.Height = oldValues[prev];
                curr.Height = oldValues[curr];
            }
            break;
        }
    }
    else
    {
        // We're being hidden
        switch (gridSplitter.ResizeDirection)
        {
        case GridResizeDirection.Columns:
            break;
        case GridResizeDirection.Rows:
            int ridx = (int)gridSplitter.GetValue(Grid.RowProperty);
            var prev = grid.RowDefinitions.ElementAt(GetPrevious(gridSplitter, ridx));
            var curr = grid.RowDefinitions.ElementAt(GetNext(gridSplitter, ridx));
            switch (gridSplitter.ResizeBehavior)
            {
                // Naively assumes only one type of collapsing!
                case GridResizeBehavior.PreviousAndCurrent:
                    oldValues[prev] = prev.Height;
                    prev.Height = new GridLength(1.0, GridUnitType.Star);
                    oldValues[curr] = curr.Height;
                    curr.Height = new GridLength(0.0);
                    break;
            }
            break;
        }
    }
}

剩下的就是GetPreviousGetNext的合适实现:

private static int GetPrevious(GridSplitter gridSplitter, int index)
{
    switch (gridSplitter.ResizeBehavior)
    {
        case GridResizeBehavior.PreviousAndNext:
        case GridResizeBehavior.PreviousAndCurrent:
            return index - 1;
        case GridResizeBehavior.CurrentAndNext:
            return index;
        case GridResizeBehavior.BasedOnAlignment:
        default:
            throw new NotSupportedException();
    }
}
private static int GetNext(GridSplitter gridSplitter, int index)
{
    switch (gridSplitter.ResizeBehavior)
    {
        case GridResizeBehavior.PreviousAndCurrent:
            return index;
        case GridResizeBehavior.PreviousAndNext:
        case GridResizeBehavior.CurrentAndNext:
            return index + 1;
        case GridResizeBehavior.BasedOnAlignment:
        default:
            throw new NotSupportedException();
    }
}

此 GridExpander 控件继承了 GridSpliter 的样式,该控件可能适用于您正在寻找的作业。感谢Shemesh编写了原始的Silverlight版本,我根据自己在WPF中的使用进行了改编。我发现自己几乎在尝试使用 GridSplitter 的任何地方都想要这个功能,所以它可以非常方便。

最新更新