Collapse a Grid in WPF

Question

I'm using the below code to create a 3 column layout with grids.

<Window x:Class="WpfApplication21.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid Column="0" Background="Aqua"></Grid>
        <Grid Column="1" Background="Red"></Grid>
        <Grid Column="2"  Background="Yellow"></Grid>
    </Grid>
</Window>

enter image description here

The part I don't understand is that when I set the Visibility of the third grid to Collapsed the space it takes is still there. I want the remaining space to be added to other two grids.

<Grid Column="2" Background="Yellow" Visibility="Collapsed"></Grid>

enter image description here

possible duplicate of [Dynamically toggle visibility of WPF grid column from C# code](http://stackoverflow.com/questions/19227091/dynamically-toggle-visibility-of-wpf-grid-column-from-c-sharp-code) — javi, Jul 21 '14 at 10:02

Bolu · Accepted Answer · 2014-07-21T10:10:38.457

You are telling Grid to equally divide itself into 3 parts, you need to set the last column to Auto width to achieve what you want (to make the last column to match the width of its content):

<Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"></ColumnDefinition>
      <ColumnDefinition Width="*"></ColumnDefinition>
      <ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>

score 1 · Answer 2 · answered Jul 21 '14 at 09:58

Since you are hiding only the ColumnDefinition of the Grid, but you are not actually hiding the Grid.

You can do something like this, To hide the Third Column, you need to set the width of the column to be "0"

   <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition  x:Name="TestColumn"  Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid Column="0" Background="Aqua"></Grid>
        <Grid Column="1" Background="Red"></Grid>
       <Button Grid.Column="2" Click="hideColumn">hideColumn</Button>
    </Grid>

 private void hideColumn(object sender, RoutedEventArgs e)
        {
            this.TestColumn.Width = new GridLength(0, GridUnitType.Pixel);
        }

Thanks Sajeetharan, your answer works too, but the answer Bolu suggested does the same without using code. — Vahid, Jul 21 '14 at 10:05

Collapse a Grid in WPF

2 Answers2