如何用包装的控件填充宽度？答案

【问题标题】：How to fill width with wrapped controls?如何用包装的控件填充宽度？
【发布时间】：2020-01-20 14:43:00
【问题描述】：

为了减少浪费的屏幕空间，我使用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 控件的大小，但这会否定包装功能。我尝试将他们的HorizontalAlignment 设置为Stretch，但没有看到任何变化。我也在stretching a WrapPanel's child objects 上查看过类似的问题，但UniformGrid 不适合这种情况。

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

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

【问题讨论】：

我不认为有一种简单的方法可以做到这一点...... WrapPanel 说 “以他们想要的任何大小绘制孩子，并放置它们直到一个被切断，然后包装到新行”，因此子尺寸将始终是它们指定的任何尺寸。我认为您可以做的最好的事情是切换到网格并使用转换器或触发器设置项目的 Grid.Row/Grid.Column ...如果两个项目的宽度大于网格的宽度，则放置在第二行，或放入滚动查看器，如果滚动条可见，则放入单独的行。不过，我不确定最好的方法。
@Rachel 我担心可能是这种情况。我只需要继续希望另一个 WPF 向导能为我提供一些魔法。

标签： c# wpf

【解决方案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>

【讨论】：