我来帮你搞定这个布局难题！你现在用WrapPanel布局三个StackPanel的问题在于，WrapPanel本身不会自动分配剩余空间给子控件——哪怕你设置了HorizontalAlignment="Stretch"，它的逻辑还是根据子控件的原始大小来排列，窗口放大后只会留出空白在右侧，不会让三个控件拉开间距。

最直接有效的解决方案是把外层的WrapPanel换成Grid，利用Grid的列宽度分配机制来实现自适应。具体做法如下：

步骤1：替换外层布局容器 #

把原来的<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">换成<Grid>，然后添加三个列定义，让每个列均分可用宽度（用*表示占比）：

<Grid>
    <Grid.ColumnDefinitions>
        <!-- 三个列各占1/3的宽度，窗口缩放时自动调整 -->
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

步骤2：给每个子StackPanel指定列位置 #

给三个StackPanel分别加上Grid.Column="0"、Grid.Column="1"、Grid.Column="2"属性，同时可以给每个StackPanel设置HorizontalAlignment="Stretch"，让它们填满所在列的宽度：

<!-- 第一个StackPanel，放在第0列 -->
<StackPanel Grid.Column="0" Orientation="Vertical" HorizontalAlignment="Stretch">
    <TextBlock Text="One" />
    <ContentControl>
        <DataGrid HorizontalAlignment="Stretch">
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Header="Export" />
                <DataGridTextColumn Header="Name" Width="180" Binding="{Binding Path=Name}" />
            </DataGrid.Columns>
        </DataGrid>
    </ContentControl>
    <StackPanel Orientation="Horizontal">
        <TextBox></TextBox>
        <Button Name="NewSitePlan"></Button>
    </StackPanel>
</StackPanel>

<!-- 第二个StackPanel，放在第1列 -->
<StackPanel Grid.Column="1" MaxWidth="320" Width="300" HorizontalAlignment="Stretch">
    <TextBlock Text="Two" />
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <DataGrid>
            <DataGrid.Columns>
                <DataGridTextColumn Header="Name" MinWidth="220" Binding="{Binding Path=Name}" />
            </DataGrid.Columns>
        </DataGrid>
    </ScrollViewer>
    <StackPanel Orientation="Horizontal">
        <TextBox></TextBox>
        <Button></Button>
    </StackPanel>
</StackPanel>

<!-- 第三个StackPanel，放在第2列 -->
<StackPanel Grid.Column="2" Width="300" HorizontalAlignment="Stretch">
    <TextBlock Text="Three" />
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <DataGrid HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" MinWidth="250">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Name" MinWidth="150" Binding="{Binding Path=Name}" />
                <DataGridTextColumn Header="RFID" Binding="{Binding Path=Data.RFID}" MinWidth="50" />
            </DataGrid.Columns>
        </DataGrid>
    </ScrollViewer>
    <StackPanel Orientation="Horizontal">
        <TextBox></TextBox>
        <Button></Button>
    </StackPanel>
</StackPanel>

步骤3：保留下方的全宽StackPanel #

原来下方的StackPanel可以直接放在Grid外面，或者让它跨三列（如果需要和上方三个控件同宽）：

</Grid>
<!-- 下方的全宽StackPanel保持不变 -->
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Stretch">
    <TextBlock Text="Sites" />
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <DataGrid>
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Header="Export" />
                <DataGridTextColumn Header="Name" Binding="{Binding Path=Name}" MinWidth="120" />
                <DataGridTextColumn Header="Description" Binding="{Binding Path=Data.Description}" MinWidth="200" />
                <!-- 省略其他列 -->
            </DataGrid.Columns>
        </DataGrid>
    </ScrollViewer>
    <StackPanel Orientation="Horizontal">
        <TextBox></TextBox>
        <Button></Button>
    </StackPanel>
</StackPanel>

为什么这个方案有效？ #

• Grid的*宽度会自动把窗口的可用水平空间按比例分配给每一列，窗口放大时，每列的宽度都会增加，从而让三个StackPanel自动拉开间距。
• 如果需要某列固定宽度（比如第二个StackPanel的MaxWidth），可以把对应的ColumnDefinition改成<ColumnDefinition Width="Auto"/>或者固定值，其他列用*，这样灵活度更高。

内容的提问来源于stack exchange，提问作者ScottSto