在 WPF 中隐藏网格行

Hide grid row in WPF

提问by Richard

I have a simple WPF form with a Griddeclared on the form. This Gridhas a bunch of rows:

我有一个简单的 WPF 表单，在表单上Grid声明了一个。这Grid有一堆行：

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" MinHeight="30" />
    <RowDefinition Height="Auto" Name="rowToHide" />
    <RowDefinition Height="Auto" MinHeight="30" />
</Grid.RowDefinitions>

The row named rowToHidecontains a few input fields and I want to hide this row after I detect I don't need these fields. It's simple enough to just set Visibility = Hiddento all items in the row, but the row still takes up space in the Grid. I tried setting Height = 0to the items, but that didn't seem to work.

命名的行rowToHide包含一些输入字段，我想在检测到不需要这些字段后隐藏该行。只需将其设置Visibility = Hidden为行中的所有项目就足够简单了，但该行仍会占用Grid. 我尝试设置Height = 0项目，但这似乎不起作用。

You can think of it like this: You have a form, in there you have a drop down saying "Payment Type", and if the person selects "Cash", you want to hide the row containing the Card details. It isn't an option to start the form with this hidden already.

你可以这样想：你有一个表格，在那里你有一个下拉菜单，上面写着“付款类型”，如果这个人选择了“现金”，你想隐藏包含卡详细信息的行。已经隐藏了这个表单不是一个选项。

采纳答案by testpattern

Row does not have a Visibility property, so as others have said, you need to set the Height. Another option is to use a converter, in case you need this functionality in many views:

Row 没有 Visibility 属性，所以正如其他人所说，您需要设置 Height。另一种选择是使用转换器，以防您在许多视图中需要此功能：

    [ValueConversion(typeof(bool), typeof(GridLength))]
    public class BoolToGridRowHeightConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return ((bool)value == true) ? new GridLength(1, GridUnitType.Star) : new GridLength(0);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {    // Don't need any convert back
            return null;
        }
    }

And then in the appropriate view <Grid.RowDefinition>:

然后在适当的视图中<Grid.RowDefinition>：

<RowDefinition Height="{Binding IsHiddenRow, Converter={StaticResource BoolToGridRowHeightConverter}}"></RowDefinition>

回答by Luká? Koten

The best and clean solution to collapse rows or columns is to use a DataTrigger so in your case:

折叠行或列的最佳和干净的解决方案是使用 DataTrigger，因此在您的情况下：

<Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" MinHeight="30" />
      <RowDefinition Name="rowToHide">
        <RowDefinition.Style>
          <Style TargetType="{x:Type RowDefinition}">
            <Setter Property="Height" Value="Auto" />
            <Style.Triggers>
              <DataTrigger Binding="{Binding SomeBoolProperty}" Value="True">
                <Setter Property="Height" Value="0" />
              </DataTrigger>
            </Style.Triggers>
          </Style>
        </RowDefinition.Style>
      </RowDefinition>
      <RowDefinition Height="Auto" MinHeight="30" />
    </Grid.RowDefinitions>
  </Grid>

回答by TravisPUK

You can also do this by referencing the Row in the Grid and then changing the Height of the row itself.

您也可以通过引用网格中的行然后更改行本身的高度来完成此操作。

XAML

XAML

<Grid Grid.Column="2" Grid.Row="1" x:Name="Links">
   <Grid.RowDefinitions>
      <RowDefinition Height="60" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="80" />
   </Grid.RowDefinitions>
</Grid>

VB.NET

网络

If LinksList.Items.Count > 0 Then
   Links.RowDefinitions(2).Height = New GridLength(1, GridUnitType.Star)
Else
   Links.RowDefinitions(2).Height = New GridLength(0)
End If

Whilst the Collapsing of the elements within the Grid also works, this is a bit simpler if you have many items in the Grid that does not have an enclosing element that can be collapsed. This would provide a good alternative.

虽然网格内元素的折叠也有效，但如果网格中有许多没有可以折叠的封闭元素的项目，这会更简单一些。这将提供一个很好的选择。

回答by Metro Smurf

For reference, Visibilityis a three-state System.Windows.Visibilityenumeration:

作为参考，Visibility是一个三态System.Windows.Visibility枚举：

• Visible - The element gets rendered and participates in layout.
• Collapsed - The element is invisible and does not participate in layout. Effectively giving it a height and width of 0 and behaving as if it doesn't exist.
• Hidden - The element is invisible but continues to participate in layout.

• 可见 - 元素被渲染并参与布局。
• Collapsed - 元素不可见，不参与布局。有效地为其设置高度和宽度为 0 并表现得好像它不存在一样。
• 隐藏 - 元素不可见，但继续参与布局。

See this tipand other tips on the WPF Tips and Tricksthread.

请参阅WPF 提示和技巧线程上的此提示和其他提示。

回答by user3726565

Instead of fiddling with the Grid Row, you can set the Visibility property of the Controls (fields in the row) to "Collapsed". This will ensure that the controls don't take up any space and if you have Grid Row Height="Auto", then the row will be hidden as all the controls in the row have Visibility="Collapsed".

您可以将控件（行中的字段）的可见性属性设置为“折叠”，而不是摆弄网格行。这将确保控件不占用任何空间，如果您有 Grid Row Height="Auto"，那么该行将被隐藏，因为该行中的所有控件都具有 Visibility="Collapsed"。

<Grid>
       <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="Auto" Name="rowToHide" />
       </Grid.RowDefinitions>

   <Button Grid.Row=0 Content="Click Me" Height="20">
       <TextBlock Grid.Row=1 
Visibility="{Binding Converter={StaticResource customVisibilityConverter}}" Name="controlToHide"/>

</Grid>

This method is better because the Visibility of the controls can be bound to some property with the help of a Converter.

这种方法更好，因为控件的 Visibility 可以在 Converter 的帮助下绑定到某些属性。

回答by USER_NAME

Simply do this:
rowToHide.Height = new GridLength(0);

只需这样做：
rowToHide.Height = new GridLength(0);

if u will use visibility.Collapsethen u have to set it for every member of the row.

如果您将使用，visibility.Collapse那么您必须为该行的每个成员设置它。

回答by Reed Copsey

Set the Row's content visibility to Visibility.Collapsedinstead of Hidden. This will make the content stop taking up space, and the row will shrink appropriately.

将行的内容可见性设置为Visibility.Collapsed而不是隐藏。这将使内容不再占用空间，并且行将适当缩小。

回答by Matt

I had a similar idea by inheriting RowDefinition (just for interest)

我通过继承 RowDefinition 有一个类似的想法（只是为了兴趣）

public class MyRowDefinition : RowDefinition
{
    private GridLength _height;

    public bool IsHidden
    {
        get { return (bool)GetValue(IsHiddenProperty); }
        set { SetValue(IsHiddenProperty, value); }
    }

    // Using a DependencyProperty as the backing store for IsHidden.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty IsHiddenProperty =
        DependencyProperty.Register("IsHidden", typeof(bool), typeof(MyRowDefinition), new PropertyMetadata(false, Changed));

    public static void Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var o = d as MyRowDefinition;
        o.Toggle((bool)e.NewValue);
    }

    public void Toggle(bool isHidden)
    {
        if (isHidden)
        {
            _height = this.Height;
            this.Height = new GridLength(0, GridUnitType.Star);
        }                                                     
        else
            this.Height = _height;
    }          
}

Now you can use it as following:

现在您可以按如下方式使用它：

 <Grid.RowDefinitions>
        <RowDefinition Height="2*" />
        <my:MyRowDefinition Height="4*" IsHidden="false" x:Name="RowToHide" />
        <RowDefinition Height="*" />
        <RowDefinition Height="60" />
    </Grid.RowDefinitions>

and toggle with

并切换

RowToHide.IsHidden = !RowToHide.IsHidden;