How to update TextBlock text inside of ListBox item

Question

So I have a simple UDP chat app from a WinForm project, which I wanted to look a little bit better, so I am re-making it in WPF. As I realized I can easily put 2 or more TextBlocks inside of a ListItem, I wanted to display the last message of each chat, like so:

But I have no Idea on how to edit those TextBlocks :( I literary just started with WPF, so I bet I just made a duplicate, but because of that, I don't even know how to search for this issue.

Here is the custom ListBox:

<ListBox x:Name="myList" HorizontalAlignment="Left" Width="264" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderThickness="0,1,1,0" MouseLeftButtonUp="myList_MouseLeftButtonUp" Margin="0,25,0,0">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="LightGray" BorderThickness="0,0,0,1" Width="250">
                    <DockPanel Margin="0,7">
                        <Ellipse Name="ellipse" Margin="5"  DockPanel.Dock="Left" Style="{DynamicResource elstyle}">
                        </Ellipse>
                        <TextBlock Text="{Binding Name}" DockPanel.Dock="Top" Margin="0,0,0,7" FontWeight="Bold" MaxWidth="250"></TextBlock>
                        <TextBlock Text="{Binding ID}" DockPanel.Dock="Top" Visibility="Hidden" FontSize="1.333"></TextBlock>
                        <TextBlock x:Name="last_message" Text="{Binding LastMessage}" DockPanel.Dock="Bottom" MaxWidth="250"></TextBlock>
                    </DockPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Answer 1

This is simplified model to show the principal but if you would create view model class that implement INotifyPropertyChanged interface to hold your item data

public class MyItem : INotifyPropertyChanged
{
    private string _name;

    private string _id;

    private string _lastMessage;

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        var handler = this.PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }

    public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            OnPropertyChanged("Name");
        }
    }

    public string ID
    {
        get { return _id; }
        set
        {
            _id = value;
            OnPropertyChanged("ID");
        }
    }

    public string LastMessage
    {
        get { return _lastMessage; }
        set
        {
            _lastMessage = value;
            OnPropertyChanged("LastMessage");
        }
    }
}

and then in your window

public partial class MainWindow : Window
{
    private readonly ObservableCollection<MyItem> _myItems = new ObservableCollection<MyItem>();

    public MainWindow()
    {
        InitializeComponent();
        myList.ItemsSource = _myItems;
        _myItems.Add(new MyItem { Name = "name", ID = "id", LastMessage = "last message" });
        _myItems[0].LastMessage = "new message";
    }
}

and then you don't operate on myList control anymore but on _myItems list and its items. If you add/remove item in the collection it will add/remove item in the UI, if you change property of an item it will update bound property in the UI