WPF ListView 无法显示自定义用户组件

Question

最近在尝试制作一个用户聊天程序，需要使用WPF

ListView

来一一显示聊天消息。为了使维护更容易，我决定使用自定义组件作为单个聊天消息。但是，当我尝试将自定义用户组件绑定到

ListView

时，它将留空且不显示任何内容。
我尝试检查我是否正确绑定了列表，但找不到问题。我也尝试搜索google，但好像没有类似的问题。
这是我的

ListView

代码：

<ListView x:Name="listView_chat" ItemsSource="{Binding}" Margin="10,10,10,115">
    <ListView.ItemTemplate>
        <DataTemplate DataType="{x:Type local:ChatTextMessage}">
            <local:ChatTextMessage />
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.View>
        <GridView>
            <GridView.ColumnHeaderContainerStyle>
                <Style TargetType="{x:Type GridViewColumnHeader}">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </Style>
            </GridView.ColumnHeaderContainerStyle>
        </GridView>
    </ListView.View>
</ListView>

这是我的绑定代码：

private ObservableCollection<ChatTextMessage> messages { get; set; } = new ObservableCollection<ChatTextMessage>();
public PrivateChatPage()
{
    InitializeComponent();
    this.listView_chat.ItemsSource = messages;
    messages.Add(new ChatTextMessage("UserName", "User message", new BitmapImage()));
    this.listView_chat.Items.Refresh();
}

如果您也想要我的自定义组件，这是我的自定义组件：

<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 x:Name="image_userimage" Margin="10,10,390,90" HorizontalAlignment="Left" Width="50" Height="50" VerticalAlignment="Top"/>
        <Label x:Name="label_username" Content="UserName" HorizontalAlignment="Left" Height="25" Margin="70,10,0,0" VerticalAlignment="Top" Width="150" Background="Transparent" FontSize="13"/>
        <TextBlock x:Name="textBlock_user_message" Margin="70,40,10,0" TextWrapping="Wrap" MaxHeight="300" Text="User message" VerticalAlignment="Top" FontSize="15"/>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Xml.Linq;

namespace Client_Window
{
    /// <summary>
    /// ChatTextMessage.xaml 的互動邏輯
    /// </summary>
    public partial class ChatTextMessage : UserControl
    {
        public ChatTextMessage()
        {
            InitializeComponent();
        }
        public ChatTextMessage(string Username, string UserMessage, ImageSource UserImage)
        {
            InitializeComponent();
            this.Username = Username;
            this.UserMessage = UserMessage;
            this.UserImage = UserImage;
        }
        public string Username
        {
            get
            {
                return this.label_username.Content as string;
            }
            set
            {
                this.label_username.Content = value;
            }
        }
        public string UserMessage
        {
            get
            {
                return this.textBlock_user_message.Text;
            }
            set
            {
                this.textBlock_user_message.Text = value;
            }
        }
        public ImageSource UserImage
        {
            get
            {
                return this.image_userimage.Source;
            }
            set
            {
                this.image_userimage.Source = value;
            }
        }
    }
}

我想知道为什么它不能正确显示我的自定义组件，以及我哪里做错了。

Answer 1

ListView

类似于

ListBox

（它扩展了

ListBox

），不同之处在于它提供了额外的视图模式：网格视图。

当您在简单列表模式下使用

ListView

时（如

ListBox

控件），您定义一个

DataTemplate

并将其分配给

ItemsControl.ItemTemplate

属性。顾名思义，这个模板适用于每个项目。

在网格模式下，

ListView

基于列显示数据。您可以通过将

GridViewColumn

对象添加到

GridView

来定义列。要定义单元格的布局，您需要定义

DataTemplate

并将其分配给

GridViewColumn.CellTemplate

属性。

网格模式

<ListView>
  <ListView.Resources>
    <DataTemplate x:Key="CellTemplate" 
                  DataType="{x:Type local:ChatTextMessage}">
      <local:ChatTextMessage />
    </DataTemplate>
  </ListView.Resources>

  <ListView.View>
    <GridView>
      <GridView.ColumnHeaderContainerStyle>
        <Style TargetType="{x:Type GridViewColumnHeader}">
          <Setter Property="Visibility" Value="Collapsed"/>
        </Style>
      </GridView.ColumnHeaderContainerStyle>

      <GridViewColumn Header="Username"
                      CellTemplate="{StaticResource CellTemplate}" />

      <GridViewColumn Header="Message"
                      CellTemplate="{StaticResource CellTemplate}" />
    </GridView>
  </ListView.View>
</ListView>

列表模式

<ListView>
  <ListView.ItemTemplate>
    <DataTemplate x:Key="CellTemplate" 
                  DataType="{x:Type local:ChatTextMessage}">
      <local:ChatTextMessage />
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>