Dynamically toggle visibility of WPF grid column from C# code

Question

My problem is: I can't find out how to toggle the visibility of my WPF grid column. Assume following XAML markup:

<Grid x:Name="myGrid">
    <Grid.RowDefinitions>
        <RowDefinition x:Name="Row1" />
        <RowDefinition x:Name="Row2" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="Column1" />
        <ColumnDefinition x:Name="Column2" />
    </Grid.ColumnDefinitions>
</Grid>

Aferwards the grid is filled with some controls etc. Now I want to hide a single column dynamically out of my C# code. I've tried achieving this by setting the the column's definition width to zero, e.g. Column1.Width = 0. This works, but I don't really like this solution - is there really no better way?

I'm looking for something like myGrid.Columns[0].Visibility = COLLAPSED or Column1.Visibility = HIDDEN. I just can't find something like that - any ideas?

Answer 1

The simplest way to do this is to add a named Grid as the top level control in the relevant column that you want to hide. Then you can just hide it and all of its contents as you would any other control:

In XAML:

<Grid x:Name="myGrid">
    <Grid.RowDefinitions>
        <RowDefinition x:Name="Row1" />
        <RowDefinition x:Name="Row2" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="Column1" />
        <ColumnDefinition x:Name="Column2" />
    </Grid.ColumnDefinitions>
    <Grid x:Name="GridColumn1" Grid.Column="1">
        ...
    </Grid>
</Grid>

Then in code behind:

GridColumn1.Visibility = Visibility.Collapsed;

As you have more than one row in your Grid, you may want to rearrange them like this:

<Grid x:Name="myGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="Column1" />
        <ColumnDefinition x:Name="Column2" />
    </Grid.ColumnDefinitions>
    <Grid x:Name="GridColumn0" Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
    </Grid>
    <Grid x:Name="GridColumn1" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
    </Grid>
</Grid>

UPDATE >>>

It is not really necessary to rearrange the main Grid like this... you could just as easily add two Grid controls, one in each row of the relevant column and then set the Visibility of them both together:

InnerGrid1.Visibility = InnerGrid2.Visibility = Visibility.Collapsed;

You could even add a Grid into each cell of the main Grid and have full control over which cells are visible at any one time.

Answer 2

<ColumnDefinition>
  <ColumnDefinition.Style>
    <Style TargetType="ColumnDefinition">
      <Setter Property="Width" Value="*" />
        <Style.Triggers>
          <DataTrigger Binding="{Binding IsColumnVisible}" Value="False">
            <Setter Property="Width" Value="0" />
          </DataTrigger>
        </Style.Triggers>
    </Style>
  </ColumnDefinition.Style>
</ColumnDefinition>

Please do implement INotifyPropertyChanged in your ViewModel

Answer 3

In WPF Grid Column and Row Hiding on Code Project, they show a way using dependency properties. They set Visible = false, but internally, it sets Width = 0.

Another idea is to delete the column definition in code behind... But I guess it's an even worse hack! :(

Answer 4

An ugly hack would be to just change the width to 0 (out of sight, out of mind).

There are many reasons why you shouldn't do this but, based upon your situation, it may suffice!

Answer 5

Use following to Hide the grid. Similarly you can hide the row definitions and column definitions using Name property.

myGrid.Visibility = System.Windows.Visibility.Hidden;