How to fill width with wrapped controls?

Question

In an attempt to waste less screen real-estate, I've used a StackPanel to couple a Label with its respective TextBox twice, then wrapped those within a WrapPanel. (In this example I am only referring to the Branch and Phone controls.)

When the screen is large enough, the two StackPanel controls are side-by-side and fill the necessary width:

When the screen shrinks, the two StackPanel controls are correctly wrapped, but leave blank space on the right:

Below is the xaml write-up to accomplish what I have thus far. Nevermind the validatingTextBoxStyle as it only affects a red outline and error ToolTip.

<WrapPanel
    VerticalAlignment="Stretch" 
    Margin="0">

    <StackPanel Orientation="Horizontal">
        <Label 
            Content="Branch" 
            Margin="5,3" 
            Width="40"/>
        <TextBox 
            x:Name="textBox"
            Height="24"  
            Margin="5,0,5,5"              
            Style="{StaticResource validatingTextBoxStyle}"
            Text="{Binding BranchNumber, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" 
            MinWidth="150"/>
    </StackPanel>

    <StackPanel Orientation="Horizontal">
        <Label 
            Content="Phone" 
            Margin="5,3" 
            Width="40"/>
        <TextBox 
            x:Name="phone" 
            TabIndex="2"
            Height="24"  
            Margin="5,0,5,5"              
            Style="{StaticResource validatingTextBoxStyle}"
            Text="{Binding PhoneNumberToSearch, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" 
            MinWidth="150"/>
    </StackPanel>

</WrapPanel>

I've tried adding a Grid layer with ColumnDefinitions to resize the two StackPanel controls, but that negates the wrapping functionality. I've tried setting their HorizontalAlignment to Stretch, but saw no change. I've also looked into this similar question on stretching a WrapPanel's child objects, but a UniformGrid doesn't fit the situation.

Investigating further, I did note that the StackPanel controls are not stretching as I thought they might, as noted below when a background color was added:

Is there a way to stretch these controls to fill the remaining width once they've been wrapped?

I don't think there's an easy way to do this... a WrapPanel says *"draw children at whatever size they want, and place them until one would be cut off, then wrap to a new line"*, so child sizes will always be whatever size they specify as. I think the best you could do is switch to a Grid and set the Grid.Row/Grid.Column of items using a converter or trigger... either if width of two items is greater than width of grid, place on second row, or put in a scrollviewer and if scrollbars visible, put in a separate row. I am not sure the best way for that though. — Rachel, Jun 28 '16 at 19:11
@Rachel I was afraid this might be the case. I'll just have to keep hoping another WPF wizard has some magic up their sleeves still in store for me. — OhBeWise, Jun 29 '16 at 14:25

score 0 · Answer 1 · answered Jan 20 '20 at 06:43

Use a Grid instead of WrapPanel if you want to control the widths of the columns. For example this will make the labels width 70 and the text boxes fill the remaining space:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="70"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="25"></RowDefinition>
        <RowDefinition Height="25"></RowDefinition>
    </Grid.RowDefinitions>
    <Label Content="Branch" Grid.Column="0" Grid.Row="0"/>
    <TextBox x:Name="branchTextBox" Grid.Column="1" Grid.Row="0"/>
    <Label Content="Phone" Grid.Column="0" Grid.Row="1"/>
    <TextBox x:Name="phoneTextBox" Grid.Column="1" Grid.Row="1"/>
</Grid>

How to fill width with wrapped controls?

1 Answers1