Recently I am trying to make a user chat program, which requires the use WPF ListView to show chat messages one by one. To make the maintenance easier, I decided to use custom components as a single chat message. However, when I try to bind my custom user components to the ListView, it will leave blank and show nothing.
I tried to check if I had bound the list correctly, but I could not find a problem. I also tried to search the google, but it seemed that there is no similar questions.
Here is my ListView code:
<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>And here is my binding code:
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();}Just if you also want my custom components, here is my custom components:
<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; } } }}I wonder why it can not show my custom components correctly, and where I did wrong.