Layout in silverlight

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

Had the same problem, only made worse by having a splitter in a middle third column.

Basically I wound up binding the column widths (each of them) to properties that return auto in one mode and star in the other mode. Make sure you implement INotifyPropertyChange for the properties and call the onchange helper for both column property names when you change the flag controlling the layout.

Answer 2

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