WPF XAML and MinWidth and MaxWidth

Question

I have StackPanel in which I wrapped 7 Rectangles all varying widths.

My First rectangle in the Stack, I have a Min and Max width defined and one of the other Rectangles (see below x:Name="ToBeCollapsed") that is Collapsed by default, BUT is made visible in a certain condition in the C#.
My issue is that the first Rectangle does not stretch to the MAX width if the rectangle "ToBeCollasped" is collapsed. My thought was that the first rectangle would fill the space to the MAX of "755" if the collapsed rectangle was collapsed.

Am I wrong in my logic?

My layout is below:

<StackPanel x:Name="RectangleColumns" Width="1840" Orientation="Horizontal">

     <Rectangle MinWidth="575" MaxWidth="755" /> 
     <Rectangle Width="315"/>
     <Rectangle Width="180" />
     <Rectangle Width="180"/>
     <!--If collapsed first rectangle should grow to 755.  MinWidth + 180-->
     <Rectangle x:Name="ToBeCollapsed" Width="180"/>
     <Rectangle Width="220"/>
     <Rectangle Width="190"/>
</StackPanel>

Answer 1

A grid with column definitions set properly will do the trick. I've tried this myself using some fill colours and smaller widths to demonstrate the point, that first column grows into the space when the fifth column collapses:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" x:Name="RectangleColumns" HorizontalAlignment="Stretch  ">
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="200" MaxWidth="400"/>
            <ColumnDefinition MaxWidth="50"/>
            <ColumnDefinition MaxWidth="50"/>
            <ColumnDefinition MaxWidth="50"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition MaxWidth="50"/>
            <ColumnDefinition MaxWidth="50"/>
        </Grid.ColumnDefinitions>

        <Rectangle Grid.Column="0" Fill="Aqua" MinWidth="200" MaxWidth="400" />
        <Rectangle Grid.Column="1" Fill="Blue" Width="50"/>
        <Rectangle Grid.Column="2" Fill="Aqua" Width="50" />
        <Rectangle Grid.Column="3" Fill="Blue" Width="50"/>            
        <Rectangle Grid.Column="4" Fill="Pink" Width="300" Name="toBeCollapsed"/>
        <Rectangle Grid.Column="5" Fill="Aqua" Width="50"/>
        <Rectangle Grid.Column="6" Fill="Blue" Width="50"/>
    </Grid>

    <Button Grid.Row="1" Content="Toggle Visibility" Name="ButtonToggle" />
</Grid>

Code-behind, just to demonstrate:

    public MainWindow()
    {
        InitializeComponent();
        ButtonToggle.Click += ButtonToggleOnClick;
    }

    private void ButtonToggleOnClick(object sender, RoutedEventArgs routedEventArgs)
    {
        toBeCollapsed.Visibility = toBeCollapsed.Visibility == Visibility.Collapsed
            ? Visibility.Visible
            : Visibility.Collapsed;
    }

Answer 2

Always look behind the schene:

In WPF, every LayoutControl is a Grid - or reproducable with a Grid - but it uses different Column or Row definitions and Alignment.

Stackpanel is a Grid which contains following setup (Horizontal):

• Columndefinition for every added controls with Auto size
• All added Child controls HorizontalAligment is Center
• Additional Columndefinition with * Width

And that's the way the cookies cramble.

Auto sizing distributes space based on the size of the content that is within a column or row.

Which is usually the smallest possible size :/

So +1 for @Bradley Uffner

Use a Grid where Columndefinition of Min/Max Rectangle is *.