使用GridSplitter时元素无法水平拉伸的问题排查

核心原因 #

你的布局无法实现水平拉伸，主要有两个关键问题：

1. ItemsControl 默认不拉伸内部内容：即便外层容器（Border、ScrollViewer）设置了HorizontalAlignment="Stretch"，ItemsControl的HorizontalContentAlignment默认值为Left，导致内部项不会填满列宽。
2. GridSplitter 配置不完整：未明确指定调整目标列，拖动时无法正确触发列宽修改逻辑。

修复方案 #

1. 让 ItemsControl 内容填满容器 #

给ItemsControl添加HorizontalContentAlignment="Stretch"，强制内部项拉伸至容器宽度：

<ItemsControl ItemsSource="{Binding Financials}" 
              HorizontalAlignment="Stretch"
              HorizontalContentAlignment="Stretch">
    <!-- 你的ItemTemplate内容 -->
</ItemsControl>

2. 完善 GridSplitter 调整规则 #

给每个GridSplitter添加ResizeBehavior和ResizeDirection属性，明确指定调整相邻左右列：

<GridSplitter Grid.Column="1" 
              VerticalAlignment="Stretch" 
              Width="5"
              ResizeBehavior="PreviousAndNext"
              ResizeDirection="Columns"/>

3. 优化列宽配置（可选） #

若希望前两列能优先分配剩余空间，可将Width="Auto"改为Width="*"，同时保留MinWidth="200"，既保证列宽可灵活调整，又不会小于最小宽度：

<ColumnDefinition Width="*" MinWidth="200" />

完整修复代码 #

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" MinWidth="200" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="*" MinWidth="200" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <!-- Financials -->
    <Border Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch">
        <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
                  HorizontalAlignment="Stretch">
            <ItemsControl ItemsSource="{Binding Financials}" 
                          HorizontalAlignment="Stretch"
                          HorizontalContentAlignment="Stretch">
                <!-- ... -->
            </ItemsControl>
        </ScrollViewer>
    </Border>

    <!-- Splitter -->
    <GridSplitter Grid.Column="1" 
                  VerticalAlignment="Stretch" 
                  Width="5"
                  ResizeBehavior="PreviousAndNext"
                  ResizeDirection="Columns"/>

    <!-- Actions -->
    <Border Grid.Column="2" Grid.Row="0" Background="Red" 
            HorizontalAlignment="Stretch"/>

    <!-- Splitter -->
    <GridSplitter Grid.Column="3" 
                  VerticalAlignment="Stretch" 
                  Width="5"
                  ResizeBehavior="PreviousAndNext"
                  ResizeDirection="Columns"/>

    <!-- Simulation -->
    <ScrollViewer Grid.Column="4" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <ItemsControl />
    </ScrollViewer>
</Grid>

额外注意 #

如果使用了自定义ItemTemplate，需要确保模板内的根元素也设置HorizontalAlignment="Stretch"，否则内容依然无法填满列宽。

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