WPF. What elements to use in the messenger app?

Question

WPF

The window should contain a list of dialogs (each has a name + a photo of the dialog), and next to the messages of this dialog (each message has a photo, time, text). What are the best elements to use for them? General Grid with StackPanels, in which to add more elements? Or ListBox? Tell me how, in your opinion, is better, or how it is done in popular instant messengers.

Answer 1

Grid is clearly not suitable due to the lack of virtualization. The ListBox is fine at first, but then you're likely to run into its limitations anyway - it only supports visual virtualization, not data virtualization. Let's say a chat of 100 messages will fly, but if you plan to support group chats with an infinite history, then there is a chance that the application will be unresponsive already starting with 1000 messages of history.
In general, we still have to live until then. Most likely, a ListBox (or ListView) will suffice for both the list of chats and the chats themselves. I advise you to immediately discard the idea with the Grid - at least because of the gluttony in terms of RAM.

Answer 2

Grid means placing elements in a certain grid or evenly across the screen. It does not scroll by default. Therefore, it must be used to accommodate a known number of known elements.
StackPanel arranges elements in a row. Scrolling is used when the size is exceeded. Elements can be of different types. In a StackPanel, each added element needs to be managed individually.
ItemsControl is essentially similar to StackPanel, but here we have a centralized control of items - through Items or ItemsSource.
The ListBox adds to the ItemsControl the ability to select items.
This is a very general classification: with the help of properties, handlers, templates, you can turn one into another if you wish.
In your case, depending on the application logic, you can suggest the following.
If the dialogs in your program are represented by a list (BindingList or ObservableCollection is better), then place them in an ItemsControl with a StackPanel as an ItemsPanel. In the element template, you add a title, a photo of the dialog, and a ListBox with messages.
If you don't want to bother with the ItemsControl then use the StackPanel, but then when you add the dialog you have to manually add elements for the title, photo and messages.
You can also consider using a TreeView, where the first level will be dialogs, and the second level will be messages. Automatically get the closing / opening of dialogs.