Question

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.

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