Question

Here’s my problem. I have three controls in a row (they capture people’s names). The controls themselves size themselves to an appropriate size. I want to space these three controls horizontally to be evenly spaced along the line. This bit is easy:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition />
  </Grid.RowDefinitions>
  <Border Grid.Row="0" Grid.Column="0" BorderThickness="2" Height="50" Width="50" />
  <Border Grid.Row="0" Grid.Column="1" BorderThickness="2" Height="50" Width="50" />
  <Border Grid.Row="0" Grid.Column="2" BorderThickness="2" Height="50" Width="50" />
</Grid>

The problem comes when I want to hide the second entry. If I set its visibility to collapsed, I would want the two remaining items to be equally spaced. This does not happen, the middle column remains at 1/3 of the grid’s width.

I have tried various combinations of grids and stackpanels but cannot find a way around this. I am trying to find a fairly generic solution as this situation may arise again.

Visually, it should look like:

   +----------------------------------------------+
   | +------------+ +------------+ +------------+ |
   | |aardvark    | |beatle      | |cat         | |
   | +------------+ +------------+ +------------+ |
   +----------------------------------------------+

Note that the inner boxes use the width=* to size them to 1/3 but the controls inside the boxes are not stretched.

Answer 1

This is how I ended up solving the problem.

  <Grid>   
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="{Binding IsVisible, Converter={StaticResource collapsed2auto}}"/>
      <ColumnDefinition Width="*" />  
   </Grid.ColumnDefinitions>   
   <Grid.RowDefinitions>    
     <RowDefinition />   
   </Grid.RowDefinitions>   
   <Border Grid.Row="0" Grid.Column="0" BorderThickness="2" Height="50" Width="50" />   
   <Border Grid.Row="0" Grid.Column="1" BorderThickness="2" Height="50" Width="50" Visibility="{Binding Path=IsVisible}"/>   
   <Border Grid.Row="0" Grid.Column="2" BorderThickness="2" Height="50" Width="50" /> 
  </Grid> 

This feels like the least hacky solution. basically, it takes the same property used to disable the control, transforms it into a “*” or “auto” via a converter and assigns it to the column definition. Seems to work.

I had also considered building a trigger to do the same, but this feels cleaner.