Dialogue bubbles often appear in communication software. Compared with the contextual dialogue in the form of plain text, the use of dialogue bubbles can make the chat interface more vivid and interesting. Through extension, bubble skin can also be made, which can make the software personalized functions more abundant.
public ObservableCollection<ChatInfoModel> ChatInfos { get; set; } = new ObservableCollection<ChatInfoModel>();
for sending string chat:
1 2 3 4 5 6 7 8
var info = new ChatInfoModel { Message = "Hello", SenderId = _id, Type = ChatMessageType.String, Role = ChatRoleType.Sender }; ChatInfos.Add(info);
sending image:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
var dialog = new OpenFileDialog(); if (dialog.ShowDialog() == true) { var fileName = dialog.FileName; if (File.Exists(fileName)) { var info = new ChatInfoModel { Message = BitmapFrame.Create(new Uri(fileName)), SenderId = _id, Type = ChatMessageType.Image, Role = ChatRoleType.Sender, Enclosure = fileName }; ChatInfos.Add(info); } }
sending audio:
1 2 3 4 5 6 7 8 9
var info = new ChatInfoModel { Message = "Audio", SenderId = _id, Type = ChatMessageType.Audio, Role = ChatRoleType.Sender, Enclosure = fileName }; ChatInfos.Add(info);
for reading audio and image message we need to create a event called hc:ChatBubble.Selected:
privatevoidListBoxChat_Selected(object sender, RoutedEventArgs e) { if (e.OriginalSource is FrameworkElement element && element.Tag is ChatInfoModel info) { if (info.Type == ChatMessageType.Image) { new ImageBrowser(new Uri(info.Enclosure.ToString())) { Owner = WindowHelper.GetActiveWindow() }.Show(); } elseif (info.Type == ChatMessageType.Audio) { var player = new SoundPlayer(info.Enclosure.ToString()); player.PlaySync(); } } }
You must specify the ChatRoleType to specify the Receiver and Sender
You must specify the ChatMessageType to specify the Message Type (String, Image, Audio, Custom)