c# - 如何用包装控件填充宽度？

Question

为了减少屏幕空间的浪费，我使用了 StackPanel 将 Label 与其各自的 TextBox 耦合两次，然后将它们包装在 WrapPanel 中。 (在此示例中，我仅指 Branch 和 Phone 控件。)

当屏幕足够大时，两个 StackPanel 控件并排并填充必要的宽度:

当屏幕缩小时，两个StackPanel控件正确换行，但右侧留有空白:

下面是完成我迄今为止所完成的工作的 xaml 编写。不用介意 validatingTextBoxStyle，因为它只会影响红色轮廓和错误 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>

我尝试添加带有 ColumnDefinitions 的 Grid 层来调整两个 StackPanel 控件的大小，但这会抵消包装功能。我尝试将其 Horizo​​ntalAlignment 设置为 Stretch，但没有看到任何变化。我也在 stretching a WrapPanel's child objects 上研究过这个类似的问题，但是 UniformGrid 不适合这种情况。

进一步调查，我确实注意到 StackPanel 控件没有像我想象的那样拉伸(stretch)，如下所示，添加背景颜色时:

有没有办法拉伸(stretch)这些控件以填充它们被包装后的剩余宽度？

Answer 1

如果要控制列的宽度，请使用 Grid 而不是 WrapPanel。例如，这将使标签宽度为 70 并且文本框填充剩余空间:

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