Collapse one of two Grid columns if empty and stretch the remaining one

Collapse one of two Grid columns if empty and stretch the remaining one

I have 2 Silverlight UserControls that need to be placed side by side in a container. Any of them is present (visible) optionally and in case one is missing I want the remaining one to take 100% width of the container. Basically there are 4 possible states: if none of the 2 controls is present the container is collapsed. The other are like this

The furthest I got so far is using a Grid with two columns

<Grid>   <Grid.ColumnDefinitions>     <ColumnDefinition Width="Auto" />     <ColumnDefinition Width="*"/>   </Grid.ColumnDefinitions>   <userControls:LeftControl Grid.Column="0" ...></userControls:LeftControl>   <userControls:RightControl Grid.Column="1" ...></userControls:RightControl> </Grid> 

This works fine except the case the right control is missing. The left then doesn't stretch.

Answers & Comments...

Answer: 1

I don't think Silverlight layout system is capable of figuring this out on its own.

See if something like this gets you closer to your answer.

Markup:

<Grid x:Name="LayoutRoot" Background="White">     <StackPanel Orientation="Vertical" Width="400" Height="200" Background="Fuchsia">         <Grid x:Name="ContainerGrid" Height="100" Background="Green">             <Grid.ColumnDefinitions>                 <ColumnDefinition Width="*"/>                 <ColumnDefinition Width="*"/>             </Grid.ColumnDefinitions>             <Border x:Name="LeftControl" Grid.Column="0" Background="Red" LayoutUpdated="LeftControl_LayoutUpdated"></Border>             <Border x:Name="RightControl" Grid.Column="1" Background="Blue" LayoutUpdated="RightControl_LayoutUpdated"></Border>         </Grid>         <Button x:Name="ToggleLeft" Content="Toggle Left" Click="ToggleLeft_Click"></Button>         <Button x:Name="ToggleRight" Content="Toggle Right" Click="ToggleRight_Click"></Button>     </StackPanel> </Grid> 

Code behind:

public partial class MainPage : UserControl {     public MainPage()     {         InitializeComponent();     }      private void ToggleLeft_Click(object sender, RoutedEventArgs e)     {         LeftControl.Visibility =              LeftControl.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;     }      private void ToggleRight_Click(object sender, RoutedEventArgs e)     {         RightControl.Visibility =              RightControl.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;     }      private void LeftControl_LayoutUpdated(object sender, EventArgs e)     {         ContainerGrid.ColumnDefinitions[0].Width =             ContainerGrid.Children.Any(                 x => (int)x.GetValue(Grid.ColumnProperty) == 0 && x.Visibility == Visibility.Visible)                 ? new GridLength(1, GridUnitType.Star)                 : GridLength.Auto;     }      private void RightControl_LayoutUpdated(object sender, EventArgs e)     {         ContainerGrid.ColumnDefinitions[1].Width =             ContainerGrid.Children.Any(                 x => (int)x.GetValue(Grid.ColumnProperty) == 1 && x.Visibility == Visibility.Visible)                 ? new GridLength(1, GridUnitType.Star)                 : GridLength.Auto;     } } 

by : borishttp://stackoverflow.com/users/874831

---