rowspan - wpf grid two columns

Ocultar fila de cuadrícula en WPF

Question

Tengo un formulario WPF simple con una Grid declarada en el formulario. Esta Grid tiene un montón de filas:

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

La fila llamada rowToHide contiene algunos campos de entrada y quiero ocultar esta fila después de detectar que no necesito estos campos. Es lo suficientemente simple para establecer Visibility = Hidden para todos los elementos en la fila, pero la fila aún ocupa espacio en la Grid . Intenté establecer Height = 0 en los elementos, pero eso no pareció funcionar.

Puede pensarlo de esta manera: tiene un formulario, allí tiene un menú desplegable que dice "Tipo de pago", y si la persona selecciona "Efectivo", desea ocultar la fila que contiene los detalles de la Tarjeta. No es una opción iniciar el formulario con este oculto ya.

Answer 1

Como referencia, Visibility es una enumeración System.Windows.Visibility tres estados:

• Visible: el elemento se representa y participa en el diseño.
• Colapsado: el elemento es invisible y no participa en el diseño. Efectivamente le da un alto y ancho de 0 y se comporta como si no existiera.
• Oculto: el elemento es invisible pero continúa participando en el diseño.

Vea este consejo y otros consejos sobre el hilo Sugerencias y trucos de WPF .

Answer 2

En lugar de manipular la Fila de cuadrícula, puede establecer la propiedad Visibilidad de los Controles (campos en la fila) en "Contraída". Esto asegurará que los controles no ocupen espacio y si tiene Altura de fila de cuadrícula = "Auto", entonces la fila se ocultará ya que todos los controles en la fila tienen Visibilidad = "Contraída".

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

Este método es mejor porque la visibilidad de los controles se puede vincular a alguna propiedad con la ayuda de un convertidor.

Answer 3

Establezca la visibilidad del contenido de la fila en Visibility.Collapsed lugar de Hidden. Esto hará que el contenido deje de ocupar espacio, y la fila se reducirá adecuadamente.

Answer 4

La mejor y más limpia solución para colapsar filas o columnas es usar un DataTrigger para que en su caso:

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

Answer 5

Row no tiene una propiedad de Visibilidad, por lo que otros han dicho, necesita establecer la Altura. Otra opción es usar un convertidor, en caso de que necesite esta funcionalidad en muchas vistas:

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

Y luego en la vista apropiada <Grid.RowDefinition> :

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

Answer 6

Simplemente haz esto:
rowToHide.Height = new GridLength(0);

si usará la visibility.Collapse Contraer, debe configurarlo para cada miembro de la fila.

Answer 7

También puede hacer esto haciendo referencia a la fila en la cuadrícula y luego cambiando la altura de la misma.

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

Si bien el Colapso de los elementos dentro de la Grilla también funciona, esto es un poco más simple si tiene muchos elementos en la Grilla que no tienen un elemento circundante que pueda colapsarse. Esto proporcionaría una buena alternativa.

Answer 8

Tenía una idea similar al heredar RowDefinition (solo por interés)

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

Ahora puedes usarlo de la siguiente manera:

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

y alternar con

RowToHide.IsHidden = !RowToHide.IsHidden;