WPF如何让两个ItemsControl实现连续换行布局？

问题本质 #

两个独立的ItemsControl属于彼此独立的布局容器，各自的WrapPanel仅会在自身范围内处理换行逻辑，因此第二个ItemsControl必然从新行开始布局，无法利用第一个容器的剩余空间。

可行方案 #

方案1：用CompositeCollection合并数据源（XAML层面处理） #

直接在XAML中将两个集合合并到同一个ItemsControl中，让单个WrapPanel负责所有项的连续布局：

<ItemsControl>
    <ItemsControl.ItemsSource>
        <CompositeCollection>
            <!-- 绑定第一个数据源 -->
            <CollectionContainer Collection="{Binding YourFirstCollection}" />
            <!-- 绑定第二个数据源 -->
            <CollectionContainer Collection="{Binding YourSecondCollection}" />
        </CompositeCollection>
    </ItemsControl.ItemsSource>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- 统一项模板，若两个集合类型不同，需用DataTemplateSelector区分 -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- 这里放置你的项UI内容 -->
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

如果两个集合的项类型不同，需要自定义DataTemplateSelector，根据项的类型匹配对应的模板。

方案2：在ViewModel中合并集合（后端处理） #

在ViewModel层将两个数据源合并为一个统一集合，再绑定给ItemsControl：

// 定义合并后的集合
public ObservableCollection<object> CombinedItems { get; } = new ObservableCollection<object>();

// 初始化或数据源更新时同步合并逻辑
private void UpdateCombinedItems()
{
    CombinedItems.Clear();
    foreach (var item in YourFirstCollection)
        CombinedItems.Add(item);
    foreach (var item in YourSecondCollection)
        CombinedItems.Add(item);
}

之后在XAML中绑定这个合并后的集合即可：

<ItemsControl ItemsSource="{Binding CombinedItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- 配置项模板或DataTemplateSelector -->
</ItemsControl>

补充说明 #

• 若需要保持原两个集合的独立更新能力：方案1的CompositeCollection会自动同步原集合的增删改操作；方案2则需要监听原集合的CollectionChanged事件，实时更新合并后的集合。
• 针对不同类型项的模板区分，可参考以下DataTemplateSelector示例：

public class ItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate FirstTypeTemplate { get; set; }
    public DataTemplate SecondTypeTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        return item is FirstItemType ? FirstTypeTemplate : SecondTypeTemplate;
    }
}

在XAML中引用并配置：

<local:ItemTemplateSelector x:Key="ItemSelector"
                            FirstTypeTemplate="{StaticResource FirstItemTemplate}"
                            SecondTypeTemplate="{StaticResource SecondItemTemplate}" />

<ItemsControl ItemTemplateSelector="{StaticResource ItemSelector}" ... />

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