Question

I am running into a layout issue which I am not sure how to solve. Here is how my xaml looks like,

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

    <Grid x:Name="abc" Grid.Row="0" Grid.Column="0">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button Grid.Row="0" Grid.Column="0"></Button>
            <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
        </Grid>
    </Grid>

    <Grid Grid.Row="0" Grid.Column="1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button Grid.Row="0" Grid.Column="0"></Button>
            <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
        </Grid>
    </Grid>
</Grid>

Now the layout of the above xaml is exactly as what I want. However, I have one additional requirement. At runtime I need to make grid “abc” collapsable. And the other grid needs to fill the entire width. If I use star sizing width then if “abc” is collapsed it behaves more like hidden than collapsed. Collapse seems to work with Auto sized widths but then it doesn’t give me propotional sizing as required. Is there a way to accomplish this. Note, I only have access to Grids, StackPanels, and Canvas for layout of my items (no DockPanel). Please let me know of any ideas along with any code snippets. Thanks.

Answer 1

Hard tell your intent in the layout, but here is a sample to get you started.
I changed the ColumnDefintion width from * to Auto in the Click event and set the Visibility to Collasped for “abc” Grid. I used the second button to change these values for test purposes, and I removed an extra level of Grid that is not needed.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="ColumnToCollapse" Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid x:Name="abc" Grid.Row="0" Grid.Column="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0"></Button>
        <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
    </Grid>

    <Grid Grid.Row="0" Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Click="Button_Click"  />
        <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
    </Grid>
</Grid>

Here is the button click event:

private bool _toggle = true;

private void Button_Click(object sender, RoutedEventArgs e)
{
  if (_toggle)
  {
    ColumnToCollapse.Width = GridLength.Auto;
    abc.Visibility = Visibility.Collapsed;
    _toggle = false;
  }
  else
  {
    ColumnToCollapse.Width = new GridLength(1, GridUnitType.Star); 
    abc.Visibility = Visibility.Visible;
    _toggle = true;
  }
}