DockPanel - Stretch control to fill remaining space in respect to it's siblings Visibility

Question

The following snippet produces this result:

<DockPanel Width="240">
    <ComboBox HorizontalAlignment="Stretch">
        <ComboBoxItem Content="A" />
        <ComboBoxItem Content="B" />
        <ComboBoxItem Content="C" />
    </ComboBox>
</DockPanel>

As we can see, the ComboBox fills the entire DockPanel width nicely, as it's supposed to be. If we add the following StackPanel right after the ComboBox , we would have this:

<StackPanel Orientation="Horizontal" Width="120" Visibility="Visible" Background="Aqua">
    <TextBox Width="60" />
    <TextBox Width="60" />
</StackPanel>

We've just got into the first problem: shouldn't the ComboBox fill the other 120 pixels of the DockPanel , due to it's HorizontalAlignment=Stretch and since the StackPanel uses the other 120?

Least, if we turn our StackPanel.Visibility into Hidden/Collapsed , we would have this:

How can I make the ComboBox to fill the entire DockPanel.Width HORIZONTALLY , just like the first image, when the StackPanel.Visibility is Hidden/Collapsed ?

All the controls must be horizontally aligned and a DockPanel isn't mandatory to achieve this.

Answer 1

We've just got into the first problem: shouldn't the ComboBox fill the other 120 pixels of the DockPanel , due to it's HorizontalAlignment=Stretch and since the StackPanel uses the other 120?

Only if it the last child of the DockPanel :

<DockPanel Width="240">
    <StackPanel Orientation="Horizontal" Width="120" Visibility="Visible" Background="Aqua"
                DockPanel.Dock="Right">
        <TextBox Width="60" />
        <TextBox Width="60" />
    </StackPanel>
    <ComboBox>
        <ComboBoxItem Content="A" />
        <ComboBoxItem Content="B" />
        <ComboBoxItem Content="C" />
    </ComboBox>
</DockPanel>

There is no reason to explicitly set the HorizontalAlignment property to Stretch by the way. This is the default value.

How can I make the ComboBox to fill the entire DockPanel.Width HORIZONTALLY, just like the first image, when the StackPanel.Visibility is Hidden / Collapsed ?

By adding the ComboBox as the last child as per the above sample markup.

Answer 2

If i understand you, in your case it seems that Grid component will be a good choice.

For the space issue - Visibility = "Hidden" keeps the original component space "alive", then if it possible - use Visibility = "Collapsed" instead

 <Grid Width="240">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <ComboBox HorizontalAlignment="Stretch">
            <ComboBoxItem Content="A" />
            <ComboBoxItem Content="B" />
            <ComboBoxItem Content="C" />
        </ComboBox>
        <StackPanel  Grid.Column="1" Orientation="Horizontal"  Visibility="Visible" Background="Red">
            <TextBox Width="60" />
            <TextBox Width="60" />
        </StackPanel>
    </Grid>