使用INotifyPropertyChanged后ChatItem关联的MessageModel属性未更新问题

核心问题分析 #

1. ContactModel和MessageModel未实现INotifyPropertyChanged，属性变更无法通知UI更新
2. MessageModel的Username和ImageSource是独立字段，不会自动跟随ContactModel的属性变更同步

方案一：手动同步消息属性（适合需保留历史消息独立信息的场景） #

步骤1：让Model类实现INotifyPropertyChanged

先确保有基础的通知基类（如果没有则新建）：

public class ObservableObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

步骤2：修改ContactModel，在属性变更时同步消息集合

namespace UV_MessagingApp.MVVM.Model
{
    public class ContactModel : ObservableObject
    {
        private string _username;
        public string Username
        {
            get => _username;
            set
            {
                if (_username != value)
                {
                    _username = value;
                    OnPropertyChanged();
                    // 遍历更新所有消息的用户名
                    foreach (var msg in Messages)
                    {
                        msg.Username = _username;
                    }
                }
            }
        }

        private ImageSource _imageSource;
        public ImageSource ImageSource
        {
            get => _imageSource;
            set
            {
                if (_imageSource != value)
                {
                    _imageSource = value;
                    OnPropertyChanged();
                    // 遍历更新所有消息的头像
                    foreach (var msg in Messages)
                    {
                        msg.ImageSource = _imageSource;
                    }
                }
            }
        }

        public ObservableCollection<MessageModel> Messages { get; set; }
        public string LastMessage => Messages?.LastOrDefault()?.Message;
    }
}

步骤3：修改MessageModel实现属性通知

namespace UV_MessagingApp.MVVM.Model
{
    public class MessageModel : ObservableObject
    {
        private string _username;
        public string Username
        {
            get => _username;
            set
            {
                _username = value;
                OnPropertyChanged();
            }
        }

        private string _usernameColor;
        public string UsernameColor
        {
            get => _usernameColor;
            set
            {
                _usernameColor = value;
                OnPropertyChanged();
            }
        }

        private ImageSource _imageSource;
        public ImageSource ImageSource
        {
            get => _imageSource;
            set
            {
                _imageSource = value;
                OnPropertyChanged();
            }
        }

        private string _message;
        public string Message
        {
            get => _message;
            set
            {
                _message = value;
                OnPropertyChanged();
            }
        }

        private DateTime _time;
        public DateTime Time
        {
            get => _time;
            set
            {
                _time = value;
                OnPropertyChanged();
            }
        }

        private bool? _firstMessage;
        public bool? FirstMessage
        {
            get => _firstMessage;
            set
            {
                _firstMessage = value;
                OnPropertyChanged();
            }
        }
    }
}

方案二：直接绑定联系人属性（推荐，无数据冗余） #

如果所有消息的用户名/头像需要和当前联系人保持一致，可直接在UI模板中绑定到SelectedContact的属性，无需在MessageModel中存储重复数据：

修改ChatItem模板中的绑定

<StackPanel Orientation="Horizontal">
   <Ellipse Width="30" Height="30"
            Margin="10,0,0,-5">
        <Ellipse.Fill>
            <ImageBrush ImageSource="{Binding DataContext.SelectedContact.ImageSource, RelativeSource={RelativeSource AncestorType=ListView}}"
                        RenderOptions.BitmapScalingMode="Fant">
            </ImageBrush>
        </Ellipse.Fill>
    </Ellipse>

    <StackPanel>
        <StackPanel Orientation="Horizontal">
            <Label Content="{Binding DataContext.SelectedContact.Username, RelativeSource={RelativeSource AncestorType=ListView}}"
                   Foreground="{Binding UsernameColor}"
                   FontWeight="SemiBold"
                   VerticalAlignment="Center"
                   Margin="0,0,-5,0">
            </Label>

            <Label Content="{Binding Time}"
                   Foreground="#44474D"
                   FontWeight="SemiBold"
                   VerticalAlignment="Center">
            </Label>
        </StackPanel>

        <Label Content="{Binding Message}"
               Foreground="White"
               FontWeight="SemiBold"
               VerticalAlignment="Center">
        </Label>
    </StackPanel>
</StackPanel>

此时可删除MessageModel中的Username和ImageSource字段，减少冗余数据。

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