WPF中两个ListView绑定同一属性时第二个为空的问题求助

问题根源 #

你直接在集合中使用ListViewItem这种WPF可视化控件作为数据项是错误的。WPF的UI元素（比如ListViewItem）只能属于一个父容器，当第一个ListView加载时，会把这些Item纳入自己的可视化树，第二个ListView就无法再使用它们，所以显示为空。这完全违背了MVVM的核心思想——视图和数据分离，模型层不应该包含任何UI控件类型。

解决方案 #

按照MVVM规范重构代码，将数据和视图彻底分离：

1. 创建纯数据模型类（不包含任何UI元素）
2. 替换原有集合的元素类型为纯数据模型
3. 在ListView中通过ItemTemplate定义数据的显示方式

修正后的代码 #

1. 新增纯数据模型ItemModel.cs

namespace WPF_TestApp.MVVM.Model
{
    public class ItemModel
    {
        public string Content { get; set; }
    }
}

2. 修改MainModel.cs

using Caliburn.Micro;
using WPF_TestApp.MVVM.Model;

namespace WPF_TestApp.MVVM.Model
{
    public class MainModel
    {
        public BindableCollection<ItemModel> Items { get; set; }
        public MainModel()
        {
            Items = new BindableCollection<ItemModel>();

            for(int i = 0; i<=100; i++)
            {
                Items.Add(new ItemModel { Content = $"Item >>>{i.ToString()}" });
            }
        }
    }
}

3. 修改MainViewModel.cs

using Caliburn.Micro;
using WPF_TestApp.MVVM.Model;

namespace WPF_TestApp.MVVM.ViewModel
{
    public class MainViewModel
    {
        public MainModel Model { get; set; }
        public BindableCollection<ItemModel> Items { get; set; }

        public MainViewModel()
        {
            Model = new MainModel();
            Items = Model.Items;
        }
    }
}

4. 修改MainView.xaml（添加ItemTemplate）

<Window x:Class="WPF_TestApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF_TestApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" BorderBrush="#FF313131" BorderThickness="1" CornerRadius="0,0,5,5" Margin="5,0,5,5">
            <ListView AlternationCount="2" ItemsSource="{Binding Items}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Content}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Border>
        <Border Grid.Column="1" BorderBrush="#FF313131" BorderThickness="1" CornerRadius="0,0,5,5" Margin="5,0,5,5">
            <ListView AlternationCount="2" ItemsSource="{Binding Items}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Content}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Border>
    </Grid>
</Window>

效果说明 #

修改后两个ListView都会正常显示相同数据，同时满足MVVM的设计规范：

• 模型层只负责存储和管理数据，不涉及任何UI逻辑
• 视图层通过模板定义数据的展示样式，可独立修改
• 同一数据集合可以安全绑定到多个控件，不存在UI元素归属冲突

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