Silverlight 4: StackPanel doesn't resize, when content gets more narrow

Question

Hi folks,

I am using Silverlight 4 with Blend 4.

I have a (horizontal) stackpanel that includes some TextBoxes and a Button. The stackpanel is set to stretch to the size that the content uses. The TextBoxes are on autosize too.

When I add text to the Textboxes, the textbox size grows and the stackpanel grows too. So far so good.

When I remove text from the textboxes, the textbox size shrinks (as excepted), but the stackpanel size doesn't.

Is there any trick to make the stackpanel change size, when the content (textboxes) getting smaller?

Thanks in advance, Frank

Here is the XAML for the UserControl:

<Grid x:Name="LayoutRoot">
  <StackPanel x:Name="StackPanelBorder" Orientation="Horizontal">
    <TextBox x:Name="TextBoxCharacteristicName" TextWrapping="Wrap" Text="Tex">
        </TextBox>
    <TextBox x:Name="TextBoxSep" TextWrapping="Wrap" Text="=" IsReadOnly="True">
        </TextBox>
    <Button x:Name="ButtonRemove" Content="-" Click="ButtonAddOrRemove_Click">
        </Button>
  </StackPanel>
</Grid>

Answer 1

you need something like:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">

Also, I don't think that have a textbox which stretches is a good idea, unless it is a requirement. You should specify the width on the textbox so it doesn't stretch.

Also, if the above solution doesn't work then you should post your xaml for letting us see the document outline.

Answer 2

You would be better off using a Grid for this. Just create a Grid with 3 auto columns and it will size to fit the content.

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBox x:Name="TextBoxCharacteristicName" TextWrapping="Wrap" Text="Tex" Grid.Column="0"/>
    <TextBox x:Name="TextBoxSep" TextWrapping="Wrap" Text="=" IsReadOnly="True" Grid.Column="1"/>
    <Button x:Name="ButtonRemove" Content="-" Click="ButtonAddOrRemove_Click" Grid.Column="2"/>
</Grid>

In most cases, you are much better off using a Grid. The StackPanel is a useful control, but I often feel it is overused.

Answer 3

Howdy!

If you want your StackPanel to resize horizontally with the items inside of it, you will need to change the HorizontalAlignment from the default value of "Stretch" to something else.

By default, the stackpanel stretches to fill the entire space of its parent control because the HorizontalAlignment is set to stretch. This makes it difficult for it to grow and shrink in size.

You will want to set the HorizontalAlignment to "Left", "Right" or to "Center". Then the stackpanel will only be as wide as the items inside of it. But choose wisely, because the stackpanel will then dock to that position inside of its parent control.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

Note: If this isn't fixing your problem, then you have a problem with the Parent Control and not your StackPanel.

MSDN website for HorizontalAlignment