使用ReactiveUI绑定集合到WPF ListBox时显示异常求助

一、快速修复当前显示问题 #

你遇到的ListBox项折叠、不显示文本的问题，核心是WPF默认的ListBoxItem模板未正确渲染字符串内容，或布局约束导致内容被压缩。只需在XAML中给ListBox添加明确的ItemTemplate即可解决：

<rxui:ReactiveUserControl x:Class="MvvmSandbox.Views.ListBoxView"
             x:TypeArguments="vm:ListBoxViewModel"
             xmlns:rxui="http://reactiveui.net"
             xmlns:vm="clr-namespace:MvvmSandbox.ViewModels"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MvvmSandbox.Views"
             mc:Ignorable="d" 
             d:DesignHeight="250" d:DesignWidth="500">
    <ListBox x:Name="Strings">
        <!-- 添加ItemTemplate明确渲染字符串 -->
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" Padding="4" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</rxui:ReactiveUserControl>

添加后ListBox会正确显示文本内容，Padding可优化项的显示间距。

二、迁移到ReactiveUI推荐的DynamicData方案 #

ReactiveUI当前官方推荐使用DynamicData替代ObservableCollection，它提供更强大的响应式集合处理能力，支持过滤、排序、分组等操作，且与ReactiveUI生态完全兼容。

1. 安装依赖NuGet包 #

在项目中安装以下包：

• DynamicData
• ReactiveUI.DynamicData

2. 修改ViewModel代码 #

用SourceList作为内部可修改数据源，通过DynamicData绑定到对外暴露的ReadOnlyObservableCollection：

using DynamicData;
using ReactiveUI;
using System.Collections.ObjectModel;

namespace MvvmSandbox.ViewModels
{
    public class ListBoxViewModel : ReactiveObject
    {
        // 内部可修改的数据源
        private readonly SourceList<string> _stringsSource = new();
        // 对外暴露的只读响应式集合
        public ReadOnlyObservableCollection<string> Strings { get; }

        public ListBoxViewModel()
        {
            // 初始化数据
            _stringsSource.AddRange(new[]
            {
                "This is a test of the Emergency Broadcast System.",
                "This is only a test."
            });

            // 建立数据源到只读集合的响应式绑定
            _stringsSource.Connect()
                .Bind(out var stringsCollection)
                .Subscribe();

            Strings = stringsCollection;
        }

        // 示例：响应式添加新项的方法
        public void AddNewString(string content)
        {
            _stringsSource.Add(content);
        }
    }
}

3. 视图绑定保持不变 #

视图后台代码无需修改，OneWayBind可正常绑定ReadOnlyObservableCollection：

using MvvmSandbox.ViewModels;
using ReactiveUI;

namespace MvvmSandbox.Views
{
    public partial class ListBoxView : ReactiveUserControl<ListBoxViewModel>
    {
        public ListBoxView()
        {
            InitializeComponent();
            ViewModel = new ListBoxViewModel();

            this.WhenActivated(disposable =>
            {
                this.OneWayBind(ViewModel, vm => vm.Strings, v => v.Strings.ItemsSource)
                    .DisposeWith(disposable);
            });
        }
    }
}

三、额外注意事项 #

• 确保WhenActivated中的绑定被正确清理：使用.DisposeWith(disposable)可在视图销毁时自动释放绑定资源，避免内存泄漏。
• DynamicData支持丰富的集合操作，比如过滤可添加.Filter(item => item.Contains("test"))，排序可添加.Sort(SortExpressionComparer<string>.Ascending(item => item))，这些操作均为响应式，会自动更新UI。

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