WPF ListView无法显示自定义用户组件问题求助

核心问题1：ListView同时设置ItemTemplate与GridView #

当给ListView指定<ListView.View>为GridView时，ItemTemplate会被GridView的列模板完全覆盖。你仅隐藏了列头但未定义任何列，导致ItemTemplate根本无法生效，这是界面空白的主要原因。

核心问题2：DataTemplate未传递数据上下文 #

即便去掉GridView，当前DataTemplate只是新建了一个默认构造的ChatTextMessage组件，没有将ListView项对应的ChatTextMessage数据传递给它，组件只会显示默认占位文本，而非你添加的实际数据。

修复步骤 #

步骤1：移除GridView配置 #

由于你使用自定义组件作为列表项，无需依赖GridView布局，直接删除整个<ListView.View>节点：

<ListView x:Name="listView_chat" Margin="10,10,10,115">
    <ListView.ItemTemplate>
        <DataTemplate DataType="{x:Type local:ChatTextMessage}">
            <local:ChatTextMessage />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

步骤2：让自定义组件绑定数据上下文 #

当前自定义组件的属性为普通CLR属性，不符合WPF绑定规范，需改为依赖属性并完成内部绑定：

自定义组件C#代码修改

namespace Client_Window
{
    public partial class ChatTextMessage : UserControl
    {
        public ChatTextMessage()
        {
            InitializeComponent();
            DataContext = this; // 让内部控件绑定到自身属性
        }

        // 用户名依赖属性
        public static readonly DependencyProperty UsernameProperty =
            DependencyProperty.Register(nameof(Username), typeof(string), typeof(ChatTextMessage));

        public string Username
        {
            get => (string)GetValue(UsernameProperty);
            set => SetValue(UsernameProperty, value);
        }

        // 消息内容依赖属性
        public static readonly DependencyProperty UserMessageProperty =
            DependencyProperty.Register(nameof(UserMessage), typeof(string), typeof(ChatTextMessage));

        public string UserMessage
        {
            get => (string)GetValue(UserMessageProperty);
            set => SetValue(UserMessageProperty, value);
        }

        // 用户头像依赖属性
        public static readonly DependencyProperty UserImageProperty =
            DependencyProperty.Register(nameof(UserImage), typeof(ImageSource), typeof(ChatTextMessage));

        public ImageSource UserImage
        {
            get => (ImageSource)GetValue(UserImageProperty);
            set => SetValue(UserImageProperty, value);
        }
    }
}

自定义组件XAML修改

<UserControl x:Class="Client_Window.ChatTextMessage"
             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:Client_Window"
             mc:Ignorable="d" 
             Height="Auto" Width="Auto">
    <Grid Background="#FF9C9090">
        <Image Margin="10,10,390,90" HorizontalAlignment="Left" Width="50" Height="50" VerticalAlignment="Top"
               Source="{Binding UserImage}"/>
        <Label HorizontalAlignment="Left" Height="25" Margin="70,10,0,0" VerticalAlignment="Top" Width="150" Background="Transparent" FontSize="13"
               Content="{Binding Username}"/>
        <TextBlock Margin="70,40,10,0" TextWrapping="Wrap" MaxHeight="300" FontSize="15"
                   Text="{Binding UserMessage}"/>
    </Grid>
</UserControl>

步骤3：优化ItemsSource设置 #

移除XAML中冗余的ItemsSource="{Binding}"，保留后台代码的赋值即可：

<ListView x:Name="listView_chat" Margin="10,10,10,115">
    <!-- 其他代码 -->
</ListView>

额外注意事项 #

• 空BitmapImage会显示空白头像，建议传入默认图片路径，例如：

  new BitmapImage(new Uri("pack://application:,,,/Assets/default-avatar.png"))
  

• 无需调用listView_chat.Items.Refresh()，ObservableCollection会自动通知UI更新数据。

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