Ẩn hàng lưới trong WPF

Tôi có một biểu mẫu WPF đơn giản với một Gridkhai báo trên biểu mẫu. Điều này Gridcó một loạt các hàng:

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

Hàng có tên rowToHidechứa một vài trường đầu vào và tôi muốn ẩn hàng này sau khi tôi phát hiện ra mình không cần những trường này. Nó đủ đơn giản để chỉ đặt Visibility = Hiddenthành tất cả các mục trong hàng, nhưng hàng vẫn chiếm không gian trong Grid. Tôi đã thử thiết lập Height = 0các mục, nhưng điều đó dường như không hoạt động.

Bạn có thể nghĩ về nó như thế này: Bạn có một biểu mẫu, trong đó bạn có một trình đơn thả xuống nói "Hình thức thanh toán", và nếu người đó chọn "Tiền mặt", bạn muốn ẩn hàng chứa chi tiết Thẻ. Nó không phải là một tùy chọn để bắt đầu biểu mẫu với điều này đã bị ẩn.

Hàng không có thuộc tính Hiển thị, vì vậy, như những người khác đã nói, bạn cần đặt Chiều cao. Một tùy chọn khác là sử dụng trình chuyển đổi, trong trường hợp bạn cần chức năng này trong nhiều chế độ xem:

    [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;
        }
    }

Và sau đó ở chế độ xem thích hợp <Grid.RowDefinition>:

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

Giải pháp tốt nhất và rõ ràng để thu gọn hàng hoặc cột là sử dụng DataTrigger để trong trường hợp của bạn:

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

Bạn cũng có thể làm điều này bằng cách tham chiếu Hàng trong Lưới và sau đó thay đổi Chiều cao của chính hàng đó.

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

Mặc dù tính năng Thu gọn các phần tử trong Grid cũng hoạt động, điều này đơn giản hơn một chút nếu bạn có nhiều mục trong Grid không có phần tử bao quanh có thể thu gọn. Điều này sẽ cung cấp một sự thay thế tốt.

Để tham khảo, Visibilitylà kiểu liệt kê System.Windows.Visibility ba trạng thái :

• Hiển thị - Phần tử được hiển thị và tham gia vào bố cục.
• Đã thu gọn - Phần tử ẩn và không tham gia vào bố cục. Hiệu quả cung cấp cho nó chiều cao và chiều rộng bằng 0 và hoạt động như thể nó không tồn tại.
• Ẩn - Phần tử vô hình nhưng vẫn tiếp tục tham gia vào bố cục.

Xem mẹo này và các mẹo khác trên chuỗi Mẹo và Thủ thuật WPF .

Thay vì loay hoay với Hàng lưới, bạn có thể đặt thuộc tính Hiển thị của Điều khiển (các trường trong hàng) thành "Đã thu gọn". Điều này sẽ đảm bảo rằng các điều khiển không chiếm bất kỳ khoảng trống nào và nếu bạn có Grid Row Height = "Auto", thì hàng đó sẽ bị ẩn vì tất cả các điều khiển trong hàng có 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>

Phương pháp này tốt hơn vì Khả năng hiển thị của các điều khiển có thể được liên kết với một số thuộc tính với sự trợ giúp của Bộ chuyển đổi.

Đơn giản chỉ cần làm điều này:
rowToHide.Height = new GridLength(0);

nếu u sẽ sử dụng visibility.Collapsethì u phải đặt nó cho mọi thành viên của hàng.

Đặt khả năng hiển thị nội dung của Hàng thành Visibility.Collapsedthay vì Ẩn. Điều này sẽ làm cho nội dung ngừng chiếm dung lượng và hàng sẽ thu nhỏ lại một cách thích hợp.

Tôi đã có một ý tưởng tương tự bằng cách kế thừa RowDefinition (chỉ để quan tâm)

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

Bây giờ bạn có thể sử dụng nó như sau:

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

và chuyển đổi với

RowToHide.IsHidden = !RowToHide.IsHidden;